百度智能小程序 富文本编辑器

Editor 富文本编辑器

介绍

Editor 富文本编辑器动态库提供了支持富文本编辑的 ​editor​组件和操作​editor​组件的​createEditorContext​方法，通过使用该动态库，用户可以对图片、文本进行编辑。编辑器导出内容支持带标签的html和纯文本的text，编辑器内部采用delta格式进行存储。

富文本编辑器组件中设置了一些基本样式使得内容可以正确展示，在开发过程中可以进行覆盖，在其他组件或者环境中使用富文本编辑器导出的​html​时，需要额外维护以下​DOM​结构：

<ql-container>
    <ql-editor></ql-editor>
</ql-container>

使用方法

1. 在项目中引用动态库

参考使用动态库中提供的方法，在 app.json 中增添一项 dynamicLib，与 pages 同级。

"dynamicLib": {
    "editorLib": {
        "provider": "swan-editor"
    }
},

2. 在使用到富文本编辑器组件的页面配置动态库

在每个使用到富文本编辑器组件的页面，配置 *.json 文件如：

{
    "usingSwanComponents": {
        "editor": "dynamicLib://editorLib/editor"
    }
}

3. 编写 *.swan 文件

<editor
    read-only="{{readOnly}}"
    placeholder="{{placeholder}}"
/>

这是一种最基本的使用方式，其中readOnly和placeholder的值可以在 *.js 文件中设置。

Editor 组件属性列表

Page({
    data: {
        readOnly: false,
        placeholder: '请输入...'
    }
});

编辑器内支持部分HTML标签和内联样式，但不支持 class和id。

支持的标签

不满足的标签会被忽略，div标签会被转换为 p标签存储。

支持的内联样式

内联样式仅支持设置在行内元素或块级元素上，不能同时设置，如 text-align 归类为块级样式，在  span 标签上设置是无效的。

EditorContext 实例

Editor 富文本编辑器动态库提供了 createEditorContext 的方法来获取某个  editor 组件的实例，EditorContext 通过  id 和 一个 editor 组件绑定，操作对应的  editor 组件。

使用方法

Page({
    onEditorReady() {
        this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editorId');
    }
});

EditorContext.blur(Objec object)

解释: 编辑器失焦

参数: Object object

EditorContext.clear(Objec object)

解释: 清空编辑器内容

参数: Object object

EditorContext.format(string name, string value)

解释: 修改格式

对已经应用样式的选区设置会取消样式。

参数

string name: 属性

string value: 值

支持设置的样式列表

EditorContext.getContents(Objec object)

解释: 获取编辑器内容

参数: Object object

object.success 回调函数

参数: Object res

EditorContext.getSelectionText(Objec object)

解释: 获取编辑器内选区的纯文本内容。当编辑器失焦或未选中一段区间时，返回内容为空

参数: Object object

object.success 回调函数

参数: Object res

EditorContext.insertDivider(Objec object)

解释: 插入分隔符

参数: Object object

EditorContext.insertImage(Objec object)

解释: 插入图片

参数: Object object

EditorContext.insertText(Objec object)

解释: 覆盖当前选区，设置一段文本

参数: Object object

EditorContext.removeFormat(Objec object)

解释: 清除当前选区的样式

参数: Object object

EditorContext.setContents(Objec object)

解释: 初始化编辑器内容，html和delta同时存在时仅delta生效

需要注意的是，通过setContents设置编辑器内容时，由于支持的html标签和内联样式有限，建议开发者在小程序内通过delta进行插入。

参数: Object object

EditorContext.scrollIntoView()

解释: 将编辑器光标处滚动到窗口可视区域内

EditorContext.redo(Objec object)

解释: 恢复

参数: Object object

EditorContext.undo(Objec object)

解释: 撤销

参数: Object object