官方用法介绍：
http://www.kindsoft.net/docs/usage.html
参考：
http://www.cnblogs.com/rason2008/archive/2012/03/10/2389593.html
其中提到的报错，我也遇到。
虽然不影响，但是报错看着总是不爽，是里面的/plugins/code/prettify.js报错，
曾试着修改一些，但是太过复杂，就没有修改完全，于是下定决心将它删了。。。
同时在demo.jsp 将引用的prettyPrint();js删除,项目正常运行。
从其字面意思来讲，应该是美化什么的js.
项目中将其 demo.jsp 改为了 freeMarker模板文件 ftl，但是上传图片和文件上传依然用的是jsp，代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ftl demo</title>
<link rel="stylesheet" href="
${root}/themes/default/default.css" />
<link rel="stylesheet" href="${root}/plugins/code/prettify.css" />
<script language="javascript" type="text/javascript" src="${root}/js/jquery.min.js"></script>
<script charset="utf-8" src="${root}/js/kindeditor.js"></script>
<script charset="utf-8" src="${root}/lang/zh_CN.js"></script>
<script type="text/javascript">
var editor1;
KindEditor.ready(function(K) {
editor1 = K.create('textarea[name="content1"]', {
cssPath : '${root}/plugins/code/prettify.css',
uploadJson : '${root}/jsp/upload_json.jsp',
fileManagerJson : '${root}/jsp/file_manager_json.jsp',
allowFileManager : true,
afterCreate : function() {
var self = this;
K.ctrl(document, 13, function() {
self.sync();
document.forms['form1'].submit();
});
K.ctrl(self.edit.doc, 13, function() {
self.sync();
document.forms['form1'].submit();
});
}
});
});
</script>
</head>
<body>
<form action="***.htm" method="post" name="form1" id="form1">
<table align="center">
<tr>
<td>文字编辑区</td>
</tr>
<tr>
<td>
<textarea id="content1" name="content1" cols="100" rows="8" style="width:700px; height:200px;visibility:hidden;">此处输入文字并编辑</textarea>
</td>
</tr>
<tr>
<input type="submit" value="提交"/>
</tr>
</table>
</form>
</body>
</html>
页面代码中的 ${root}为 配置文件设置的全局路径
<bean id="freemarkerConfiguration" class="org.springframework.ui.freemarker.FreeMarkerConfigurationFactoryBean">
<!-- 模板加载路径 -->
<property name="templateLoaderPaths">
<list>
<value>/WEB-INF/freemarker/</value>
</list>
</property>
<property name="configLocation">
<value>freemarker.properties</value>
</property>
<!--全局变量部分 -->
<property name="freemarkerVariables">
<map>
<entry key="root" value="你要设置的根路径" />
</map>
</property>
<property name="defaultEncoding" value="utf-8" />
</bean>
KindEditor的可视化操作在新创建的iframe上执行，代码模式下的textarea框也是新创建的，所以最后提交前需要将HTML数据同步到原来的textarea，editor.sync()函数会完成这个动作。
KindEditor在默认情况下自动寻找textarea所属的form元素，找到form后onsubmit事件里添加sync函数，所以用form方式提交数据，不需要手动执行sync()函数。
用button的js提交表单前 需同步一下数据到原来的textarea
demo:
function sava(){
//条件判断，验证
editor1.sync()；
//editor1，为 K.create创建的KindEditor实例，如上述所写，是全局变量，此处可以获取
$("#form1").submit();//jquery
}
用jquery获取文本框中数据，并用ajax提交
function(){
editor1.sync()；//先同步，才能拿到值
var content1=$("#content1").val();
$.ajax( {
url:'demo.htm',
type: "POST",
dataType: "text",
data: "content=" + content1
sync: false,
cache:false,
success: function(msg) {
//to do something
}
});
}
经测试，基本没有问题，但用ajax提交表单时，在html编辑器里输入表格时有问题，用form直接submit没有问题，不知是不是一个bug.
下面来自网上的参考：
//取得HTML内容
html = KE.html('editor_id');
//同步数据后可以直接取得textarea的value
KE.sync('editor_id');
html = document.getElementById('editor_id').value;
html = $('#editor_id').val(); //jQuery
//设置HTML内容
KE.html('editor_id', 'HTML内容');
参考文章：
http://hi.baidu.com/l245319872/blog/item/6cd63cab46bf8ee4faed50cd.html
http://codeigniter.org.cn/forums/thread-10904-1-1.html
如果时间充足的话，最后看一下KindEditor的API
项目中jar包用maven管理：
pom.xml相关配置如下：
<!--html编辑器所需依赖-->
<dependency>
<groupId>com.googlecode.json-simple</groupId>
<artifactId>json-simple</artifactId>
<version>1.1</version>
</dependency>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>1.4</version>
</dependency>
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.2.1</version>
</dependency>
分享到：
相关推荐
### 彻底解决ASP中KindEditor编辑器无法获得提交的数据问题 ...通过以上步骤，可以在ASP环境中成功地使用KindEditor编辑器，并且能够正确地获取编辑器中提交的数据，从而解决无法获取提交数据的问题。
下面我们将深入探讨KindEditor的核心特性、功能、使用方法以及其在实际项目中的应用。 1. **核心特性**： - **跨浏览器兼容**：KindEditor支持主流的浏览器，包括IE6+、Firefox、Chrome、Safari和Opera，确保在...
KindEditor非常适合在CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用，2006年7月首次发布2.0以来，KindEditor依靠出色的用户体验和领先的技术不断扩大编辑器市场占有率，目前在国内已经成为最受欢迎的...
KindEditor是一款功能强大的开源富文本编辑器，广泛应用于网页内容编辑和管理。它提供了一种简单易用的界面，使得用户可以轻松地进行文本格式化、插入图片、创建链接等操作，大大提升了网页内容创作的效率。在这个...
Kindeditor文本编辑器是一款在IT领域中广泛应用的开源富文本编辑器，它的设计目标是提供一个易用且功能丰富的Web内容创作环境。这个编辑器以其简单易上手、功能全面的特点，深受开发者和用户的喜爱。它能够很好地...
KindEditor是一款功能强大的在线HTML代码编辑器，专为网页开发者设计，用于在Web环境中实现文本内容的编辑与格式化。这个编辑器支持多种语言，包括HTML、CSS、JavaScript等，可以方便地集成到各种Web应用中，提供...
首先，`kindeditor-4.0中文帮助文档.chm` 是KindEditor的中文帮助文档，这个文档通常包含了编辑器的安装、配置、使用方法以及API参考等详细信息。CHM是Microsoft编写的帮助文件格式，全称为 Compiled HTML Help，它...
kindeditor文本编辑器(asp.net中使用) 源代码都在
【标题】"给siteweaver6.8更换Kindeditor4.1.10编辑器"涉及的主要知识点包括网站构建工具Siteweaver的升级与编辑器替换，以及Kindeditor的使用和功能特性。 Siteweaver是一款用于创建和管理网站的软件，它提供了基本...
KindEditor HTML在线编辑器是一款广泛应用于网页开发中的富文本编辑工具，它提供了丰富的文本格式化选项，使得非程序员也可以轻松地在网页上编辑内容。这款编辑器以其易用性、功能强大和高度可定制性而受到开发者的...
例如，当用户在编辑器中完成编辑后，开发者可以通过JavaScript调用KindEditor提供的方法，获取干净的HTML文本，然后通过Ajax或其他方式提交到服务器端。 总的来说，KindEditor是一款实用且灵活的富文本编辑器，对于...
KindEditor是一款功能强大的开源HTML编辑器，常用于网站内容管理系统的文本输入框，提供丰富的文本格式化选项，如字体、大小、颜色、对齐方式等，同时支持图片上传、视频插入等功能。它提供了多种预定义的编辑模式，...
KindEditor是一款功能强大的富文本编辑器，主要用于网页中的文本编辑任务。它是由JavaScript编写而成，因此具有良好的跨平台性和浏览器兼容性，支持IE、Firefox、Chrome、Safari、Opera等多种主流浏览器。这款编辑器...
而JMathEditor则是一个专门用于插入和编辑数学公式的插件，它可以与KindEditor结合使用，使得编辑器具有公式编辑功能。 集成KindEditor和JMathEditor的过程主要包括以下几个步骤： 1. **下载与引入资源**：首先，...
3. **JMEditor集成**：了解JMEditor的使用方法，包括如何加载编辑器、设置LaTeX语法支持，以及如何通过JavaScript调用其API插入和编辑公式。 4. **跨浏览器兼容性**：确保编辑器在不同的浏览器（如Chrome、Firefox...
本示例中，我们将讨论如何使用KindEditor这个流行的开源JavaScript富文本编辑器来创建一个Winform Html编辑器。 KindEditor是一款轻量级、可自定义的在线文本编辑器，通常用于网页应用。要将其集成到Winform应用中...
asp 版的KindEditor 3.5.1编辑器 外部编辑器 web编辑器 最新版的KindEditor 编辑器 适合asp jsp的编辑器 这是经过本人一个下午测试的 ，保证可以使用 在这拿出来 大家一起学习学习 QQ290273103
KindEditor非常适合在CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用，2006年7月首次发布2.0以来，KindEditor依靠出色的用户体验和领先的技术不断扩大编辑器市场占有率，目前在国内已经成为最受欢迎的...
在上面的代码中，`KindEditor.ready`函数会在KindEditor加载完成后执行，`K.create`方法创建编辑器实例，参数是textarea的ID和配置对象。配置对象中的`width`和`height`分别设置了编辑器的宽度和高度，`uploadJson`...