使用百度富文本編輯器UEditor碰到的問題

前面使用的是kindEditor，但是發現這個已經不再維護，並且bug不少，而我又不會改，哈哈，所以我就放棄了。

原來想過要用百度的這個UEditor,但是在配置的時候遇到了很多問題，基本上加載不出來，但是最后還是硬着頭皮把那些bug都解決了，順利跑通。

 

問題1：按百度Demo的配置我發現連最基本的編輯器都不出來。

原因：下面的配置的順序不能錯，順序錯了可能會導致加載不出來的情況。

<!-- 配置文件 -->
<script type="text/javascript" src="/common/ueditor/ueditor.config.js"></script>
<!-- 編輯器源碼文件 -->
<script type="text/javascript" src="/common/ueditor/ueditor.all.js"></script>

下面是我的配置

<!-- 實例化編輯器 -->
<script type="text/javascript">
    UEDITOR_CONFIG.UEDITOR_HOME_URL = '/common/ueditor/'; //一定要用這句話，否則你需要去ueditor.config.js修改路徑的配置信息
    var ue = UE.getEditor('container',{
        toolbars: [
            ['fullscreen', 'source', 'undo', 'redo', '|', 'fontsize', '|', 'blockquote', 'horizontal', '|', 'removeformat', 'formatmatch', 'link', 'unlink', '}', 'simpleupload', 'insertimage', 'preview'],
            ['bold', 'italic', 'underline', 'forecolor', 'backcolor', '|', 'indent', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|',
                'rowspacingtop', 'rowspacingbottom', 'lineheight', '|', 'insertorderedlist', 'insertunorderedlist', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter']
        ]
        ,autoHeightEnabled: false
        ,autoFloatEnabled: true
        ,initialFrameWidth : 1000//編輯器寬度，默認1000
        ,initialFrameHeight : 500//編輯器高度，默認320
        ,maximumWords : 1000//最大字符數
    });
</script>

 

問題2：上傳圖片功能加載失敗

　　我使用的是springmvc idea

總的原因：編輯器初始化的時候會發送一個請求，去請求ueditor/jsp/controller.jsp文件，但是它報了500錯誤，不能正確的返回json配置。

原因1：jar包沒有導入到項目中。

解決：在ueditor/jsp/lib下面有幾個jar文件，需要把這幾個jar文件導入到項目中，最好是直接復制到WEB-INF/lib下面，不然可能也會出現問題。　

問題又來了，我使用的是maven管理項目的，這個ueditor-1.1.2.jar在中央倉庫里面沒有，需要自己手動添加到本地倉庫中

ueditor/jsp/lib目錄下打開命令窗口，運行下面代碼

mvn install:install-file -Dfile=ueditor-1.1.2.jar -Dpackaging=jar -DgroupId=com.baidu.ueditor -DartifactId=ueditor -Dversion=1.1.2

 

原因2：ueditor/jsp/controller.jsp文件里面會有錯誤。

解決：1、里面 <%@ page trimDirectiveWhitespaces="true" %> 這句報錯，我直接注釋了，百度了一下，這個應該是用來jsp輸出html時去除多余的空行的。注釋影響不大。

　　2、里面write方法提示不能處理String類型的變量，這個我想是springmvc的原因，因為我發現我使用springmvc的時候所有的內置對象都沒有使用struts2的時候不一樣了，這個還不知道為什么會這樣。

out.write( new ActionEnter( request, rootPath ).exec() );

改成了

response.getWriter().write( new ActionEnter( request, rootPath ).exec() );

 

這些都配置好，這個UEditor應該就配置好了，至少上傳圖片這一塊沒有問題了。