最近在做一个项目，是基于jeecms的二次开发，使用的时候发现虽然已经更新到V6版本了，但是编辑器还是使用的 是fckeditor编辑器，觉得这个易用性不好，想更换为百度UEditor,记录一下过程。

其实在V6版中已经集成了UEditor包，但是系统中没有使用，想替换就得自己动手修改代码。 首先在WEB_INF\ftl\jeecms\ui\文件夹下找到editor.ftl文件，修改这个文件就可以更换编辑器。原文件如下：

   <textarea id="${name}" name="${name}">${value}</textarea>  
   <script type="text/javascript">
   $(function() {
     CKEDITOR.replace( '${name}' ,
        {
            filebrowserUploadUrl : '${base+appBase}/fck/upload.do?Type=File',  
            filebrowserImageUploadUrl : '${base+appBase}/fck/upload.do?Type=Image',  
            filebrowserFlashUploadUrl : '${base+appBase}/fck/upload.do?Type=Flash'  
         }
      );  
    });
   </script>

将这段代码替换成UEitor的代码就可以了，如下所示：

 <script type="text/javascript" src="${base}/thirdparty/ueditor/ueditor.config.js"></script>
 <script type="text/javascript" src="${base}/thirdparty/ueditor/ueditor.all.js"></script>

 <script id="${name}" name="${name}" type="text/plain">${value}</script>
 <script type="text/javascript">
    var ue = UE.getEditor('${name}',{
    imageUrl:'${base+appBase}/ueditor/upload.do?Type=Image',
    fileUrl:'${base+appBase}/ueditor/upload.do?Type=File',
    catcherUrl:'${base+appBase}/ueditor/getRemoteImage.do?Type=Image',
    imageManagerUrl:'${base+appBase}/ueditor/imageManager.do?picNum=50&allSite=false',
    snapscreenServerUrl:'${base}/snapscreen.svl',
    wordImageUrl:"${base+appBase}/ueditor/upload.do?Type=File",
    getMovieUrl:"${base+appBase}/ueditor/getmovie.do"
    });    
 </script>

保存后就可以了，但是这个只是更换后后台管理的使用的编辑器，会员登陆发表稿件的时候使用的还是旧编辑器。 首先找到位于WEB-INF\t\cms\www\default\member文件夹下的contribute_add.html和contribute_add.html文件。 在头部的引入js代码中找到引入ckeditor一句，

<script src="${base}/thirdparty/ckeditor/ckeditor.js" type="text/javascript"></script>

删除或者注释掉：然后加上引入UEdior代码：

  <script src="${base}/thirdparty/ueditor/ueditor.config.js" type="text/javascript"></script>
  <script src="${base}/thirdparty/ueditor/ueditor.all.min.js" type="text/javascript"></script>
  <script src="${base}/thirdparty/ueditor/lang/zh-cn/zh-cn.js" type="text/javascript"></script> 

接着找到内容相关代码：

         <tr>
             <td height="25" align="right" bgcolor="#f6fbff">内容：</td>
             <td bgcolor="#FFFFFF">
            <textarea id="txt" name="txt"></textarea> 
             <script type="text/javascript">
                    $(function() {
                        CKEDITOR.replace( 'txt' ,
                                {
                                    filebrowserUploadUrl : '${base}/fck/upload.jspx',  
                                    filebrowserImageUploadUrl : '${base}/fck/upload.jspx?Type=Image',  
                                    filebrowserFlashUploadUrl : '${base}/fck/upload.jspx?Type=Flash',
                                    filebrowserMediaUploadURL : '${base}/fck/upload.jspx?Type=Media'
                                 }
                        );  
                     });
            </script>
             </td>
           </tr> 

将这段代码修改为如下代码：

            <tr>
            <td height="25" align="right" bgcolor="#f6fbff">内容：</td>
            <td bgcolor="#FFFFFF"><script id="txt" name="txt" type="text/plain"></script> 
                <script type="text/javascript">
                   var editor= UE.getEditor('txt',{
                        elementPathEnabled:false,
                        initialFrameWidth: '100%',
                        imageUrl:"${base}/ueditor/upload.jspx?Type=Image&mark="+${site.mark?string('true','false')},
                        fileUrl:"${base}/ueditor/upload.jspx?Type=File",
                        catcherUrl:"${base}/ueditor/getRemoteImage.jspx?Type=Image",
                        imageManagerUrl:"${base}/ueditor/imageManager.jspx?picNum=50&insite=false",
                        snapscreenServerUrl:"${base}/snapscreen.svl",
                        wordImageUrl:"${base}/ueditor/upload.jspx?Type=File" ,
                        getMovieUrl:"${base}/ueditor/getmovie.jspx",
                        videoUrl:"${base}/ueditor/upload.jspx;jsessionid="+$.cookie("JSESSIONID")+"?Type=Media"
                   });
                   //截图快捷键ctrl+shift+A
                   editor.addshortcutkey({
                        "snapscreen" : "ctrl+shift+65"
                    });
                </script>
            </td>
            </tr>

做完这一步，会员投稿使用的编辑器也是UEditor了。

最后在使用UEditor的时候发现元素路径这个很烦人，可以使用如下配置去掉元素路径：

elementPathEnabled:false,

另外为了使编辑器能够自适应宽度，需要配置如下参数：

initialFrameWidth: '100%'

保存后刷新浏览器看看，元素路径已经去掉，编辑器也能自适应宽度了，大功告成。