@dfeidao/fd-w000013 v4.6.201907241033

富文本框

• Installation
• requires
• Tag
• Attributes - tools - placeholder - read-only
• Methods
• resize_imgs - set_value - get_value - get_text - enable - disable
• Example - html - js

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

Installation

yarn add --dev @dfeidao/fd-w000013

requires

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

Tag

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

Attributes

tools

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

• image 插入图片
• formula 插入数学公式
• code-block 插入代码块
• align 对齐方式
• header 标题
• bold 黑体
• italic 斜体
• underline 下划线
• list 编号
• script 上标下标
• indent 缩进
• size 字号
• color 字体颜色
• background 背景色
• font 字体
• clean 清除格式
• link 插入超链接
• video 插入视频

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');

Methods

resize_imgs

根据当前图片缩放情况对图片进行处理，图片像素值可能会发生变化。

通俗解释：压缩图片

set_value

参数:

html: string

返回值：

html: string

widget.set_value('<p>富文本内容</p>');

get_value

参数:

无

返回值：

string

const v = widget.get_value();
console.log(v);  // <p>富文本内容</p>

get_text

参数:

无

返回值：

string

const v = widget.get_text();
console.log(v);  // 富文本内容

enable

参数:

无

返回值：

无

disable

参数:

无

返回值：

无

Example

html

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

js

require(['fd-w000013']);