历史版本7 :WangEditor富文本控件 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

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