kindeditor编辑器是一款完美免费的开源性HTML可视化编辑器。kindeditor采用JavaScript编写而成，功能强大，简便易用，最大的特色就是能够实现Word文档中编辑时的所见即所得的编辑效果，由于基于插件的方式设计，其所有功能可以以插件形式实现，兼容多个主流浏览器，与Java、.NET、PHP、ASP等程序无缝链接。
开源：开放源代码，高水平，高品质
底层：内置自定义 DOM 类库，精确操作 DOM
扩展：基于插件的设计，所有功能都是插件，可根据需求增减功能
风格：修改编辑器风格非常容易，只需修改一个 CSS 文件
兼容：支持大部分主流浏览器，比如 IE、Firefox、Safari、Chrome、Opera
2. 内置自定义range，完美地支持span标记。
3. 基于插件的方式设计，所有功能都是插件，增加自定义和扩展功能非常简单。
4. 修改编辑器风格很容易，只需修改一个CSS文件。
5. 支持大部分主流浏览器，比如IE、Firefox、Safari、Chrome、Opera。
你要把所需的文件下载下来。
你要把所需要的文件上传到你的网站，接下来就是引用了。在需要显示编辑器的位置添加textarea输入框，注意ID在页面中应该是唯一的，不说你也知道。
在该HTML页面添加以下脚本，第一个参数可用其它CSS选择器，匹配多个textarea时只在第一个元素上加载编辑器。通过K.create函数的第二个参数，可以对编辑器进行配置，具体参数请参考 编辑器初始化参数 (官网有详细介绍)。
如果你想获得编辑器中的数据，可以用下面的代码。
部署kindeditor编辑器
在“index.jsp”<body></body>中添加textarea输入框，设置其宽度为800，高度为600，并且给其设置id和name属性。
在<head></head>中引入kindeditor的js文件。
并在第一个textarea元素上加载kindeditor编辑器。
在MyEclipse展示窗口中找到“servers”，然后右击“tomcat 8.0”，选择“Add/Remove Deployments”。
进入配置项目界面后，在左侧选中我们的项目“Kindeditor”，然后Add添加到右侧栏中。
然后选择运行该服务器中的项目。
等待服务启动完成。
打开浏览器，输入网址，看是否显示我们需要的编辑器窗口。
注：网址若tomcat端口未更改则为“http://localhost:8080/Kindeditor/”
kindeditor在线编辑器配置上传文件功能
我们把插件自带的插件全部放入和kindeditor同等级的目录下面，如图：
找到对应的后台处理程序（个人以jsp为例，因为正在做一个jsp项目）：
打开 jsp文件夹，如图一所示结构。将lib下面的jar引入项目，如果以前存在对应jar则选用较高版本（jar包为java的类库包）。
然后将file_manager_json.jsp和upload_json.jsp放入对应文件夹，能找到就行。这两个为后台处理程序。如图：
打开file_manager_json.jsp。找到
//根目录路径，可以指定绝对路径，比如 /var/www/attached/
String rootPath = pageContext.getServletContext().getRealPath("/") + "upload/";
//根目录URL，可以指定绝对路径，比如 http://www.yoursite.com/attached/
String rootUrl = request.getContextPath() + "/upload/";
将加粗的改为自己的文件目录，以上是我的。如图所示我的文件结构：
打开upload_json.jsp。找到
//文件保存目录路径
String savePath = pageContext.getServletContext().getRealPath("/") + "upload/";
//文件保存目录URL
String saveUrl = request.getContextPath() + "/upload/";
将加粗的改为自己的文件目录，以上是我的。相当于和第五步一样。
现在找到自己的kindeditor进行相应的配置。实际上就是找到后台的这两个文件。
在初始化配置中加上：
uploadJson :
'<%=request.getContextPath()%>/admin/upload_json.jsp',
fileManagerJson : '<%=request.getContextPath()%>/admin/file_manager_json.jsp',
allowFileManager : true
加粗改为自己对应的。
如图为我的完整配置：
现在应该配置具体的插件了，我以image图片处理插件为例子。找到图片插件目录。如图路径：
打开image.js，找到
uploadJson = K.undef(self.uploadJson, self.basePath + 'file_manager_json.jsp'),
加粗的路径最好设置为正确的。（这两个地址最好改成正确的，如果不能正确也可以使用，但是当你主配置地址出错了就不能使用了，我推测是这样的）
然后在后台对应的upload下面创建image文件夹，（image是默认名字，还有几个默认名字：file(文件)，media(视频)，flash(动画)）如果你想用别的名字，你就需要在对应的程序进行文件名的修改。没有这个必要吧。
我的是可以正常使用了，如图：
如果是别的插件重复8--10的步骤就可以了。
点击kindeditor上的文件上传图标，如下图所示：
小于30M的文件都可以上传成功，如下图所示：
如果上传超过30M的文件，如下图所示：
上传超过30M的文件会报错，如下图所示：
接下来我们打开IIS，找到对应的应用程序 ，点击选择“请求筛选”，如下图所示：
然后选择“编辑功能设置...”，如下图所示：
在弹出的”编辑请求筛选设置“对话框中，默认的文件大小是30M，可以根据需要自行修改大小，如下图所示：
然后上传，就可以上传成功了，如下图所示：
编辑器好像是UTF-8编码的，可以在GB2312页面上使用吗？
可以使用。有两种方法，一种方法是引入kindeditor.js文件时将script的charset属性设置成utf-8。
还有一种方法是直接将html/js/css文件编码都转换成GB2312编码（用Notepad++、editPlus等文本编辑器就可以转换编码），不过转换格式后升级比较困难，建议使用第一种方法。
我取不到编辑器数据，直接取得textarea的value也没用。
KindEditor的可视化操作在新创建的iframe上执行，代码模式下的textarea框也是新创建的，所以最后提交前需要执行 sync() 将HTML数据设置到原来的textarea。
KindEditor在默认情况下自动寻找textarea所属的form元素，找到form后onsubmit事件里添加editor.sync()函数，所以用form方式提交数据，不需要手动执行editor.sync()函数。
为什么有些标签被过滤？
KindEditor默认采用白名单过滤方式，可用 htmlTags 参数定义要保留的标签和属性。当然也可以用 filterMode 参数关闭过滤模式，保留所有标签。
【基本介绍】
KindEditor 是一套开源的在线HTML编辑器，主要用于让用户在网站上获得所见即所得编辑效果，开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 KindEditor 使用 JavaScript 编写，可以无缝地与 Java、.NET、PHP、ASP 等程序集成，比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用【软件特点】
快速：体积小，加载速度快开源：开放源代码，高水平，高品质
底层：内置自定义 DOM 类库，精确操作 DOM
扩展：基于插件的设计，所有功能都是插件，可根据需求增减功能
风格：修改编辑器风格非常容易，只需修改一个 CSS 文件
兼容：支持大部分主流浏览器，比如 IE、Firefox、Safari、Chrome、Opera
【软件特点】
1. 体积小，加载速度快，但功能十分丰富。2. 内置自定义range，完美地支持span标记。
3. 基于插件的方式设计，所有功能都是插件，增加自定义和扩展功能非常简单。
4. 修改编辑器风格很容易，只需修改一个CSS文件。
5. 支持大部分主流浏览器，比如IE、Firefox、Safari、Chrome、Opera。
【使用教程】
KindEditor编辑器的使用方法你要把所需的文件下载下来。
你要把所需要的文件上传到你的网站，接下来就是引用了。在需要显示编辑器的位置添加textarea输入框，注意ID在页面中应该是唯一的，不说你也知道。
在该HTML页面添加以下脚本，第一个参数可用其它CSS选择器，匹配多个textarea时只在第一个元素上加载编辑器。通过K.create函数的第二个参数，可以对编辑器进行配置，具体参数请参考 编辑器初始化参数 (官网有详细介绍)。
如果你想获得编辑器中的数据，可以用下面的代码。
部署kindeditor编辑器
在“index.jsp”<body></body>中添加textarea输入框，设置其宽度为800，高度为600，并且给其设置id和name属性。
在<head></head>中引入kindeditor的js文件。
并在第一个textarea元素上加载kindeditor编辑器。
在MyEclipse展示窗口中找到“servers”，然后右击“tomcat 8.0”，选择“Add/Remove Deployments”。
进入配置项目界面后，在左侧选中我们的项目“Kindeditor”，然后Add添加到右侧栏中。
然后选择运行该服务器中的项目。
等待服务启动完成。
打开浏览器，输入网址，看是否显示我们需要的编辑器窗口。
注：网址若tomcat端口未更改则为“http://localhost:8080/Kindeditor/”
kindeditor在线编辑器配置上传文件功能
我们把插件自带的插件全部放入和kindeditor同等级的目录下面，如图：
找到对应的后台处理程序（个人以jsp为例，因为正在做一个jsp项目）：
打开 jsp文件夹，如图一所示结构。将lib下面的jar引入项目，如果以前存在对应jar则选用较高版本（jar包为java的类库包）。
然后将file_manager_json.jsp和upload_json.jsp放入对应文件夹，能找到就行。这两个为后台处理程序。如图：
打开file_manager_json.jsp。找到
//根目录路径，可以指定绝对路径，比如 /var/www/attached/
String rootPath = pageContext.getServletContext().getRealPath("/") + "upload/";
//根目录URL，可以指定绝对路径，比如 http://www.yoursite.com/attached/
String rootUrl = request.getContextPath() + "/upload/";
将加粗的改为自己的文件目录，以上是我的。如图所示我的文件结构：
打开upload_json.jsp。找到
//文件保存目录路径
String savePath = pageContext.getServletContext().getRealPath("/") + "upload/";
//文件保存目录URL
String saveUrl = request.getContextPath() + "/upload/";
将加粗的改为自己的文件目录，以上是我的。相当于和第五步一样。
现在找到自己的kindeditor进行相应的配置。实际上就是找到后台的这两个文件。
在初始化配置中加上：
uploadJson :
'<%=request.getContextPath()%>/admin/upload_json.jsp',
fileManagerJson : '<%=request.getContextPath()%>/admin/file_manager_json.jsp',
allowFileManager : true
加粗改为自己对应的。
如图为我的完整配置：
现在应该配置具体的插件了，我以image图片处理插件为例子。找到图片插件目录。如图路径：
打开image.js，找到
uploadJson = K.undef(self.uploadJson, self.basePath + 'file_manager_json.jsp'),
加粗的路径最好设置为正确的。（这两个地址最好改成正确的，如果不能正确也可以使用，但是当你主配置地址出错了就不能使用了，我推测是这样的）
然后在后台对应的upload下面创建image文件夹，（image是默认名字，还有几个默认名字：file(文件)，media(视频)，flash(动画)）如果你想用别的名字，你就需要在对应的程序进行文件名的修改。没有这个必要吧。
我的是可以正常使用了，如图：
如果是别的插件重复8--10的步骤就可以了。
【常见问题】
kindeditor上传文件超过30M报错的解决办法点击kindeditor上的文件上传图标，如下图所示：
小于30M的文件都可以上传成功，如下图所示：
如果上传超过30M的文件，如下图所示：
上传超过30M的文件会报错，如下图所示：
接下来我们打开IIS，找到对应的应用程序 ，点击选择“请求筛选”，如下图所示：
然后选择“编辑功能设置...”，如下图所示：
在弹出的”编辑请求筛选设置“对话框中，默认的文件大小是30M，可以根据需要自行修改大小，如下图所示：
然后上传，就可以上传成功了，如下图所示：
编辑器好像是UTF-8编码的，可以在GB2312页面上使用吗？
可以使用。有两种方法，一种方法是引入kindeditor.js文件时将script的charset属性设置成utf-8。
还有一种方法是直接将html/js/css文件编码都转换成GB2312编码（用Notepad++、editPlus等文本编辑器就可以转换编码），不过转换格式后升级比较困难，建议使用第一种方法。
我取不到编辑器数据，直接取得textarea的value也没用。
KindEditor的可视化操作在新创建的iframe上执行，代码模式下的textarea框也是新创建的，所以最后提交前需要执行 sync() 将HTML数据设置到原来的textarea。
KindEditor在默认情况下自动寻找textarea所属的form元素，找到form后onsubmit事件里添加editor.sync()函数，所以用form方式提交数据，不需要手动执行editor.sync()函数。
为什么有些标签被过滤？
KindEditor默认采用白名单过滤方式，可用 htmlTags 参数定义要保留的标签和属性。当然也可以用 filterMode 参数关闭过滤模式，保留所有标签。