使用百度富文本編輯器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文件裏面會有錯誤。

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

　　二、裏面write方法提示不能處理String類型的變量，這個我想是springmvc的緣由，由於我發現我使用springmvc的時候全部的內置對象都沒有使用struts2的時候不同了，這個還不知道爲何會這樣。

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

改爲了

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

 

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