uniapp - editor 富文本的使用

目录

editor 组件

属性说明

editorContext

uni.createSelectorQuery()

SelectorQuery

selectorQuery.in(component)

selectorQuery.select(selector)

selectorQuery.selectAll(selector)

selectorQuery.selectViewport()

selectorQuery.exec(callback)

NodesRef

nodesRef.fields(object,callback)

editorContext.format(name, value)

editorContext.insertDivider(OBJECT)

editorContext.insertImage(OBJECT)

editorContext.getContents(OBJECT)

 完整例子

---

editor 组件

富文本编辑器，可以对图片、文字格式进行编辑和混排。

在web开发时，可以使用contenteditable来实现内容编辑。但这是一个dom API，在非H5平台无法使用。于是微信小程序和uni-app的App-vue提供了editor组件来实现这个功能，并且在uni-app的H5平台也提供了兼容。从技术本质来讲，这个组件仍然运行在视图层webview中，利用的也是浏览器的contenteditable功能。

编辑器导出内容支持带标签的 html和纯文本的 text，编辑器内部采用 delta 格式进行存储。

通过setContents接口设置内容时，解析插入的 html 可能会由于一些非法标签导致解析错误，建议开发者在应用内使用时通过 delta 进行插入。

富文本组件内部引入了一些基本的样式使得内容可以正确的展示，开发时可以进行覆盖。需要注意的是，在其它组件或环境中使用富文本组件导出的html时，需要额外引入这段样式，并维护<ql-container><ql-editor></ql-editor></ql-container>的结构，参考：使用 editor 组件导出的 html。

图片控件仅初始化时设置有效。

相关 api：editorContext

属性说明

属性	类型	默认值	必填	说明
read-only	boolean	false	否	设置编辑器为只读
placeholder	string		否	提示信息
show-img-size	boolean	false	否	点击图片时显示图片大小控件
show-img-toolbar	boolean	false	否	点击图片时显示工具栏控件
show-img-resize	boolean	false	否	点击图片时显示修改尺寸控件
@ready	eventhandle		否	编辑器初始化完成时触发
@focus	eventhandle		否	编辑器聚焦时触发，event.detail = {html, text, delta}
@blur	eventhandle		否	编辑器失去焦点时触发，detail = {html, text, delta}
@input	eventhandle		否	编辑器内容改变时触发，detail = {html, text, delta}
@statuschange	eventhandle		否	通过 Context 方法改变编辑器内样式时触发，返回选区已设置的样式

editorContext

editor 组件对应的 editorContext 实例，可通过 uni.createSelectorQuery 获取。

uni.createSelectorQuery()

返回一个 SelectorQuery 对象实例。可以在这个实例上使用 select 等方法选择节点，并使用 boundingClientRect 等方法选择需要查询的信息。

Tips:

• 使用 uni.createSelectorQuery() 需要在生命周期 mounted 后进行调用。
• 默认需要使用到 selectorQuery.in 方法。

SelectorQuery

查询节点信息的对象

selectorQuery.in(component)

将选择器的选取范围更改为自定义组件 component 内，返回一个 SelectorQuery 对象实例。（初始时，选择器仅选取页面范围的节点，不会选取任何自定义组件中的节点）。

代码示例

const query = uni.createSelectorQuery().in(this);
query
  .select("#id")
  .boundingClientRect((data) => {
    console.log("得到布局位置信息" + JSON.stringify(data));
    console.log("节点离页面顶部的距离为" + data.top);
  })
  .exec();

注意