Asp.net MVC使用KindEditor4

来源：互联网发布：c语言中mod函数编辑：程序博客网时间：2024/06/05 07:10

http://blog.csdn.net/dyllove98/article/details/9070125

最近转入Asp.net MVC开发，WebForm下惯用的FreeTextBox已然不能用了。于是想找个功能全、界面雅、免费的纯JS编辑器，KindEditor4正好满足本人的要求，包括图片、Flash、视频上传及空间管理而且配置也异常的简单。下面简单说一下在Asp.net MVC环境下基本配置方法。

Step 1. 下载KindEditor

首先到KindEditor官网下载（目前是4.1.7版本），解压后删除jsp、php、asp、examples文件夹，放入Asp.net MVC项目中的Scripts文件夹中。

Step 2. 添加HomeController

    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标记。

Step 3. 在视图中加入KindEditor脚本

<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

Step 4. 引用LitJSON.dll

项目引用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中修改保存路径。

下载Demo

0 0