1. 程式人生 > >使用百度富文字編輯器UEditor碰到的問題

使用百度富文字編輯器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應該就配置好了,至少上傳圖片這一塊沒有問題了。