ofbiz——集成富文本编辑器ueditor

时间：2022-12-25 18:23:37

ofbiz自带的富文本编辑器感觉很简陋，所以想替换为百度的ueditor编辑器。


配置ueditor组件

集成到ofbiz后的ueditor组件（可以直接使用，不需要参考下面步骤配置了）。

下载链接: http://download.csdn.net/download/xiaozaq/10107531


1.官网下载编辑器。点击进入下载页面

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>

5.解决ueditor编辑器图片在线管理图片无法显示问题。可以参考 http://blog.csdn.net/gaoxiaogs/article/details/52621755

把  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 );
%>
6.解决后台返回路径无法访问到图片或者文件。

解决办法：所有的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", /* 图片访问路径前缀 */

然后上传图片时报错了：

ofbiz——集成富文本编辑器ueditor

所以配置成"imageMaxSize": 10485760 这样就好了，imageMaxSize不能使用表达式。

配置好了可以测试一下，看ueditor组件是否可以正常使用了。

访问：https://localhost:8443/ueditor/index.html

显示结果界面：

ofbiz——集成富文本编辑器ueditor

可以发现上传图片，和上传文件等功能都能正常使用了。


将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>

如上面代码所示，把elrte比编辑器给注释掉，改为ueditor编辑器。

替换后查看效果：进入 内容组件——》博客——》文章——》编辑

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

显示的界面：

ofbiz——集成富文本编辑器ueditor


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>






标签：

相关文章