MVC中KindEditor的简单使用

来源：互联网发布：wind金融数据客户端编辑：程序博客网时间：2024/06/05 08:26

第一：下载KindEditor

首先将下载好的最新的KindEditor放入到MVC项目中的Scripts文件夹中。

第二：添加HomeController

    publicclass HomeController : Controller    {               public ActionResult Index()        {            return View();        }         [ValidateInput(false)]        [HttpPost]        public ActionResult Show(string content)        {            ViewBag.Content = content;            <span style="font-family: Arial, Helvetica, sans-serif;">return View();</span>        }    }

注意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);    });    function Show(){var content = window.editor.html(); $.ajax({                         type: "POST",                         url: "/ConventionConfig/Show",                         data: "content=" + content,                         success: function () {                                                   }                     })}</script><h2>KindEditor4编辑器</h2> @Html.Raw(@ViewBag.Content) @using (Html.BeginForm()){    <textarea id="content" name="content" style="width:700px;height:300px;"></textarea>     <input id="OK" class ="easyui-linkbutton" type="button" style ="margin-left :200px;" value="提交" onclick="Show()" />}

uploadJson和fileManagerJson设置值要注意路径名称
window.editor = K.create('#content', options);中的#content要与textarea标记的id一致
显示输出时，使用Html.Raw辅助方法才能正确显示Html

第四：在客户端添加LitJSON.dll引用

项目引用KindEditor/asp.net/bin目录下的LitJSON.

最后，运行就可以看到效果。

0 0