May 18, 2021 WeChat Mini Program Development Document
Base library 2.7.0 starts to support, and low versions need to be compatible.
Rich text editor, you can edit pictures and text.
Editor export content supports tagged html and plain text, and is stored internally in delta format.
When setting up content through the setContents interface, parsing inserted html may result in parsing errors due to some illegal tags, and developers are advised to insert it via delta when used in small programs.
Some basic styles have been introduced within the rich text component to allow the content to be displayed correctly and overwritten during development. It is important to note that when using html exported by rich text components in other components or environments, this style needs to be introduced additionally and the structure of the ql-container-gt;?ltl-editor>/ql-editor-gt;/ql-container-gt;
The picture control is set only when initialized.
Related api: EditorContext
| Property | Type | The default | Required | Description | The lowest version |
|---|---|---|---|---|---|
| read-only | boolean | false | Whether | Set the editor to read-only | 2.7.0 |
| placeholder | string | Whether | Tips | 2.7.0 | |
| show-img-size | boolean | false | Whether | Show picture size controls when you tap a picture | 2.7.0 |
| show-img-toolbar | boolean | false | Whether | Displays toolbar controls when you click on a picture | 2.7.0 |
| show-img-resize | boolean | false | Whether | The modified dimension control is displayed when the picture is clicked | 2.7.0 |
| bindready | eventhandle | no | Trigger when the editor is initialized | 2.7.0 | |
| bindfocus | eventhandle | no | Trigger when the editor focuses, Event.detail = {HTML, Text, Delta} | 2.7.0 | |
| bindblur | eventhandle | no | Trigger when the editor loses focus, detail = {html, text, delta} | 2.7.0 | |
| bindinput | eventhandle | no | Trigger when the editor changes, detail = {html, text, delta} | 2.7.0 | |
| bindstatuschange | eventhandle | no | Trigger when changing the pattern in the editor by the Context method, return to the style set | 2.7.0 |
The editor supports some HTML tags and inline style, and Class and ID are not supported.
不满足的标签会被忽略，<div>会被转行为<p>储存。
| type | node |
|---|---|
| In-line elements |
<span> <strong> <b> <ins> <em> <i> <u> <a> <del> <s> <sub> <sup> <img>
|
| Block element element |
<p> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <ol> <ul> <li>
|
The inline pattern can only be set on the line elements or block elements, and cannot be set at the same time.For example, Font-size is classified as within the line element properties, setting is invalid on the P tag.
| type | style |
|---|---|
| Block-level style |
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
|
| In-line style |
font
font-size
font-style
font-variant
font-weight
font-family
letter-spacing
text-decoration
color
background-color
|