kendoui-在线文本编辑器

文本编辑器用过很多，fckeditor是我之前用的最多的，但是问题也有很多，诸如安全问题，浏览器兼容问题。。所以最近也一直在找替代产品，正好在研究kendo，所以就尝试了下kendo提供的edit控件了。

首先上图，看过效果你就能喜欢上了。

下面这张图是点击上传图片后弹窗出来的，这里还能创建文件夹。要上传图片直接点击upload即可，比起fckedit，真的是很简洁。。

代码实现起来也很方便

 <div id="page-wrapper">
     <div class="row">
         <div class="col-lg-12">
             <h1 class="page-header">新闻管理</h1>
         </div>
         <!-- /.col-lg- -->
     </div>
     <!-- /.row -->
     <div class="row">
         <div class="col-lg-12">
             <div class="panel panel-default">
                 <div class="panel-heading">
                     发布新闻
                 </div>
                 <div class="panel-body">
                     <div class="row">
                         <div class="col-lg-6">
                             @using (Html.BeginForm("NewsAddOrUpdate", "Admin", FormMethod.Post))
                             {
                                 @Html.HiddenFor(m=>m.Id)
                                 <div class="form-group">
                                     @Html.LabelFor(m => m.Title)
                                     @Html.TextBoxFor(m => m.Title, new { @class = "form-control" })
                                     @Html.ValidationMessageFor(m => m.Title, "", new { @style = "color:red" })
                                 </div>
                                 <div class="form-group">
                                     @Html.LabelFor(m => m.NewsTypeId) <br />
                                     @(Html.Kendo().DropDownList()
                                           .Name("NewsTypeId")
                                           .DataTextField("Text")
                                           .DataValueField("Value")
                                           .BindTo((List<SelectListItem>)ViewBag.NewsTypeList)
                                           .Value(Model.NewsTypeId<=?"":Model.NewsTypeId.ToString())
                                 )
                                 </div>
                                 <div class="form-group">
                                     @Html.LabelFor(m => m.NewsContent)
                                     @(Html.Kendo().Editor()
                                       .Name("NewsContent")
                                       .HtmlAttributes(new { style = "width: 940px;height:440px" })
                                       .Tools(tools => tools
                                           .Clear()
                                           .Bold().Italic().Underline().Strikethrough()
                                           .JustifyLeft().JustifyCenter().JustifyRight().JustifyFull()
                                           .InsertUnorderedList().InsertOrderedList()
                                           .Outdent().Indent()
                                           .CreateLink().Unlink()
                                           .InsertImage()
                                           .SubScript()
                                           .SuperScript()
                                           .TableEditing()
                                           .ViewHtml()
                                           .Formatting()
                                           .FontName()
                                           .FontSize()
                                           .FontColor().BackColor()
                                       )
                                       .Value(Model.NewsContent)
                                       .ImageBrowser(imageBrowser => imageBrowser
                                             .Image("~/Images/UserFiles/{0}")
                                             .Read("Read", "ImageBrowser")
                                             .Create("Create", "ImageBrowser")
                                             .Destroy("Destroy", "ImageBrowser")
                                             .Upload("Upload", "ImageBrowser")
                                             .Thumbnail("Thumbnail", "ImageBrowser"))
                                         )
                                     @Html.ValidationMessageFor(m => m.NewsContent, "", new { @style = "color:red" })
                                     </div>
                                 <button type="submit" class="btn btn-default">提 交</button>
                                 <button type="reset" class="btn btn-default">重 置</button>
                             }
                         </div>
                     </div>
                     <!-- /.row (nested) -->
                 </div>
                 <!-- /.panel-body -->
             </div>
             <!-- /.panel -->
         </div>
         <!-- /.col-lg- -->
     </div>
     <!-- /.row -->
 </div>

前端无非是绑定字段，依葫芦画瓢就行，具体的可是google kendo 查看demo

要实现后端上传图片，显示图片那就更简单了，我新建了一个控制器继承了EditorImageBrowserController

 public class ImageBrowserController : EditorImageBrowserController
     {
         private const string contentFolderRoot = "~/Images/";
         //private const string prettyName = "Images/";
         private static readonly string[] foldersToCopy = new[] { "~/Content/shared/" };

         /// <summary>
         /// Gets the base paths from which content will be served.
         /// </summary>
         public override string ContentPath
         {
             get
             {
                 return CreateUserFolder();
             }
         }

         private string CreateUserFolder()
         {
             var virtualPath = Path.Combine(contentFolderRoot, "UserFiles");

             var path = Server.MapPath(virtualPath);
             if (!Directory.Exists(path))
             {
                 Directory.CreateDirectory(path);
                 foreach (var sourceFolder in foldersToCopy)
                 {
                     CopyFolder(Server.MapPath(sourceFolder), path);
                 }
             }
             return virtualPath;
         }

         private void CopyFolder(string source, string destination)
         {
             if (!Directory.Exists(destination))
             {
                 Directory.CreateDirectory(destination);
             }

             foreach (var file in Directory.EnumerateFiles(source))
             {
                 var dest = Path.Combine(destination, Path.GetFileName(file));
                 System.IO.File.Copy(file, dest);
             }

             foreach (var folder in Directory.EnumerateDirectories(source))
             {
                 var dest = Path.Combine(destination, Path.GetFileName(folder));
                 CopyFolder(folder, dest);
             }
         }
     }

就这样完成了。。。