富文本KidnEditor在MVC中的应用

   最近看到很多网站后台都用到了富文本，包括自己所在的公司也是。公司用的KindEditor，所以就讲讲KindEditor。之前我也没学过，所以网上搜了一篇博文，直接转载如下(PS：完全以学习为目的哦~)

 最近转入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.create('textarea[name="test_desc"]', {
        resizeType: 1,
        uploadJson: '/Scripts/kindeditor4.1.10/upload_json.ashx',///upload/EditorFile?_updirectoryType=11商品详情
        fileManagerJson: '/Scripts/kindeditor4.1.10/file_manager_json.ashx',
        allowFileManager: true,
        afterChange: function () {
            this.sync();
        }
    });

　　　$(function () {
　  　$("#btnSave").click(function () {
　  　var test_desc = $("#test_desc").val();
　  　alert(test_desc);
　  　});
　  　})

</script>

<h2>KindEditor4编辑器</h2>
<textarea id="test_desc" name="test_desc" cols="100" rows="8" style="width:99%;height:350px;visibility:hidden;">
          
        </textarea>
        <input type="button" style="height:35px;" value="保存修改" id="btnSave"/>

 

• 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

<script type="text/javascript"><!-- google_ad_client = "ca-pub-1944176156128447"; /* cnblogs 首页横幅 */ google_ad_slot = "5419468456"; google_ad_width = 728; google_ad_height = 90; //--></script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>

 转载自:http://blog.csdn.net/dyllove98/article/details/9070125

上面的可以不看，可以看终结版，哈哈（这个是根据卷猫博客总结的）：http://www.cnblogs.com/shuai7boy/p/5592419.html

还可以研究使用下百度的UEditor：http://ueditor.baidu.com/website/（推荐使用）

转载于:https://www.cnblogs.com/shuai7boy/p/5783600.html