kindEditor,html编辑器用法与体会…
2013-10-30 11:53
344 查看
关键代码
var editor1=null;//这个是全局变量
KindEditor.ready(function(K) {
editor1 = K.create('textarea[name="content1"]', {
cssPath : '../plugins/code/prettify.css',
uploadJson : 'upload_json.jsp',//uploadJson :
'../jsp/upload_json.jsp',
fileManagerJson : 'file_manager_json.jsp',//fileManagerJson :
'../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();
});
}
});
prettyPrint();
});
<form id="example"
name="example" method="post"
action="doxx.jsp">
<input style="width:700px;"
type="text" name="txttitle" id="txttitle"
/>
<textarea id="content1" name="content1"
><%=cont%></textarea>
</form>
应注意form和textarea的id和name与上面的js函数一致
js提交表单数据
function submit{
editor1.sync();//同步数据到服务器(图片,视频,音频什么的)//如果没有这一步对不起,你获取不到数据
document.getElementByIdx_x("example").submit();
}
原文地址:http://ihyperwin.iteye.com/blog/1566478
官方用法介绍:
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.getElementByIdx_x_x('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>
var editor1=null;//这个是全局变量
KindEditor.ready(function(K) {
editor1 = K.create('textarea[name="content1"]', {
cssPath : '../plugins/code/prettify.css',
uploadJson : 'upload_json.jsp',//uploadJson :
'../jsp/upload_json.jsp',
fileManagerJson : 'file_manager_json.jsp',//fileManagerJson :
'../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();
});
}
});
prettyPrint();
});
<form id="example"
name="example" method="post"
action="doxx.jsp">
<input style="width:700px;"
type="text" name="txttitle" id="txttitle"
/>
<textarea id="content1" name="content1"
><%=cont%></textarea>
</form>
应注意form和textarea的id和name与上面的js函数一致
js提交表单数据
function submit{
editor1.sync();//同步数据到服务器(图片,视频,音频什么的)//如果没有这一步对不起,你获取不到数据
document.getElementByIdx_x("example").submit();
}
原文地址:http://ihyperwin.iteye.com/blog/1566478
官方用法介绍:
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.getElementByIdx_x_x('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>
相关文章推荐
- html 特殊字符(转)
- HTML 标签大全(转)
- C# 正则表达式过滤危险HTML
- 用htmlcxx解析从libcurl中获取到的web网页源码
- html页面常用代码
- 使用htmlcxx-0.85解析html(本地字段)
- html 难点
- HTML <thead> 标签
- 图片热点的使用,html <area> 的用法
- 为什么要使用html的meta标签?
- htmlayout做的虎鲸宝宝
- 抓取HTML网页数据
- 点评系统modoer2.9伪静态html修改
- htmlayout做的虎鲸宝宝
- 解决html换行出现空格问题
- input与select在不同浏览器上的宽度显示不同
- HTML中INPUT type="date"标签如何赋值注意问题
- HTML中INPUT type="date"标签如何赋值注意问题
- html area图片热点的使用介绍附相关属性一览表
- 一些特殊意义的HTML色彩代码