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-12 -->
    </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<=0?"1":Model.NewsTypeId.ToString())
                                )
                                </div>
                                <div class="form-group">
                                    @Html.LabelFor(m => m.NewsContent)
                                    @(Html.Kendo().Editor()
                                      .Name("NewsContent")
                                      .HtmlAttributes(new { style = " 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-12 -->
    </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);
            }
        }
    }

就这样完成了。。。