# editor

> 基础库 2.7.0 开始支持，低版本需做[兼容处理](1003706)。

> __微信 Windows 版__：支持
> 
> __微信 Mac 版__：支持
> 
> __微信 鸿蒙 OS 版__：支持

渲染框架支持情况：WebView

## 功能描述

富文本编辑器，可以对图片、文字进行编辑。

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

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

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

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

相关 api：[EditorContext](/miniprogram/dev/api/media/editor/EditorContext.md)

## 属性说明

| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
| ---- | ---- | ------ | -------- | ---- | -------- |
| read-only | boolean | false | 否 | 设置编辑器为只读 | [2.7.0](1003706) |
| placeholder | string |  | 否 | 提示信息 | [2.7.0](1003706) |
| show-img-size | boolean | false | 否 | 点击图片时显示图片大小控件 | [2.7.0](1003706) |
| show-img-toolbar | boolean | false | 否 | 点击图片时显示工具栏控件 | [2.7.0](1003706) |
| show-img-resize | boolean | false | 否 | 点击图片时显示修改尺寸控件 | [2.7.0](1003706) |
| enable-formats | Array.<string> | 所有格式 | 否 | 编辑器允许的名单内的格式 | [3.2.2](1003706) |
| enterkeyhint | string | enter | 否 | 定义虚拟键盘回车键的[操作标签](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/enterkeyhint) | [3.7.11](1003706) |
| confirm-hold | boolean | true | 否 | 点击键盘回车键时是否保持键盘不收起 | [3.7.11](1003706) |
| bind:ready | eventhandle |  | 否 | 编辑器初始化完成时触发 | [2.7.0](1003706) |
| bind:focus | eventhandle |  | 否 | 编辑器聚焦时触发，event.detail = {html, text, delta} | [2.7.0](1003706) |
| bind:blur | eventhandle |  | 否 | 编辑器失去焦点时触发，detail = {html, text, delta} | [2.7.0](1003706) |
| bind:input | eventhandle |  | 否 | 编辑器内容改变时触发，detail = {html, text, delta} | [2.7.0](1003706) |
| bind:statuschange | eventhandle |  | 否 | 通过 Context 方法改变编辑器内样式时触发，返回选区已设置的样式 | [2.7.0](1003706) |

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

## 支持的标签

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

| 类型     | 节点                                                              |
| -------- | ----------------------------------------------------------------- |
| 行内元素 | `<span> <strong> <b> <ins> <em> <i> <u> <a> <del> <s> <sub> <sup> <img>` |
| 块级元素 | `<p> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <ol> <ul> <li>`               |

## 支持的内联样式

内联样式仅能设置在行内元素或块级元素上，不能同时设置。例如 `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` |
| 行内样式 | `font` `font-size` `font-style` `font-variant` `font-weight` `font-family` 
  `letter-spacing` `text-decoration` `color` `background-color` |

##  enable-formats 属性列表

可以通过该参数控制以下属性是否被禁用。请注意，不在以下名单内的格式将固定开启。
| name                                                      | version |
| --------------------------------------------------------- | ------ |
| bold                                                      | 3.2.2  |
| italic                                                    | 3.2.2  |
| underline                                                 | 3.2.2  |

## Bug & Tip

1. `tip`: 使用 catchtouchend 绑定事件则不会使编辑器失去焦点(2.8.3)
1. `tip`: 插入的 html 中事件绑定会被移除
1. `tip`: formats 中的  color 属性会统一以 hex 格式返回
1. `tip`: 粘贴时仅纯文本内容会被拷贝进编辑器
1. `tip`: 插入 html 到编辑器内时，编辑器会删除一些不必要的标签，以保证内容的统一。例如`<p><span>xxx</span></p>`会改写为`<p>xxx</p>`
1. `tip`: 编辑器聚焦时页面会被上推，系统行为以保证编辑区可见

## 示例代码

[在开发者工具中预览效果](https://developers.weixin.qq.com/s/W7uZ3EmU7jbl)