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

目录:

1. 概述编辑

1.1 版本

报表服务器版本

JAR 包版本

插件版本

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

1.2 应用场景

这个插件是一个对wangEditor富文本插件的封装。实现了所有的编辑功能,能够插入图片,能够实现所见即所得的富文本编辑功能。图片插入是使用的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 报表设计

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

image.png

2)属性设置及事件设置,均为默认

3)预览,进入富文本设计界面

a.点击“图片”按钮,上传图片5.png,如下图所示:

image.png

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

image.png

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

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

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

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

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

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

image.png

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

如下图所示:

image.png

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

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

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

3.2 效果预览

保存报表,点击表单预览,思维导图展示示例如下所示:

4. 注意事项编辑

由于富文本效果在WEB端创建,暂无模板,建议后期插件开发者可开发对应导出功能。