kindEditor,html编辑器用法与感受
日期：2014-05-17 浏览次数：20676 次
kindEditor,html编辑器用法与体会
官方用法介绍：
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">
KindEditor.ready(function(K) {
var 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['example'].submit();
});
K.ctrl(self.edit.doc, 13, function() {
self.sync();
document.forms['example'].submit();
});
}
});
});
</script>
</head>
<body>
<table align="center">
<tr>
<td>文字编辑区</td>
</tr>
<tr>
<td>
<textarea name="content1" cols="100" rows="8" style="width:700px; height:200px;visibility:hidden;">此处输入文字并编辑</textarea>
</td>
</tr>
</table>
</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>
官方用法介绍：
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">
KindEditor.ready(function(K) {
var 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['example'].submit();
});
K.ctrl(self.edit.doc, 13, function() {
self.sync();
document.forms['example'].submit();
});
}
});
});
</script>
</head>
<body>
<table align="center">
<tr>
<td>文字编辑区</td>
</tr>
<tr>
<td>
<textarea name="content1" cols="100" rows="8" style="width:700px; height:200px;visibility:hidden;">此处输入文字并编辑</textarea>
</td>
</tr>
</table>
</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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
