editor | uni-app官网

# 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。

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

App	H5	微信小程序	支付宝小程序	百度小程序	抖音小程序、飞书小程序	QQ小程序	快应用	360小程序	快手小程序
2.0+，app-vue	2.4.5+	基础库 2.7.0+	x	需引入动态库引入方式	x	x	x	x	x

属性	类型	默认值	必填	说明
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 方法改变编辑器内样式时触发，返回选区已设置的样式

# 支持的标签

不满足的标签会被忽略，<div>会被转行为储存。

类型	节点	平台差异说明
行内元素	`<span> <strong> <b> <ins> <em> <i> <u> <a> <del> <s> <sub> <sup> <img>`	其中`<ins> <del>`百度小程序不支持
块级元素	`<br> <p> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <ol> <ul> <li>`	其中`<br>`仅百度小程序支持、`<p>`百度小程序不支持

# 支持的内联样式

内联样式仅能设置在行内元素或块级元素上，不能同时设置。例如 font-size` 归类为行内元素属性，在 p 标签上设置是无效的。

类型	样式	平台差异说明
块级样式	`text-align` `direction` `margin` `margin-top` `margin-left` `margin-right` `margin-bottom` `padding` `padding-top` `padding-left` `padding-right` `padding-bottom` `line-height` `text-indent`	百度小程序仅支持`text-align、direction`
行内样式	`font` `font-size` `font-style` `font-variant` `font-weight` `font-family` `letter-spacing` `text-decoration` `color` `background-color`	百度小程序仅支持`color、background-color`

注意事项

插入的 html 中事件绑定会被移除
formats 中的 color 属性会统一以 hex 格式返回
粘贴时仅纯文本内容会被拷贝进编辑器
插入 html 到编辑器内时，编辑器会删除一些不必要的标签，以保证内容的统一。例如xxx会改写为xxx
编辑器聚焦时页面会被上推，系统行为以保证编辑区可见
H5端会动态引入依赖 quill.min.js、image-resize.min.js，依赖从 unpkg.com 加载，如过依赖加载较慢或失败，可以从 github.com 或者 gitee.com 下载下来放在自己的服务器或 CDN 服务商，相比自己的服务器或者其他 CDN 服务商更推荐的做法是开发者将将所有前端资源托管在 uniCloud 前端网页托管，然后在自定义模板的 head 标签内引入。
不能直接插入视频或者其他文件，编辑时可以采用视频封面或者文件缩略图占位，并在图片属性中保存视频信息，预览时读取附加信息再还原为视频或者其他文件操作。

示例代码 查看演示

Template

Script

Style

<template>
	<view class="container">
		<editor id="editor" class="ql-container" :placeholder="placeholder" @ready="onEditorReady"></editor>
		<button type="warn" @tap="undo">撤销</button>
	</view>
</template>