kindeditor 使用教程

较为著名的富文本编辑器，有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/";

	//文件保存目录URL
	String 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"/>

 后台正常接收即可！