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时，需要额外引入这段样式，并维护的结构，参考：使用 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();

注意

• 支付宝小程序不支持 in(component)，使用无效果

selectorQuery.select(selector)

在当前页面下选择第一个匹配选择器 selector 的节点，返回一个 NodesRef 对象实例，可以用于获取节点信息。

selector 说明：

selector 类似于 CSS 的选择器，但仅支持下列语法。

• ID 选择器：#the-id
• class 选择器（可以连续指定多个）：.a-class.another-class
• 子元素选择器：.the-parent > .the-child
• 后代选择器：.the-ancestor .the-descendant
• 跨自定义组件的后代选择器：.the-ancestor >>> .the-descendant (H5 暂不支持)
• 多选择器的并集：#a-node, .some-other-nodes

selectorQuery.selectAll(selector)

在当前页面下选择匹配选择器 selector 的所有节点，返回一个 NodesRef 对象实例，可以用于获取节点信息。

selectorQuery.selectViewport()

选择显示区域，可用于获取显示区域的尺寸、滚动位置等信息，返回一个 NodesRef 对象实例。

selectorQuery.exec(callback)

执行所有的请求。请求结果按请求次序构成数组，在 callback 的第一个参数中返回。

NodesRef

用于获取节点信息的对象

nodesRef.fields(object,callback)

获取节点的相关信息。第一个参数是节点相关信息配置（必选）；第二参数是方法的回调函数，参数是指定的相关节点信息。

object 参数说明

字段名	类型	默认值	必填	说明	平台差异说明
id	Boolean	false	否	是否返回节点 id
dataset	Boolean	false	否	是否返回节点 dataset	App、微信小程序、H5
rect	Boolean	false	否	是否返回节点布局位置（left right top bottom）
size	Boolean	false	否	是否返回节点尺寸（width height）
scrollOffset	Boolean	false	否	是否返回节点的 scrollLeft scrollTop，节点必须是 scroll-view 或者 viewport
properties	Array＜string＞	[]	否	指定属性名列表，返回节点对应属性名的当前属性值（只能获得组件文档中标注的常规属性值，id class style 和事件绑定的属性值不可获取）	仅 App 和微信小程序支持
computedStyle	Array＜string＞	[]	否	指定样式名列表，返回节点对应样式名的当前值	仅 App 和微信小程序支持
context	Boolean	false	否	是否返回节点对应的 Context 对象	仅 App 和微信小程序支持

editorContext.format(name, value)

修改样式

参数	类型	说明
name	String	属性
value	String	值

支持设置的样式列表

name	value	平台差异说明
bold
italic
underline
strike
ins
script	sub / super
header	H1 / H2 / h3 / H4 / h5 / H6
align	left / center / right / justify	left百度小程序不支持
direction	rtl
indent	-1 / +1
list	ordered / bullet / check
color	hex color
backgroundColor	hex color
margin/marginTop/marginBottom/marginLeft/marginRight	css style	百度小程序不支持
padding/paddingTop/paddingBottom/paddingLeft/paddingRight	css style	百度小程序不支持
font/fontSize/fontStyle/fontVariant/fontWeight/fontFamily	css style	百度小程序不支持
lineHeight	css style	百度小程序不支持
letterSpacing	css style	百度小程序不支持
textDecoration	css style	百度小程序不支持
textIndent	css style	百度小程序不支持
wordWrap	css style	百度小程序不支持
wordBreak	css style	百度小程序不支持
whiteSpace	css style	百度小程序不支持

对已经应用样式的选区设置会取消样式。css style 表示 css 中规定的允许值。

editorContext.insertDivider(OBJECT)

插入分割线

OBJECT 参数说明

属性	类型	默认值	必填	说明
success	Function		否	接口调用成功的回调函数
fail	Function		否	接口调用失败的回调函数
complete	Function		否	接口调用结束的回调函数（调用成功、失败都会执行）

editorContext.insertImage(OBJECT)

插入图片。

微信小程序平台地址为临时文件时，获取的编辑器html格式内容中  标签增加属性 data-local，delta 格式内容中图片 attributes 属性增加 data-local 字段，该值为传入的临时文件地址。 开发者可选择在提交阶段上传图片到服务器，获取到网络地址后进行替换。替换时对于html内容应替换掉  的 src 值，对于 delta 内容应替换掉 insert { image: abc } 值。

OBJECT 参数说明

属性	类型	默认值	必填	说明
src	String		是	图片地址，仅支持 http(s)、base64、本地图片
alt	String		否	图像无法显示时的替代文本
width	String		否	图片宽度（pixels/百分比），2.6.5+ 支持，百度小程序不支持
height	String		否	图片高度 (pixels/百分比），2.6.5+ 支持，百度小程序不支持
extClass	String		否	添加到图片 img 标签上的类名，2.6.5+ 支持
data	Object		否	data 被序列化为 name=value;name1=value2 的格式挂在属性 data-custom 上，2.6.5+ 支持
success	Function		否	接口调用成功的回调函数
fail	Function		否	接口调用失败的回调函数
complete	Function		否	接口调用结束的回调函数（调用成功、失败都会执行）

editorContext.getContents(OBJECT)

获取编辑器内容

OBJECT 参数说明

属性	类型	默认值	必填	说明
success	Function		否	接口调用成功的回调函数
fail	Function		否	接口调用失败的回调函数
complete	Function		否	接口调用结束的回调函数（调用成功、失败都会执行）

object.success 回调函数

属性	类型	说明
html	string	带标签的 HTML 内容
text	string	纯文本内容
delta	Object	表示内容的 delta 对象

 完整例子