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);

             }

         }

     }

就这样完成了。。。