當前為10.0版本文檔,更多實例內容將在最新幫助文檔中展現,點選跳轉至 最新版幫助文檔

WangEditor富文本控件插件

1. 概述

1.1 版本

報表服務器版本

JAR 包版本

插件版本

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

1.2 應用場景

插件實現了所有的編輯功能,能夠插入圖片,能夠實現所見即所得的富文本編輯功能。


圖片插入是使用的 base64 的方式進行存儲的(2.0以下版本) 從2.0版本開始使用FR的Asseset進行存儲減少數據庫存儲成本,所以最好将數據庫字段設置大文本的類型,否則可能導緻出現提示成功,但是無法存儲到數據庫中。編輯器效果如下圖所示:

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

1.3 功能介紹

  • 支持普通報表填報。

  • 給報表 UI 提供了新的美化方案,給用戶更多的選擇。

2. 插件介紹

2.1 插件安裝

點擊下載插件:WangEditor富文本控件

設計器插件安裝方法參照:設計器插件管理

服務器安裝插件方法參照:服務器插件管理

2.2 操作步驟

插件安裝後,新報表,在右側控件設置中找到WangEditor富文本編輯器選擇即可,如下圖所示:

image.png

注:從2.0版本開始不再支持決策報表和參數查詢界面使用。

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 效果預覽

點擊PC端預覽,進入富文本設計界面。

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

更新日志

2.0正式版更新日志:

  1. 更新了上傳圖片功能,圖片上傳到FR的的web-info下的assests\temp_attach\holder持久存儲,請确保服務器上的文件對應路徑有足夠的存儲空間,後續遷移服務器也需要遷移這一塊内容。

  2. 在老版本的插件中是将圖片轉成base64然後入庫到數據庫中,所以需要數據庫這個字段足夠的大。在新版本中不再使用base64進行存儲,而是直接存儲的FR服務器的一個地址。(減少數據庫壓力)

  3. 注意:由於本插件涉及到上傳所以請将使用了本控件的模板設置認證後才能訪問

  4. 本控件上傳圖片支持PNG,JPG,BMP,GIF這幾種格式,如還需要其他格式支持請留言。

需要注意:

本次更新後本控件只支持CPT填報使用,不再支持FRM,參數查詢使用。


備注:

在開啓自适應的模板中使用本控件當屏幕分辨率較高時可能導緻編輯器中的有序列表顯示爲無序列表樣式。

通過本插件插入的表格,在導出之後沒有表格線,編輯時的表格線只是輔助觀看。具體原因是FR目前不支持導出富文本中的表格線。


附件列表


主題: 原簡體文檔
  • 有幫助
  • 沒幫助
  • 只是瀏覽

文 檔回 饋

滑鼠選中內容,快速回饋問題

滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。

不再提示

9s後關閉

反饋已提交

網絡繁忙