所见即所得网页编辑器

来源：互联网发布：淘宝怎么用店铺优惠券编辑：程序博客网时间：2024/05/16 00:40

现在很多网站后台及前台留言板类似的都需要嵌入一些所见即所得编辑器，现在比较流行的编辑器是fckeditor，这款编辑器不太兼容JSP，虽然现在有人解决了这个问题，但是操作起来还是有点麻烦的。这两天都在纠结这一个问题，就是fckeditor编辑器上传图片的时候总是会报错，所以选择了另一款对JSP兼容相当好的编辑器kindeditor，这款编辑器像这个名字一样———和蔼的编辑器，闲话不多说，现在说一说如何配置和使用：

第一步：去官网上面下载你所需要的版本，写这篇文章时的最新版本是3.55，也就是今年五月份才推出的，下载地址为：

http://www.kindsoft.net/down.php

第二步，解压你所下载的压缩包

这里要说一下，不要直接解压，最好是先创建一个文件夹，然后解压到这个文件夹内，因为压缩包里面的文件很多

所见即所得网页编辑器

解压之后将文件夹拷贝到你项目工程目录下，因为你使用的JSP，所以只要保留jsp、plugins、skins、kindeditor.js、kindeditor-min.js文件及文件夹即可。

第三步：将jsp/lib下的三个jar文件拷贝到你工程的WEB-INF/lib文件夹下，需要的三个jar文件为commons-fileupload-1.2.1.jar、commons-io-1.4.jar、json_simple-1.1.jar，这些都是必用的jar文件

第四步：修改文件

打开plugins/file_manager文件夹下的file_manager.js文件，将第一行代码修改掉：

修改前：

var JSON_URL ='../../pshp/file_manager_json.php';

修改后：

var JSON_URL ='../../jsp/file_manager_json.jsp';

然后打开plugins/image文件夹下的image.html文件，修改第113行的代码：

修改前：
var imageUploadJson = (typeof KE.g[id].imageUploadJson =='undefined') ? '../../php/upload_json.php':KE.g[id].imageUploadJson;

修改后：
var imageUploadJson = (typeof KE.g[id].imageUploadJson =='undefined') ? '../../jsp/upload_json.jsp':KE.g[id].imageUploadJson;

第五步：编辑jsp文件

<html>
<head>
<meta charset="utf-8" />
<title>KindEditorJSP</title>
<scripttype="text/javascript" charset="utf-8"src="../kindeditor.js"></script>//这个js文件必须引入，是kindeditor的灵魂文件，此处在引入的时候要注意路径是否正确
<script type="text/javascript">
KE.show({
id : 'content1',//要和<textarea>标签的id一致
allowFileManager : true,
afterCreate : function(id) {
KE.event.ctrl(document, 13, function() {
KE.util.setData(id);
document.forms['example'].submit();
});
KE.event.ctrl(KE.g[id].iframeDoc, 13, function() {
KE.util.setData(id);
document.forms['example'].submit();
});
}
});
</script>
</head>
<body>
<form name="example" method="post"action="demo.jsp">
<textarea id="content1" name="content1" cols="100"rows="8"style="width:700px;height:200px;visibility:hidden;"></textarea>
<br />
<input type="submit" name="button" value="提交内容"/>
</form>
</body>
</html>

很多人会问如何在后台获取到kindeditor所编辑的内容，这里在后台直接后去<textarea>中的值即可，怎么获取我想大家都懂的。

当struts和kindeditor集成的时候要将web.xml文件中struts的<url-parttern>修改一下：

修改前：

<url-pattern>/*</url-pattern>

修改后：

<url-pattern>*.action</url-pattern>

好啦，就说到这了，希望可以帮助大家