ofbiz自帶的富文字編輯器感覺很簡陋，所以想替換為百度的ueditor編輯器。

配置ueditor元件

整合到ofbiz後的ueditor元件（可以直接使用，不需要參考下面步驟配置了）。

2.我的ofbiz使用的預設編碼，應該是gbk，所以我下載了gbk版本。ueditor1_4_3_3-gbk-jsp.rar

3.建立ueditor元件。

4.配置ueditor元件的web.xml。主要關鍵配置allowedPaths值，時ueditor資源能正常訪問，別被過濾掉了。最終配置結果如下：

    <filter>
        <display-name>ControlFilter</display-name>
        <filter-name>ControlFilter</filter-name>
        <filter-class>org.apache.ofbiz.webapp.control.ControlFilter</filter-class>
        <init-param>
            <param-name>allowedPaths</param-name>
            <param-value>/error:/dialogs:/jsp:/lang:/index.html:/index.jsp:/themes:/third-party:/ueditor.all.min.js:/ueditor.config.js:/ueditor.parse.min.js:/ueditor</param-value>
        </init-param>
        <init-param>
            <param-name>redirectPath</param-name>
            <param-value>/index.html</param-value>
        </init-param>
    </filter>
 

把  jsp/controller.jsp 裡面的程式碼修改一下

<%@ page language="java" contentType="text/html; charset=UTF-8"
 
    import="com.baidu.ueditor.ActionEnter"
 
    pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<%
request.setCharacterEncoding( "utf-8" );
response.setHeader("Content-Type" , "text/html");
 
String rootPath = application.getRealPath( "/" );
 
String action = request.getParameter("action");
String result = new ActionEnter( request, rootPath ).exec();
if( action!=null && 
   (action.equals("listfile") || action.equals("listimage") ) ){
    rootPath = rootPath.replace("\\", "/");
    result = result.replaceAll(rootPath, "/");
}
out.write( result );
%>
 

解決辦法：所有的XXXUrlPrefix屬性配置字首/ueditor。

7.配置上傳圖片大小限制。

imageMaxSize引數必須配置一個整數，如果配置為一個表示式會報錯。

之前我改為如下配置：

/* 前後端通訊相關的配置,註釋只允許使用多行方式 */
{
    /* 上傳圖片配置項 */
    "imageActionName": "uploadimage", /* 執行上傳圖片的action名稱 */
    "imageFieldName": "upfile", /* 提交的圖片表單名稱 */
    "imageMaxSize": 10*1024*1024, /* 上傳大小限制，單位B 預設 2048000 B = 2MB  , 10485760 = 10*1024*1024 B = 10MB */
    "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上傳圖片格式顯示 */
    "imageCompressEnable": true, /* 是否壓縮圖片,預設是true */
    "imageCompressBorder": 1600, /* 圖片壓縮最長邊限制 */
    "imageInsertAlign": "none", /* 插入的圖片浮動方式 */
    "imageUrlPrefix": "/ueditor", /* 圖片訪問路徑字首 */
 

所以配置成"imageMaxSize": 10485760 這樣就好了，imageMaxSize不能使用表示式。

配置好了可以測試一下，看ueditor元件是否可以正常使用了。

訪問：https://localhost:8443/ueditor/index.html

顯示結果介面：

可以發現上傳圖片，和上傳檔案等功能都能正常使用了。

將ofbiz自帶的elrte編輯器替換為ueditor編輯器

這個需要修改下模板檔案：apache-ofbiz-16.11.02\framework\widget\templates\HtmlFormMacroLibrary.ftl

<#macro renderTextareaField name className alert cols rows maxlength id readonly value visualEditorEnable buttons tabindex language="">
  <textarea name="${name}"<#t/>
    <@renderClass className alert />
    <#if cols?has_content> cols="${cols}"</#if><#rt/>
    <#if rows?has_content> rows="${rows}"</#if><#rt/>
    <#if id?has_content> id="${id}"</#if><#rt/>
    <#if readonly?has_content && readonly=='readonly'> readonly="readonly"</#if><#rt/>
    <#if maxlength?has_content> maxlength="${maxlength}"</#if><#rt/>
    <#if tabindex?has_content> tabindex="${tabindex}"</#if><#rt/>
    ><#t/>
    <#if value?has_content>${value}</#if><#t/>
  </textarea><#lt/>
  <#if visualEditorEnable?has_content>
	<script type="text/javascript" charset="gbk" src="/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="gbk" src="/ueditor/ueditor.all.min.js"> </script>
    <!--建議手動加在語言，避免在ie下有時因為載入語言失敗導致編輯器載入失敗-->
    <!--這裡載入的語言檔案會覆蓋你在配置專案裡新增的語言型別，比如你在配置專案裡配置的是英文，這裡載入的中文，那最後就是中文-->
    <script type="text/javascript" charset="gbk" src="/ueditor/lang/zh-cn/zh-cn.js"></script>
  <script type="text/javascript">
	var ueWidth = $("#${id}").width()
	var ueHeight = $("#${id}").height()
    //例項化編輯器
    //建議使用工廠方法getEditor建立和引用編輯器例項，如果在某個閉包下引用該編輯器，直接呼叫UE.getEditor('editor')就能拿到相關的例項
    var ue = UE.getEditor('${id?default("")}',{
        initialFrameWidth : ueWidth,
        initialFrameHeight: ueHeight
    });
  </script>
  <!--
    <script language="javascript" src="/images/jquery/plugins/elrte-1.3/js/elrte.min.js" type="text/javascript"></script><#rt/>
    <#if language?has_content && language != "en">
      <script language="javascript" src="/images/jquery/plugins/elrte-1.3/js/i18n/elrte.${language!"en"}.js" type="text/javascript"></script><#rt/>
    </#if>
    <link href="/images/jquery/plugins/elrte-1.3/css/elrte.min.css" rel="stylesheet" type="text/css">
    <script language="javascript" type="text/javascript">
      var opts = {
         cssClass : 'el-rte',
         lang     : '${language!"en"}',
         toolbar  : '${buttons?default("maxi")}',
         doctype  : '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', //'<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">',
         cssfiles : ['/images/jquery/plugins/elrte-1.3/css/elrte-inner.css']
      }
      jQuery('#${id?default("")}').elrte(opts);
    </script>
	-->
  </#if>
</#macro>

替換後檢視效果：進入 內容元件——》部落格——》文章——》編輯

最終的url：https://localhost:8443/content/control/EditBlogArticle?articleContentId=BLG10000&blogContentId=BLOGROOTBIGAL

顯示的介面：

OK，大功告成，elrte編輯器成功替換為ueditor編輯器。使用起來也很簡單，只要在textarea標籤設定屬性visual-editor-enable="true"就好了。

<field name="content" title="${uiLabelMap.SystemContent}" widget-style="inputBox" ><textarea cols="50" rows="20" visual-editor-enable="true"/></field>