我相信目前国内富文本编辑器中KindEditor 属于前列，详细的中文帮助文档，简单的加载方式，可以定制的轻量级。都是系统的首选
很多文章教程有kindeditor的使用，但本文比较特别可能带有，上传文件的缩略图和水印的源码！这块也是比较复杂和备受关注的功能
一、下载编辑器
KindEditor 4.1.10 (2013-11-23) [1143KB] 官方最新版 或者: http://www.kindsoft.net/down.php
二、添加到项目
解压 kindeditor-x.x.x.zip 文件，将所有文件上传到您的网站程序目录里
我放在Scripts下
里面有很多例子，你都可以删掉，比如说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的宽高是编辑器的宽高
最后代码是
<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>
有必要解释一下上面的方法
uploadJson：上传文件地址
fileManagerJson：文件管理
allowFileManager:是否启用管理器 false不启动（管理器可以看到以前上传的文件）
（之前分享过一个上传例子）转到 swfupload多文件上传[附源码] 下载这里的源码。并提取upload_ajax.ashx这个文件所相关的类
替换upload_ajax.ashx这个文件，里面添加了几个kindeditor上传和文件管理的方法
upload_ajax
（由于上传图片涉及到水印，缩略图之类）导致类比较多所以从swf这个实例中提取并合并
下载LitJson并引入 http://pan.baidu.com/share/link?shareid=2964341274&uk=3624026355 里面需要用到序列化json这个类可以帮助，这个类是开源的，大家可以百度源码
items:代表自定义工具栏
http://kindeditor.net/ke4/examples/custom-plugin.html 可以参考官方例子，将不需要的去掉，比如缩进功能
无设置items的完整模式
设置后的模式
水印可以是文字和图片
请大家到swfupload例子源码中获取到UpLoad.cs这个类，这个类写了生成缩略图、打水印等信息，是本次上传的核心类之一
2.设置编辑器的值和初始化编辑器的值
初始化值值需要一开始赋值给textarea就可以了
设置值editor.html('<h3>Hello KindEditor</h3>');
3.获取编辑器的值
editor.html()
看到官方的http://kindeditor.net/ke4/examples/default.html例子
很简单的一次使用编辑器，比以前的很流行的CKEditor好用
本文转自ymnets博客园博客，原文链接：http://www.cnblogs.com/ymnets/p/3736582.html，如需转载请自行联系原作者
