kindeditor 使用教程

来源：互联网发布：unity3d demo合集编辑：程序博客网时间：2024/04/27 20:32

较为著名的富文本编辑器，有ckeditor，kindeditor等，我是比较中意kindeditor的操作起来比较方便；

使用步骤：

1.网上下载KindEditor源文件：官网下载http://www.kindsoft.net/

2.将下载好的kindeditor解压（我使用的是kindeditor-4.1.10），去除无用的包：我的项目使用jsp,所以：去除asp,asp.net,examples,php,kindeditor-all.js ,kindeditor-all-min.js文件删除；将jsp/lib下的三个包copy到项目下的WEB-INF/lib中;

3.接下来将kindeditor导入项目中，在WEBROOT下新建一个目录kindeditor4.1.10，将处理好的kindeditor拷贝到该目录下；

4.测试，新建一个test.jsp:

首先，引入kindeditor.js和lang/zh_CN.js

<span style="white-space:pre"></span><script charset="utf-8" src="${ctx }/jsp/resource/js/kindeditor-4.1.10/kindeditor.js"></script><span style="white-space:pre"></span><script charset="utf-8" src="${ctx }/jsp/resource/js/kindeditor-4.1.10/lang/zh_CN.js"></script>

书写javascript：

<span style="white-space:pre"></span><script type="text/javascript">   var editor;   var options = {          　　cssPath : '${ctx}/jsp/resource/js/kindeditor-4.1.10/plugins/code/prettify.css',         　　//filterMode : true,         uploadJson:'${ctx}/jsp/resource/js/kindeditor-4.1.10/jsp/upload_json.jsp',//上传图片时，需要使用         fileManagerJson:'${ctx}/jsp/resource/js/kindeditor-4.1.10/jsp/file_manager-json.jsp',    allowFileManager:true　　    　   };         　　KindEditor.ready(function(K) {                 　　editor = K.create('#editor_id',options);         　　});</script>

接下来，在body中：

<span style="white-space:pre"></span><textarea id="editor_id" name="content" style="width:700px;height:300px;"></textarea>

上传图片：
如果要实现上传图片功能，需要修改jsp/upload_json.jsp中，上传路径，为你需要的路径；默认路径为项目根目录下的attached中，但是一般此文件夹不存在，会抛错！
（我将上传的文件，放在了根目录下jsp/resource/kindeditorimage 文件夹下！）

<span style="white-space:pre"></span>//文件保存目录路径String savePath = pageContext.getServletContext().getRealPath("/") + "/jsp/resource/kindeditorimage/";//文件保存目录URLString saveUrl  = request.getContextPath() + "/jsp/resource/kindeditorimage/";

5.完成以上步骤，后台就可以按着平常的获取参数的方法获取textarea的内容，该字段对应的mysql中的字段最好设置成text文本字段。

注意点：在数据传到后台前，需要使用editor.sync()同步下数据；

实例：

<span style="white-space:pre"></span>var editor;   var options = {   width:'800',   height:'550',          　　cssPath : '${ctx}/jsp/resource/js/kindeditor-4.1.10/plugins/code/prettify.css',         　　//filterMode : true,         uploadJson:'${ctx}/jsp/resource/js/kindeditor-4.1.10/jsp/upload_json.jsp',         fileManagerJson:'${ctx}/jsp/resource/js/kindeditor-4.1.10/jsp/file_manager-json.jsp',    allowFileManager:true　　    　   };         　　KindEditor.ready(function(K) {                 　　editor = K.create('#editor_id',options);         　　});   function kindSave(){   $(".content").val(editor.html());//将富文本域中的内容赋值给textarea，或者使用editor.sync()同步一下数据   $.ajax({   url:'${ctx}/testRePic.do',   data:$("#form1").serialize(),   dataType:'json',   type:'POST',   success:function(data){$("#addhtml1").html(data.name);   }   });   }<textarea name="content" id="content"/>

后台正常接收即可！

0 0