在使用JForum论坛中发现论坛自带的文本编辑器不好用,不能上传图片,样式编辑也很麻烦,就想着把这个文本编辑器替换掉,我这里选用的是百度的开源富文本编辑器UEditor
替换后的效果图
替换方法如下
1. 在百度网站上下载UEditor http://ueditor.baidu.com/website/download.html ,可以下载使用完成版,也可以下载定制的精简版UBuilder,用法都一样
2. 解压下载的UEditor并添加到JForum项目中
3. 修改发帖页面 post_form.htm(以下路径需要根据实际情况调整)
导入js文件
<script type="text/javascript" charset="utf-8" src="${contextPath}/templates/${templateName}/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="${contextPath}/templates/${templateName}/ueditor/ueditor.all.js"> </script>
配置UEditor根路径(也可以在ueditor.config.js中配置)
var UEDITOR_HOME_URL = "${contextPath}/templates/${templateName}/ueditor/";
在页面中添加编辑器,替换原有的编辑器,注意这里的编辑器name必须为message(论坛原来编辑器的name值)
<!-- 格式标签,文本输入框 -->
<td class="row2" valign="top">
<script type="text/plain" id="message" name="message" style="width:100%;height:150px;">
</script>
<script type="text/javascript">
UE.getEditor("message");
</script>
</td>
4. 配置图片上传
导入jar包,将下载的UEditor的/jsp/lib下的所有jar包拷贝到WEB_INFO下的lib目录,然后导入到项目中,
注意: a. 不能直接在ueditor的目录下导入,必须要拷贝到WEB_INFO下的lib后再导入
b. 导入后的包可能存在冲突,删除低版本的就可以了
5. 配置图片上传路径
打开ueditor/jsp下的config.json,修改如下
"imageUrlPrefix": "http://localhost:8080/JKForum/", /* 图片访问路径前缀 */
"imagePathFormat": "ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
我这里设置的图片访问路径前缀为项目根目录,否则上传的图片不会显示在编辑器中;这里的路径配置都是相对路径,目前我还没找到配置绝对路径的方法
6. 修改帖子的显示样式,以上修改之后发现发的帖子的样式都是将标签全部显示出来,并没有将样式解析出来
我这里修改了java代码,在net.jforum.entities.Post.java中
public void setText(String text) {
this.text = text.replace("<", "<").replace(">", ">");
}
至此基本配置完成.
