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 => tools 42 .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 => imageBrowser 60 .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 ContentPath 12 { 13 get 14 { 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 }
就这样完成了。。。
