編輯器導出內容支持帶標簽的 html和純文本的 text,編輯器內部采用 delta 格式進行存儲。
通過setContents接口設置內容時,解析插入的 html 可能會由于一些非法標簽導致解析錯誤,建議開發者在小程序內使用時通過 delta 進行插入。
富文本組件內部引入了一些基本的樣式使得內容可以正確的展示,開發時可以進行覆蓋。需要注意的是,在其它組件或環境中使用富文本組件導出的html時,需要額外引入 這段樣式,并維護<ql-container><ql-editor></ql-editor></ql-container>的結構。
圖片控件僅初始化時設置有效。
相關 api:EditorContext
屬性 | 類型 | 默認值 | 必填 | 說明 | 最低版本 |
---|---|---|---|---|---|
read-only | boolean | false | 否 | 設置編輯器為只讀 | 2.7.0 |
placeholder | string | 否 | 提示信息 | 2.7.0 | |
show-img-size | boolean | false | 否 | 點擊圖片時顯示圖片大小控件 | 2.7.0 |
show-img-toolbar | boolean | false | 否 | 點擊圖片時顯示工具欄控件 | 2.7.0 |
show-img-resize | boolean | false | 否 | 點擊圖片時顯示修改尺寸控件 | 2.7.0 |
bindready | eventhandle | 否 | 編輯器初始化完成時觸發 | 2.7.0 | |
bindfocus | eventhandle | 否 | 編輯器聚焦時觸發,event.detail = {html, text, delta} | 2.7.0 | |
bindblur | eventhandle | 否 | 編輯器失去焦點時觸發,detail = {html, text, delta} | 2.7.0 | |
bindinput | eventhandle | 否 | 編輯器內容改變時觸發,detail = {html, text, delta} | 2.7.0 | |
bindstatuschange | eventhandle | 否 | 通過 Context 方法改變編輯器內樣式時觸發,返回選區已設置的樣式 | 2.7.0 |
編輯器內支持部分 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 |