WangEditor富文本控件插件

  • 文档创建者:枫城
  • 编辑次数:7次
  • 最近更新:Leo.Tsai 于 2020-05-25
  • 1. 概述

    1.1 版本

    报表服务器版本

    JAR 包版本

    插件版本

    10.02019-12-04V1.6
    9.02017-01-01
    V1.2

    1.2 应用场景

    插件实现了所有的编辑功能,能够插入图片,能够实现所见即所得的富文本编辑功能。

    图片插入是使用的 base64 的方式进行存储的,所以最好将数据库字段设置大文本的类型,否则可能导致出现提示成功,但是无法存储到数据库中。编辑器效果如下图所示:

    E45FF9CD-E098-4FBE-AF01-613D175CCD75.GIF

    1.3 功能介绍

    • 支持普通报表填报。

    • 支持决策报表展示。

    • 给报表 UI 提供了新的美化方案,给用户更多的选择。

    2. 插件介绍

    2.1 插件安装

    点击下载插件:WangEditor富文本控件

    设计器插件安装方法参照:设计器插件管理

    服务器安装插件方法参照:服务器插件管理

    2.2 操作步骤

    插件安装后,新建决策报表,在控件栏找到WangEditor富文本编辑器拖入至决策报表即可,如下图所示:

    image.png

    注:暂不支持普通报表。

    2.3 属性设置

    2.3.1 属性设置

    • 控件名:编写插件名字。

    • 输入规则:长度的限定。

    • 控件值:控件值的设定。

    • 水印:控件水印。

    • 标签名称:标签名称设置。

    • 控件大小:设置控件的高度和宽度。

    image.png

    2.3.2 事件设置

    可用 JS 设置,该插件的初始化后、编辑前、编辑后、编辑结束事件。

    image.png

    2.4 编辑器工具栏介绍

    该插件不支持在设计器内编辑,所有的富文本编辑功能都在 Web 端实现。如下图所示:

    1)设置标题:可设置文本为哪类标题大小。

    2)加粗:字体加粗。

    3)斜体:字体倾斜。

    4)下划线:字体加下划线。

    5)中线:字体加中线。

    6)文本颜色:文本颜色变更。

    7)文本背景颜色:文本背景颜色变更。

    8)链接:文本可加超链接,图片不支持超链接。

    9)序号:有序列表,无序列表可供选择。

    10)对齐方式:居左,居中,居右三种对齐方式供选择。

    11)段落:插入一个段落。

    12)图片:支持静态图和动态图的插入。

    13)表格:可插入表格,插入时先选择几行几列。

    14)窗体:直接插入对应网页窗体,窗体大小可JS设置。

    15)代码插入:支持代码的插入。

    16)回退:回退上一步操作。

    17 )前进:前进上一步操作。

    image.png

    3. 示例

    3.1 报表设计

    新建决策报表,向报表块内拖入WangEditor富文本编辑器,如下图所示:

    image.png

    3.2 效果预览

    点击表单预览,进入富文本设计界面。

    1)点击图片按钮,上传图片  5.png ,如下图所示:

    image.png

    2)点击插入表格,选择创建 1 行 4 列的表格,并在表格内填入相应文字,如下图所示:

    image.png

    3)在富文本框输入相应文字,如下图所示:

    给第一行文本加上“加粗”效果。

    给第二行文本加上“斜体和下划线”效果。

    给第三行文本加上“超链接”效果。

    给第四行文本加上“文字背景颜色”效果。

    给第五行文本加上“文字颜色”效果。

    image.png

    4)点击插入窗口,输入 JS 代码:格式如<iframe src= ></iframe>,示例中调整了窗口大小,插入了帆软帖子的链接,如下图所示:

    image.png

    示例JS<iframe src=https://bbs.fanruan.com/thread-126638-1-1.html  width="1280" height="360"  ></iframe>

    5)点击插入图片,插入动图  6.gif ,效果如下所示:

    9D2DE9C6-FBD5-4449-8487-838F21DAF210.GIF

    4. 图片填报入库失败

    4.1 问题描述

    CPT 报表设置 WangEditor 富文本控件填报图片,上传图片点击提交,显示成功入库,但是数据库表刷新后,显示是没有数据的。

    4.2 原因分析

    图片入库的方式是将图片转为 base64 编码后存入数据库表中,如果编码后大小超出了 Web 应用服务器的 maxPostSize ,那么就会导致图片入库失败。

    4.3 解决方案

    4.3.1 内置服务器

    如果用户使用的是本地设计器的内置 Tomcat 服务器,那么需要将设计器 JAR 包更新到 2020-06-08 版本。

    Windows 版设计器在%FR_HOME%\bin\路径下的designer.vmoptions文件中添加-Dtomcat-maxPostSize=-1,如下图所示:

    注:Mac 版设计器在vmoption.txt文件内。

    Snag_fd8d810.png

    4.3.2 远程服务器

    如果部署了远程服务器,需要设置 maxPostSize 使 post 内容大小不受限制,如下所示:

    1)Tomcat 服务器

    Tomcat 启动可以直接在 Connector 节点中加入 maxPostSize,maxPostSize 的默认大小为 2M。

    • Tomcat7.0.63 之前的版本,maxPostSize 设置为 0 或者负数,Connector 节点中加入maxPostSize="0"或者maxPostSize="-1"

    • Tomcat7.0.63 之后的版本,maxPostSize 需要设置为负数,Connector 节点中加入maxPostSize="-1"

    2)WebLogic 服务器

    域结构选择服务器,点击协议>HTTP,设置最大POST大小-1,如下图所示:

    1590377087716473.png

    3)WebSphere 服务器

    如下图修改 WebSphere 服务器的 maxPostSize。

    1590377355545738.png

    附件列表


    主题: 决策报表应用
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!