ASP.NET MVC5+EF6+EasyUI 后台管理系统（36）-文章发布系统③-kindeditor使用

更新时间：2022-09-14 17:44:00

系列目录

我相信目前国内富文本编辑器中KindEditor 属于前列，详细的中文帮助文档，简单的加载方式，可以定制的轻量级。都是系统的首选

很多文章教程有kindeditor的使用，但本文比较特别可能带有，上传文件的缩略图和水印的源码！这块也是比较复杂和备受关注的功能

一、下载编辑器

KindEditor 4.1.10 (2013-11-23) [1143KB] 官方最新版或者: http://www.kindsoft.net/down.php

二、添加到项目

解压 kindeditor-x.x.x.zip 文件，将所有文件上传到您的网站程序目录里

我放在Scripts下

ASP.NET MVC5+EF6+EasyUI 后台管理系统（36）-文章发布系统③-kindeditor使用

里面有很多例子，你都可以删掉，比如说asp ,asp.net ,jsp ,php,examples

themes是主题，共4个

三、了解常用方法

我们不需要很深入和学习这个富文本编辑器，用到什么到官方查什么就可以，或者google一下，下面是最受关注的几个方法了

加载编辑器
设置编辑器的值
获取编辑器的值
上传图片和文件
上传图片加水印、缩略图

现在我们一个一个来了解

1.加载编辑器

引入JS（前要引入jquery）

<script src="@Url.Content("~/Scripts/kindeditor/kindeditor-min.js")" type="text/javascript"></script>

编辑器需要textarea标签的支持，所以

<textarea id="BodyConetent" name="BodyContent" style="width:700px;height:300px;">HTML内容</textarea>

或者在MVC

 @Html.TextAreaFor(model => model.BodyContent, new { style = "width:675px; height:225px;" })

style的宽高是编辑器的宽高

最后代码是

ASP.NET MVC5+EF6+EasyUI 后台管理系统（36）-文章发布系统③-kindeditor使用

<script src="@Url.Content("~/Scripts/kindeditor/kindeditor-min.js")" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        //加载编辑器
        var editor = KindEditor.create('textarea[name="BodyContent"]', {
            resizeType: 1,
            uploadJson: '/Core/upload_ajax.ashx?action=EditorFile&IsWater=1',
            fileManagerJson: '/Core/upload_ajax.ashx?action=ManagerFile',
            allowFileManager: false,
            items: ['source', 'undo', 'redo', 'wordpaste', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist', 'formatblock', 'fontname', 'fontsize', 'forecolor', 'bold', 'italic', 'table', 'link', 'unlink', 'image', 'fullscreen']
        });
    });
</script>
<textarea id="BodyConetent" name="BodyContent" style="width:700px;height:300px;">HTML内容</textarea>