kindEditor,html编辑器用法与体会，及如何获取文本域中的值

最新推荐文章于 2020-12-21 14:47:52 发布

「已注销」

最新推荐文章于 2020-12-21 14:47:52 发布

阅读量4.5k

点赞数

kindEditor,html编辑器用法与体会，及如何获取文本域中的值

标签：

支持中文的

分类： jsp

关键代码

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>

应注意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相关配置如下：
  
<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>

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
kindEditor,html编辑器用法与体会，及如何获取文本域中的值

kindEditor,html编辑器用法与体会，及如何获取文本域中的值标签： ajax it java 支持中文的分类： jsp关键代码var editor1=null;//这个是全局变量KindEditor.ready(function(K) {editor1 = K.cr
复制链接

扫一扫