最近转入Asp.net MVC开发,WebForm下惯用的FreeTextBox已然不能用了。于是想找个功能全、界面雅、免费的纯JS编辑器,KindEditor4正好满 足本人的要求,包括图片、Flash、视频上传及空间管理而且配置也异常的简单。下面简单说一下在Asp.net MVC环境下基本配置方法。
首先到KindEditor官网下载(目前是4.1.7版本),解压后删除jsp、php、asp、examples文件夹,放入Asp.net MVC项目中的Scripts文件夹中。
public class HomeController : Controller { // // GET: /Home/ [ValidateInput(false)] public ActionResult Index() { return View(); } [ValidateInput(false)] [HttpPost] public ActionResult Index(string content) { ViewBag.Content = content; return View(); } }
注意ValidateInput特性设置为false,否则无法插入Html标记。
<script src="../../Scripts/kindeditor/kindeditor-min.js" type="text/javascript"></script><script type="text/javascript"> KindEditor.ready(function (K) { var options = { uploadJson: '../scripts/kindeditor/asp.net/upload_json.ashx', fileManagerJson: '../scripts/kindeditor/asp.net/file_manager_json.ashx', allowFileManager : true }; window.editor = K.create('#content', options); });</script><h2>KindEditor4编辑器</h2>@Html.Raw(@ViewBag.Content) @using (Html.BeginForm()) { <textarea id="content" name="content" style="width:700px;height:300px;"></textarea> <input type="submit" value="提交" />}
-
uploadJson和fileManagerJson设置值要注意路径名称
-
window.editor = K.create('#content', options);中的#content要与textarea标记的id一致
-
显示输出时,使用Html.Raw辅助方法才能正确显示Html
项目引用KindEditor/asp.net/bin目录下的LitJSON.dll。
现在已经可以运行了。如果想要修改上传文件大小的限制,必须修改upload_json.ashx程序中的maxSize以及修改项目的Web.Config,在<system.web>中加入诸如<httpRuntime maxRequestLength="20000000" executionTimeout="3600" />(此处限制上传文件20MB)。上传的文件放置在KindEditor/attached目录下,如需修改,可分别在 upload_json.ashx及file_manager_json.ashx中修改保存路径。