首页 > 代码库 > kendoui-在线文本编辑器
kendoui-在线文本编辑器
文本编辑器用过很多，fckeditor是我之前用的最多的，但是问题也有很多，诸如安全问题，浏览器兼容问题。。所以最近也一直在找替代产品，正好在研究kendo，所以就尝试了下kendo提供的edit控件了。
首先上图，看过效果你就能喜欢上了。
下面这张图是点击上传图片后弹窗出来的，这里还能创建文件夹。要上传图片直接点击upload即可，比起fckedit，真的是很简洁。。
代码实现起来也很方便
1 <div id="page-wrapper"> 2 <div class="row"> 3 <div class="col-lg-12"> 4 <h1 class="page-header">新闻管理</h1> 5 </div> 6 <!-- /.col-lg-12 --> 7 </div> 8 <!-- /.row --> 9 <div class="row">10 <div class="col-lg-12">11 <div class="panel panel-default">12 <div class="panel-heading">13 发布新闻14 </div>15 <div class="panel-body">16 <div class="row">17 <div class="col-lg-6">18 @using (Html.BeginForm("NewsAddOrUpdate", "Admin", FormMethod.Post))19 { 20 @Html.HiddenFor(m=>m.Id)21 <div class="form-group">22 @Html.LabelFor(m => m.Title)23 @Html.TextBoxFor(m => m.Title, new { @class = "form-control" })24 @Html.ValidationMessageFor(m => m.Title, "", new { @style = "color:red" })25 </div>26 <div class="form-group">27 @Html.LabelFor(m => m.NewsTypeId) <br />28 @(Html.Kendo().DropDownList()29 .Name("NewsTypeId")30 .DataTextField("Text")31 .DataValueField("Value")32 .BindTo((List<SelectListItem>)ViewBag.NewsTypeList)33 .Value(Model.NewsTypeId<=0?"1":Model.NewsTypeId.ToString())34 )35 </div>36 <div class="form-group">37 @Html.LabelFor(m => m.NewsContent)38 @(Html.Kendo().Editor()39 .Name("NewsContent")40 .HtmlAttributes(new { style = "width: 940px;height:440px" }) 41 .Tools(tools => tools42 .Clear()43 .Bold().Italic().Underline().Strikethrough()44 .JustifyLeft().JustifyCenter().JustifyRight().JustifyFull()45 .InsertUnorderedList().InsertOrderedList()46 .Outdent().Indent()47 .CreateLink().Unlink()48 .InsertImage() 49 .SubScript()50 .SuperScript()51 .TableEditing()52 .ViewHtml()53 .Formatting()54 .FontName()55 .FontSize()56 .FontColor().BackColor()57 )58 .Value(Model.NewsContent)59 .ImageBrowser(imageBrowser => imageBrowser60 .Image("~/Images/UserFiles/{0}")61 .Read("Read", "ImageBrowser")62 .Create("Create", "ImageBrowser")63 .Destroy("Destroy", "ImageBrowser")64 .Upload("Upload", "ImageBrowser")65 .Thumbnail("Thumbnail", "ImageBrowser")) 66 )67 @Html.ValidationMessageFor(m => m.NewsContent, "", new { @style = "color:red" })68 </div> 69 <button type="submit" class="btn btn-default">提 交</button>70 <button type="reset" class="btn btn-default">重 置</button>71 }72 </div>73 </div>74 <!-- /.row (nested) -->75 </div>76 <!-- /.panel-body -->77 </div>78 <!-- /.panel -->79 </div>80 <!-- /.col-lg-12 -->81 </div>82 <!-- /.row -->83 </div>
前端无非是绑定字段，依葫芦画瓢就行，具体的可是google kendo 查看demo
要实现后端上传图片，显示图片那就更简单了，我新建了一个控制器继承了EditorImageBrowserController
1 public class ImageBrowserController : EditorImageBrowserController 2 { 3 private const string contentFolderRoot = "~/Images/"; 4 //private const string prettyName = "Images/"; 5 private static readonly string[] foldersToCopy = new[] { "~/Content/shared/" }; 6 7 8 /// <summary> 9 /// Gets the base paths from which content will be served.10 /// </summary>11 public override string ContentPath12 {13 get14 {15 return CreateUserFolder();16 }17 }18 19 private string CreateUserFolder()20 {21 var virtualPath = Path.Combine(contentFolderRoot, "UserFiles");22 23 var path = Server.MapPath(virtualPath);24 if (!Directory.Exists(path))25 {26 Directory.CreateDirectory(path);27 foreach (var sourceFolder in foldersToCopy)28 {29 CopyFolder(Server.MapPath(sourceFolder), path);30 }31 }32 return virtualPath;33 }34 35 private void CopyFolder(string source, string destination)36 {37 if (!Directory.Exists(destination))38 {39 Directory.CreateDirectory(destination);40 }41 42 foreach (var file in Directory.EnumerateFiles(source))43 {44 var dest = Path.Combine(destination, Path.GetFileName(file));45 System.IO.File.Copy(file, dest);46 }47 48 foreach (var folder in Directory.EnumerateDirectories(source))49 {50 var dest = Path.Combine(destination, Path.GetFileName(folder));51 CopyFolder(folder, dest);52 }53 }54 }
就这样完成了。。。
kendoui-在线文本编辑器
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。