2023年微信小程序表單組件 editor

微信小程序表單組件 editor

1. 富文本編輯器，可以對文字和圖片進(jìn)行編輯
2. 導(dǎo)出內(nèi)容支持帶標(biāo)簽的html和純文本的text，內(nèi)部采用delta格式進(jìn)行存儲
3. 內(nèi)置基本樣式并可覆蓋，但在其他組件或環(huán)境中使用導(dǎo)出的html時需額外引入一段樣式
4. 支持設(shè)置只讀、提示信息、點擊圖片時顯示大小控件、工具欄控件和修改尺寸控件等屬性
5. 通過相關(guān)api（EditorContext）實現(xiàn)對編輯器內(nèi)樣式的改變，同時支持部分HTML標(biāo)簽和內(nèi)聯(lián)樣式
6. 使用catchtouchend事件綁定不會使編輯器失去焦點
7. 粘貼時僅支持純文本內(nèi)容，并會刪除一些不必要的標(biāo)簽以保證內(nèi)容的統(tǒng)一
8. 編輯器聚焦時頁面會被上推以保證編輯區(qū)可見。

1. 基本功能

微信小程序表單組件 editor是一個富文本編輯器，有豐富的編輯功能，例如插入圖片、文字、粗體、斜體等等。這些編輯內(nèi)容可以保存為帶標(biāo)簽的html或者純文本text，同時內(nèi)部采用了delta格式進(jìn)行存儲，方便進(jìn)行保存、修改和導(dǎo)出操作。

2. 樣式優(yōu)化

微信小程序表單組件 editor已經(jīng)內(nèi)置一些基本樣式來保證編輯內(nèi)容可以正確展示。對于開發(fā)者而言，也可以進(jìn)行相應(yīng)的樣式覆蓋。但需要注意的是，在其他組件或環(huán)境中使用富文本組件導(dǎo)出的html時，需要額外引入這段樣式，并維護(hù)"ql-container"、"ql-editor"和"/ql-editor"/ql-container"的結(jié)構(gòu)。

3. 屬性設(shè)置

微信小程序表單組件 editor支持設(shè)置只讀、提示信息、點擊圖片時顯示大小控件、工具欄控件和修改尺寸控件等屬性。具體可通過EditorContext相關(guān)api實現(xiàn)對編輯區(qū)域?qū)傩砸约皹邮竭M(jìn)行自定義設(shè)置。

4. HTML標(biāo)簽與內(nèi)聯(lián)樣式

微信小程序表單組件 editor內(nèi)部支持部分HTML標(biāo)簽和內(nèi)聯(lián)樣式，能夠?qū)崿F(xiàn)行內(nèi)樣式、塊級樣式的設(shè)置，但不支持class和id。在插入HTML時，貼入的內(nèi)容中事件綁定會被移除，且編輯器會刪除一些不必要的標(biāo)簽，例如<p><span>xxx</span></p>會改寫為<p>xxx</p>。同時，內(nèi)聯(lián)樣式僅能設(shè)置在行內(nèi)元素或塊級元素上，不能同時設(shè)置。例如font-size歸類為行內(nèi)元素屬性，在p標(biāo)簽上設(shè)置是無效的。

5. 注意事項

使用catchtouchend事件綁定不會使編輯器失去焦點；插入HTML到編輯器內(nèi)時，編輯器會刪除一些不必要的標(biāo)簽，以保證內(nèi)容的統(tǒng)一；編輯器聚焦時頁面會被上推以保證編輯區(qū)可見等。

<本文由himall原創(chuàng)，商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請標(biāo)明：himall原創(chuàng)>