百度智能小程序 富文本編輯器

Editor 富文本編輯器

介紹

Editor 富文本編輯器動(dòng)態(tài)庫(kù)提供了支持富文本編輯的 ?editor?組件和操作?editor?組件的?createEditorContext?方法，通過使用該動(dòng)態(tài)庫(kù)，用戶可以對(duì)圖片、文本進(jìn)行編輯。編輯器導(dǎo)出內(nèi)容支持帶標(biāo)簽的html和純文本的text，編輯器內(nèi)部采用delta格式進(jìn)行存儲(chǔ)。

富文本編輯器組件中設(shè)置了一些基本樣式使得內(nèi)容可以正確展示，在開發(fā)過程中可以進(jìn)行覆蓋，在其他組件或者環(huán)境中使用富文本編輯器導(dǎo)出的?html?時(shí)，需要額外維護(hù)以下?DOM?結(jié)構(gòu)：

<ql-container>
    <ql-editor></ql-editor>
</ql-container>

使用方法

1. 在項(xiàng)目中引用動(dòng)態(tài)庫(kù)

參考使用動(dòng)態(tài)庫(kù)中提供的方法，在 app.json 中增添一項(xiàng) dynamicLib，與 pages 同級(jí)。

"dynamicLib": {
    "editorLib": {
        "provider": "swan-editor"
    }
},

2. 在使用到富文本編輯器組件的頁(yè)面配置動(dòng)態(tài)庫(kù)

在每個(gè)使用到富文本編輯器組件的頁(yè)面，配置 *.json 文件如：

{
    "usingSwanComponents": {
        "editor": "dynamicLib://editorLib/editor"
    }
}

3. 編寫 *.swan 文件

<editor
    read-only="{{readOnly}}"
    placeholder="{{placeholder}}"
/>

這是一種最基本的使用方式，其中readOnly和placeholder的值可以在 *.js 文件中設(shè)置。

Editor 組件屬性列表

Page({
    data: {
        readOnly: false,
        placeholder: '請(qǐng)輸入...'
    }
});

編輯器內(nèi)支持部分HTML標(biāo)簽和內(nèi)聯(lián)樣式，但不支持 class和id。

支持的標(biāo)簽

不滿足的標(biāo)簽會(huì)被忽略，div標(biāo)簽會(huì)被轉(zhuǎn)換為 p標(biāo)簽存儲(chǔ)。

支持的內(nèi)聯(lián)樣式

內(nèi)聯(lián)樣式僅支持設(shè)置在行內(nèi)元素或塊級(jí)元素上，不能同時(shí)設(shè)置，如 text-align 歸類為塊級(jí)樣式，在  span 標(biāo)簽上設(shè)置是無(wú)效的。

EditorContext 實(shí)例

Editor 富文本編輯器動(dòng)態(tài)庫(kù)提供了 createEditorContext 的方法來(lái)獲取某個(gè)  editor 組件的實(shí)例，EditorContext 通過  id 和 一個(gè) editor 組件綁定，操作對(duì)應(yīng)的  editor 組件。

使用方法

Page({
    onEditorReady() {
        this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editorId');
    }
});

EditorContext.blur(Objec object)

解釋: 編輯器失焦

參數(shù): Object object

EditorContext.clear(Objec object)

解釋: 清空編輯器內(nèi)容

參數(shù): Object object

EditorContext.format(string name, string value)

解釋: 修改格式

對(duì)已經(jīng)應(yīng)用樣式的選區(qū)設(shè)置會(huì)取消樣式。

參數(shù)

string name: 屬性

string value: 值

支持設(shè)置的樣式列表

EditorContext.getContents(Objec object)

解釋: 獲取編輯器內(nèi)容

參數(shù): Object object

object.success 回調(diào)函數(shù)

參數(shù): Object res

EditorContext.getSelectionText(Objec object)

解釋: 獲取編輯器內(nèi)選區(qū)的純文本內(nèi)容。當(dāng)編輯器失焦或未選中一段區(qū)間時(shí)，返回內(nèi)容為空

參數(shù): Object object

object.success 回調(diào)函數(shù)

參數(shù): Object res

EditorContext.insertDivider(Objec object)

解釋: 插入分隔符

參數(shù): Object object

EditorContext.insertImage(Objec object)

解釋: 插入圖片

參數(shù): Object object

EditorContext.insertText(Objec object)

解釋: 覆蓋當(dāng)前選區(qū)，設(shè)置一段文本

參數(shù): Object object

EditorContext.removeFormat(Objec object)

解釋: 清除當(dāng)前選區(qū)的樣式

參數(shù): Object object

EditorContext.setContents(Objec object)

解釋: 初始化編輯器內(nèi)容，html和delta同時(shí)存在時(shí)僅delta生效

需要注意的是，通過setContents設(shè)置編輯器內(nèi)容時(shí)，由于支持的html標(biāo)簽和內(nèi)聯(lián)樣式有限，建議開發(fā)者在小程序內(nèi)通過delta進(jìn)行插入。

參數(shù): Object object

EditorContext.scrollIntoView()

解釋: 將編輯器光標(biāo)處滾動(dòng)到窗口可視區(qū)域內(nèi)

EditorContext.redo(Objec object)

解釋: 恢復(fù)

參數(shù): Object object

EditorContext.undo(Objec object)

解釋: 撤銷

參數(shù): Object object