# editor ## Instructions 富文本编辑器，可以对图片、文字格式进行编辑和混排。在web开发时，可以使用 contenteditable 来实现内容编辑。但这是一个dom API，在非H5平台无法使用。于是微信小程序和uni-app的App-vue提供了 editor 组件来实现这个功能，并且在uni-app的H5平台也提供了兼容。从技术本质来讲，这个组件仍然运行在视图层webview中，利用的也是浏览器的 contenteditable 功能。编辑器导出内容支持带标签的 html 和纯文本的 text ，编辑器内部采用 delta 格式进行存储。 ### Syntax - 使用 ``（或 ``，当需要包裹子节点时）。 - 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。 #### Properties | 属性 | 类型 | 默认值 | 必填 | 说明 | | --- | --- | --- | --- | --- | | read-only | boolean | false | 否 | 设置编辑器为只读 | | placeholder | string | | 否 | 提示信息 | | show-img-size | boolean | false | 否 | 点击图片时显示图片大小控件 | | show-img-toolbar | boolean | false | 否 | 点击图片时显示工具栏控件 | | show-img-resize | boolean | false | 否 | 点击图片时显示修改尺寸控件 | #### Events | 事件名 | 类型 | 默认值 | 必填 | 说明 | | --- | --- | --- | --- | --- | | @ready | eventhandle | | 否 | 编辑器初始化完成时触发 | | @focus | eventhandle | | 否 | 编辑器聚焦时触发，event.detail = {html, text, delta} | | @blur | eventhandle | | 否 | 编辑器失去焦点时触发，detail = {html, text, delta} | | @input | eventhandle | | 否 | 编辑器内容改变时触发，detail = {html, text, delta} | | @statuschange | eventhandle | | 否 | 通过 Context 方法改变编辑器内样式时触发，返回选区已设置的样式 | #### Platform Compatibility See official docs for platform support table: `https://doc.dcloud.net.cn/uni-app-x/component/editor.html` ### Examples ### Example (Example 1) ```vue ``` ### Example (Example 2) ```html ``` ### Example (Example 3) ```vue // #ifdef H5 import quill from "quill"; window.Quill = quill; // #endif ``` ### Example (Example 4) ```javascript // #ifdef H5 import quill from "quill"; window.Quill = quill; // #endif ``` ### Example (Example 5) ```vue ``` ### Example (Example 6) ```vue ``` Reference: [Official Documentation](https://doc.dcloud.net.cn/uni-app-x/component/editor.html)