MVC中KindEditor的简单使用

最新推荐文章于 2020-05-25 14:56:21 发布

原创最新推荐文章于 2020-05-25 14:56:21 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#编辑器 #MVC

MVC 同时被 2 个专栏收录

3 篇文章

订阅专栏

KindEditor

1 篇文章

订阅专栏

本文介绍如何在MVC项目中集成KindEditor富文本编辑器，并实现图片上传与文件管理功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一：下载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()" />
}