JForum论坛添加UEditor文本编辑器

在使用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("&lt;", "<").replace("&gt;", ">");
}

至此基本配置完成.