# editor
Start from base library version 2.7.0. Please remaining backward compatible.
Rich text editor, you can edit pictures, text.
Editor export supports tagged htmlAnd plain text textWithin the editor delta Format for storage.
adoptsetContentsInterface sets the contents of the html Some illegal tags may lead to parsing errors, it is recommended that developers use the delta Insert.
The rich text component introduces some basic styles to allow 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, an additional This style, and maintain<ql-container><ql-editor></ql-editor></ql-container>The structure of.
Image controls are set only when initialized.
Relevant api：EditorContext
| attribute | type | Default value | Required | Introductions | Minimum version |
|---|---|---|---|---|---|
| read-only | boolean | false | no | Set the editor to read-only | 2.7.0 |
| placeholder | string | no | Prompt information | 2.7.0 | |
| show-img-size | boolean | false | no | Click the picture to display the picture size control | 2.7.0 |
| show-img-toolbar | boolean | false | no | Display toolbar controls when clicking a picture | 2.7.0 |
| show-img-resize | boolean | false | no | Click on the picture to show the change size control | 2.7.0 |
| bindready | eventhandle | no | Triggered when editor initialization is complete | 2.7.0 | |
| bindfocus | eventhandle | no | Triggered when the editor is focused, event. detail = {html, text, delta} | 2.7.0 | |
| bindblur | eventhandle | no | Triggered when the editor loses focus, detail = {html, text, delta} | 2.7.0 | |
| bindinput | eventhandle | no | Triggered when editor content changes, detail = {html, text, delta} | 2.7.0 | |
| Bindstatuschanger | eventhandle | no | adopt Context Method to change a style in the editor, returning a style already set for the selection | 2.7.0 |
Support section in editor HTML Labels and inline styles not supportedclassandid
# Supported hashtags
The label of dissatisfaction will be ignored,<div>Will be turned into behavior.<p >Storage.
| type | node |
|---|---|
| Inline element | <span> <strong> <b> <ins> <in> <i> <in the> <a> <of the> <s> <sub> <sup> <img> |
| Block-level element | <p > <h1> <h2> <h3> <h4> <h5> <h6> <hr> <ol> <hive> <li> |
# Supported inline styles
Inline styles can only be set on inline elements or block-level elements, not both. for example font-size Is classified as an inline element attribute in the p Settings on the label are invalid.
| 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 |
| Inline style | font font-size font-style font-variant font-weight font-family letter-spacing text-decoration color background-color |
# Bug & Tip
tip: Use Catching touch Binding events do not cause the editor to lose focus(2.8.3)tip: Inserted html Event bindings are removed fromtip: formats to hit the target color Properties will be unified with hex Format returntip: Pasting only plain text content will be copied into the editortip: insert html To the editor, the editor will delete some unnecessary tags, to ensure the unity of content. for example<p ><span>xxx</span></p >Would be rewritten as<p >xxx</p >tip: The page is pushed up when the editor is focused, and the system acts to make the editing area visible