微信小程序表單組件 editor

發布時間：2020-11-28 瀏覽：3073

編輯器導出內容支持帶標簽的 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`