@dfeidao/fd-wh000017 v4.6.201910101750

富文本框

• Installation
• requires
• Tag
• Attributes - tools - placeholder - read-only
• img-max-width img-max-height
• img-max-size
• Methods - get_uploaded_value - set_value - get_value - get_text - enable - disable
• Example - html - js

https://dfeidao.gitee.io/widgets/

Installation

yarn add --dev @dfeidao/fd-wh000017

requires

同时适用于h5端 本地开发时需要在gulpfile中创建html那一块加入<script src="https://cdn.jsdelivr.net/npm/katex"></script>

Tag

<fd-w000013 tools="image, code-block, formula"></fd-w000013>

Attributes

tools

指定需要的可选工具，多个工具使用逗号隔开。可选项为:

• image 插入图片,在app中嵌入时需要相机和文件存储权限
• formula 插入数学公式
• code-block 插入代码块
• align 对齐方式
• header 标题
• bold 黑体
• italic 斜体
• underline 下划线
• list 编号
• script 上标下标
• indent 缩进
• size 字号
• color 字体颜色
• background 背景色
• font 字体
• clean 清除格式
• link 插入超链接
• video 插入视频,在app中嵌入时需要相机和文件存储权限

placeholder

当富文本内容为空时,展示的文字

read-only

是否只读

<!-- 添加了read-only属性, 该富文本框不可以被编辑  -->
<fd-w000013  id="editor" read-only style="height: 500px;">
</fd-w000013>

控件可以动态通过修改read-only属性控制控件的只读状态

// 只读
widget.setAttribute('read-only', 'true');
widget.setAttribute('read-only', '');
widget.setAttribute('read-only', '1');
// 取消只读
widget.removeAttribute('read-only');
widget.setAttribute('read-only', 'false');

img-max-width img-max-height

设置可以上传图片的最大宽度和最大高度，超过尺寸的图片将自动缩放至设定的最大宽度和最大高度。

img-max-size

设置可以上传图片的最大保存大小，如果有超过设定最大尺寸的图片的话，在调用get_value和get_uploaded_value时将会抛出异常，异常信息为Image size is too large.，单位为字节，支持设置 kb,mb,gb，如

<fd-wh000017 id="editor" style="height: 500px;" img-max-size=257kB
	tools="header,align,bold,italic,underline,list,script,indent,size,color,background,font,image, code-block, formula,blockquote, clean, link, video">
</fd-wh000017>

Methods

get_uploaded_value

获取当前文本框中的内容。 在获取之前，先将图片文件压缩至缩放尺寸，然后上传至文件服务器。

set_value

设置富文本框中的内容

get_value

获取富文本框中的内容

get_text

获取富文本框中的文本

enable

启用富文本框，如果富文本框原本为不可编辑状态，启用后富文本框变为可编辑状态

disable

禁用富文本框，禁用后用户将无法对内容进行编辑。注意该方法建议只在需要动态切换富文本模式状态时结合enable使用，如果只是用来展示内容，建议使用read-only属性进行设置。

Example

html

<fd-w000013 id="editor" tools="image, code-block, formula" style="height: 500px;">
</fd-w000013>

js

require(['fd-w000013']);