建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
創(chuàng)新互聯(lián)百度小程序教程：Editor富文本編輯器
- Editor 富文本編輯器
- 介紹
- 使用方法
- 1. 在項(xiàng)目中引用動(dòng)態(tài)庫(kù)
- 2. 在使用到富文本編輯器組件的頁(yè)面配置動(dòng)態(tài)庫(kù)
- 3. 編寫
*.swan文件
- Editor 組件屬性列表
- 支持的標(biāo)簽
- 支持的內(nèi)聯(lián)樣式
- EditorContext 實(shí)例
- 使用方法
- EditorContext.blur(Object object)
- EditorContext.clear(Object object)
- EditorContext.format(String name, String value)
- EditorContext.getContents(Object object)
- EditorContext.getSelectionText(Object object)
- EditorContext.insertDivider(Object object)
- EditorContext.insertImage(Object object)
- EditorContext.insertText(Object object)
- EditorContext.removeFormat(Object object)
- EditorContext.setContents(Object object)
- EditorContext.scrollIntoView()
- EditorContext.redo(Object object)
- EditorContext.undo(Object object)
- 示例
- 圖片示例
- 圖片示例
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ǔ)。
成都創(chuàng)新互聯(lián)公司專注于崇州網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供崇州營(yíng)銷型網(wǎng)站建設(shè)，崇州網(wǎng)站制作、崇州網(wǎng)頁(yè)設(shè)計(jì)、崇州網(wǎng)站官網(wǎng)定制、小程序開發(fā)服務(wù)，打造崇州網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供崇州網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。
富文本編輯器組件中設(shè)置了一些基本樣式使得內(nèi)容可以正確展示，在開發(fā)過程中可以進(jìn)行覆蓋，在其他組件或者環(huán)境中使用富文本編輯器導(dǎo)出的html時(shí)，需要額外維護(hù)以下DOM結(jié)構(gòu)：
使用方法
1. 在項(xiàng)目中引用動(dòng)態(tài)庫(kù)
參考使用動(dòng)態(tài)庫(kù)中提供的方法，在app.json中增添一項(xiàng)dynamicLib，與pages同級(jí)。
- JSON
"dynamicLib": {"editorLib": {"provider": "swan-editor"}},
2. 在使用到富文本編輯器組件的頁(yè)面配置動(dòng)態(tài)庫(kù)
在每個(gè)使用到富文本編輯器組件的頁(yè)面，配置*.json文件如：
- JSON
{"usingSwanComponents": {"editor": "dynamicLib://editorLib/editor"}}
3. 編寫*.swan文件
- SWAN
read-only="{{readOnly}}"placeholder="{{placeholder}}"/>
這是一種最基本的使用方式，其中readOnly和placeholder的值可以在*.js文件中設(shè)置。
- JS
Page({data: {readOnly: false,placeholder: '請(qǐng)輸入...'}});
Editor 組件屬性列表
| 屬性 | 類型 | 默認(rèn)值 | 必填 | 說明 |
|---|---|---|---|---|
| read-only | Boolean | false | 否 | 設(shè)置編輯器為只讀 |
| placeholder | String | 否 | 編輯器提示信息 | |
| show-img-size | Boolean | false | 否 | 點(diǎn)擊圖片時(shí)顯示圖片大小控件 |
| show-img-resize | Boolean | false | 否 | 點(diǎn)擊圖片時(shí)顯示圖片縮放控件 |
| show-img-toolbar | Boolean | false | 否 | 點(diǎn)擊圖片時(shí)顯示圖片工具欄控件 |
| bindready | EventHandle | 否 | 編輯器初始化完成時(shí)觸發(fā) | |
| bindfocus | EventHandle | 否 | 編輯器聚焦時(shí)觸發(fā)，event.detail = { html, text, delta } | |
| bindblur | EventHandle | 否 | 編輯器失去焦點(diǎn)時(shí)觸發(fā)，event.detail = { html, text, delta } | |
| bindinput | EventHandle | 否 | 編輯器內(nèi)容改變時(shí)觸發(fā)，event.detail = { html, text, delta } | |
| bindstatuschange | EventHandle | 否 | 編輯器內(nèi)容或樣式通過EditorContext中的方法改變時(shí)觸發(fā)，返回選區(qū)已設(shè)置的樣式 |
編輯器內(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ǔ)。
| 類型 | 節(jié)點(diǎn) |
|---|---|
| 行內(nèi)元素 | |
| 塊級(jí)元素 |
支持的內(nèi)聯(lián)樣式
內(nèi)聯(lián)樣式僅支持設(shè)置在行內(nèi)元素或塊級(jí)元素上，不能同時(shí)設(shè)置，如
text-align歸類為塊級(jí)樣式，在span標(biāo)簽上設(shè)置是無(wú)效的。
| 類型 | 樣式 |
|---|---|
| 塊級(jí)樣式 | text-align、direction |
| 行內(nèi)樣式 | color、background-color |
EditorContext 實(shí)例
Editor 富文本編輯器動(dòng)態(tài)庫(kù)提供了createEditorContext的方法來獲取某個(gè)editor組件的實(shí)例，EditorContext通過id和一個(gè)editor組件綁定，操作對(duì)應(yīng)的editor組件。
使用方法
- JS
Page({onEditorReady() {this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editorId');}});
EditorContext.blur(Object object)
解釋：編輯器失焦。
參數(shù)：Object object
| 屬性 | 類型 | 默認(rèn)值 | 必填 | 說明 |
|---|---|---|---|---|
| success | Function | 否 | 接口調(diào)用成功的回調(diào)函數(shù) | |
| fail | Function | 否 | 接口調(diào)用失敗的回調(diào)函數(shù) | |
| complete | Function | 否 | 接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行） |
EditorContext.clear(Object object)
解釋：清空編輯器內(nèi)容。
參數(shù)：Object object
| 屬性 | 類型 | 默認(rèn)值 | 必填 | 說明 |
|---|---|---|---|---|
| success | Function | 否 | 接口調(diào)用成功的回調(diào)函數(shù) | |
| fail | Function | 否 | 接口調(diào)用失敗的回調(diào)函數(shù) | |
| complete | Function | 否 | 接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行） |
EditorContext.format(String name, String value)
解釋：修改格式。
對(duì)已經(jīng)應(yīng)用樣式的選區(qū)設(shè)置會(huì)取消樣式。
參數(shù)
String name：屬性
String value：值
支持設(shè)置的樣式列表
| name | value |
|---|---|
| bold | |
| italic | |
| underline | |
| strike | |
| ins | |
| script | sub / super |
| header | H1 / H2 / H3 / H4 / H5 / H6 |
| align | center / right / justify |
| direction | rtl |
| indent | -1 / +1 |
| list | ordered / bullet / check |
| color | hex color |
| backgroudColor | hex color |
EditorContext.getContents(Object object)
解釋：獲取編輯器內(nèi)容。
參數(shù)：Object object
| 屬性 | 類型 | 默認(rèn)值 | 必填 | 說明 |
|---|---|---|---|---|
| success | Function | 否 | 接口調(diào)用成功的回調(diào)函數(shù) | |
| fail | Function | 否 | 接口調(diào)用失敗的回調(diào)函數(shù) | |
| complete | Function | 否 | 接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行） |
object.success 回調(diào)函數(shù)
參數(shù)：Object res
| 屬性 | 類型 | 說明 |
|---|---|---|
| html | String | 帶標(biāo)簽的html內(nèi)容 |
| text | String | 純文本內(nèi)容 |
| delta | Object | 描述內(nèi)容的delta對(duì)象 |
EditorContext.getSelectionText(Object object)
解釋：獲取編輯器內(nèi)選區(qū)的純文本內(nèi)容。當(dāng)編輯器失焦或未選中一段區(qū)間時(shí)，返回內(nèi)容為空。
參數(shù)：Object object
| 屬性 | 類型 | 默認(rèn)值 | 必填 | 說明 |
|---|---|---|---|---|
| success | Function | 否 | 接口調(diào)用成功的回調(diào)函數(shù) | |
| fail | Function | 否 | 接口調(diào)用失敗的回調(diào)函數(shù) | |
| complete | Function | 否 | 接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行） |
object.success 回調(diào)函數(shù)
參數(shù)：Object res
| 屬性 | 類型 | 說明 |
|---|---|---|
| text | String | 純文本內(nèi)容 |
EditorContext.insertDivider(Object object)
解釋：插入分隔符。
參數(shù)：Object object
| 屬性 | 類型 | 默認(rèn)值 | 必填 | 說明 |
|---|---|---|---|---|
| success | Function | 否 | 接口調(diào)用成功的回調(diào)函數(shù) | |
| fail | Function | 否 | 接口調(diào)用失敗的回調(diào)函數(shù) | |
| complete | Function | 否 | 接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行） |
EditorContext.insertImage(Object object)
解釋：插入圖片。
參數(shù)：Object object
| 屬性 | 類型 | 默認(rèn)值 | 必填 | 說明 |
|---|---|---|---|---|
| src | String | 是 | 圖片地址，目前僅支持 http(s)、base64、本地圖片 | |
| alt | String | 否 | 圖片無(wú)法顯示時(shí)的替代文本 | |
| extClass | String | 否 | 添加到圖片 img 標(biāo)簽上的類名 | |
| data | Object | 否 | data 會(huì)被序列化為name1=value1&name2=value2的格式掛在屬性 data-custom 上 | |
| success | Function | 否 | 接口調(diào)用成功的回調(diào)函數(shù) | |
| fail | Function | 否 | 接口調(diào)用失敗的回調(diào)函數(shù) | |
| complete | Function | 否 | 接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行） |
EditorContext.insertText(Object object)
解釋：覆蓋當(dāng)前選區(qū)，設(shè)置一段文本。
參數(shù)：Object object
| 屬性 | 類型 | 默認(rèn)值 | 必填 | 說明 |
|---|---|---|---|---|
| text | String | 否 | 文本內(nèi)容 | |
| success | Function | 否 | 接口調(diào)用成功的回調(diào)函數(shù) | |
| fail | Function | 否 | 接口調(diào)用失敗的回調(diào)函數(shù) | |
| complete | Function | 否 | 接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行） |
EditorContext.removeFormat(Object object)
解釋：清除當(dāng)前選區(qū)的樣式。
參數(shù)：Object object
| 屬性 | 類型 | 默認(rèn)值 | 必填 | 說明 |
|---|---|---|---|---|
| success | Function | 否 | 接口調(diào)用成功的回調(diào)函數(shù) | |
| fail | Function | 否 | 接口調(diào)用失敗的回調(diào)函數(shù) | |
| complete | Function | 否 | 接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行） |
EditorContext.setContents(Object 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
| 屬性 | 類型 | 默認(rèn)值 | 必填 | 說明 |
|---|---|---|---|---|
| html | String | 否 | 帶標(biāo)簽的html內(nèi)容 | |
| delta | Object | 否 | 描述內(nèi)容的delta對(duì)象 | |
| success | Function | 否 | 接口調(diào)用成功的回調(diào)函數(shù) | |
| fail | Function | 否 | 接口調(diào)用失敗的回調(diào)函數(shù) | |
| complete | Function | 否 | 接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行） |
EditorContext.scrollIntoView()
解釋：將編輯器光標(biāo)處滾動(dòng)到窗口可視區(qū)域內(nèi)。
EditorContext.redo(Object object)
解釋：恢復(fù)。
參數(shù)：Object object
| 屬性 | 類型 | 默認(rèn)值 | 必填 | 說明 |
|---|---|---|---|---|
| success | Function | 否 | 接口調(diào)用成功的回調(diào)函數(shù) | |
| fail | Function | 否 | 接口調(diào)用失敗的回調(diào)函數(shù) | |
| complete | Function | 否 | 接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行） |
EditorContext.undo(Object object)
解釋：撤銷。
參數(shù)：Object object
| 屬性 | 類型 | 默認(rèn)值 | 必填 | 說明 |
|---|---|---|---|---|
| success | Function | 否 | 接口調(diào)用成功的回調(diào)函數(shù) | |
| fail | Function | 否 | 接口調(diào)用失敗的回調(diào)函數(shù) | |
| complete | Function | 否 | 接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行） |
示例
在開發(fā)者工具中打開
在開發(fā)者工具中打開
在 WEB IDE 中打開
掃碼體驗(yàn)
代碼示例
請(qǐng)使用百度APP掃碼
圖片示例
- SWAN
- JS
- CSS
id="editorId"class="editor"placeholder="開始輸入..."bindready="onEditorReady"bindstatuschange="onStatusChange"show-img-sizeshow-img-resizeshow-img-toolbar/>
const INIT_CONTENT_HTML = `支持插入圖片
支持以下字符樣式
bold粗體italic斜體underline下劃線sub下標(biāo)super上標(biāo)支持以下列表樣式
- 有序列表
- 有序列表
無(wú)序列表
無(wú)序列表
選框列表
選框列表
支持以下字符大小
H1 一級(jí)標(biāo)題
H2 二級(jí)標(biāo)題
H3 三級(jí)標(biāo)題
H4 四級(jí)標(biāo)題
H5 五級(jí)標(biāo)題
H6 六級(jí)標(biāo)題
支持以下對(duì)齊方式
center中間對(duì)齊
right 右對(duì)齊
justify 自動(dòng)對(duì)齊
color 支持設(shè)置字體及背景顏色`;Page({ data: { formats: {} }, // 編輯器初始化完成時(shí)觸發(fā)的事件，用于加載編輯器初始內(nèi)容 onEditorReady() { this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editorId'); this.initContent(); }, // 設(shè)置編輯器初始內(nèi)容 initContent() { this.editorCtx.setContents({ html: INIT_CONTENT_HTML }); }, // 編輯器內(nèi)插入圖片函數(shù) insertImage() { const editorCtx = this.editorCtx; swan.chooseImage({ count: 1, success: res => { editorCtx.insertImage({ src: res.tempFilePaths[0], alt: '插入圖片', data: { id: 'insert-image', role: 'user' }, success: () => { swan.showToast({ title: '插入圖片成功' }); }, fail: err => { swan.showToast({ title: '插入圖片失敗', icon: 'none' }); } }); } }); }, /** * 更改編輯器選區(qū)為不同格式 * * @param {Object} e.target.dataset 獲取 swan 頁(yè)面的傳參：name、value * */ format(e) { const {name, value} = e.target.dataset; if (!name) { return; } this.editorCtx.format(name, value); }, /** * 編輯器內(nèi)容或樣式通過方法改變時(shí)觸發(fā)的事件，返回選區(qū)已設(shè)置的樣式 * * @param {Object} e.detail 事件對(duì)象 * */ onStatusChange(e) { const formats = e.detail; this.setData({ formats }); }, // 編輯器中插入分隔符 insertDivider() { this.editorCtx.insertDivider(); }, // 清除編輯器中內(nèi)容，與工具欄的垃圾桶圖標(biāo)對(duì)應(yīng) clear() { const editorCtx = this.editorCtx; swan.showModal({ title: '清空編輯器', content: '確定清空編輯器全部?jī)?nèi)容？', success: res => { if (res.confirm) { editorCtx.clear(); } } }); }});
@font-face {font-family: "iconfont"; /* project id 2000141 */src: url(http://at.alicdn.com/t/font_2000141_vma36b09h9.wof) format("woff"),url(http://at.alicdn.com/t/font_2000141_vma36b09h9.ttf) format("truetype"),url(http://at.alicdn.com/t/font_2000141_vma36b09h9.svg#iconfont) format("svg");}.iconfont {display: inline-block;font-size: 22px;width: 30px;height: 30px;font-family: "iconfont" !important;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}.icon-image:before {content: "\e60e";}.icon-format-header-1:before {content: "\e610";}.icon-format-header-2:before {content: "\e60f";}.icon-format-bold:before {content: "\e60a";}.icon-format-list:before {content: "\e60b";}.icon-divider:before {content: "\e609";}.icon-clear:before {content: "\e60c";}.icon-format-italic:before {content: "\e60d";}.editor-wrap {width: 100%;height: 100vh;}.editor {display: block;box-sizing: border-box;width: 100%;height: 100%;margin-top: 50px;padding: 38.043rpx 30.797rpx;}swan-editor {display: block;}.ql-editor {height: 100%;}.toolbar {position: fixed;box-sizing: border-box;padding: 17px 17px;width: 100%;height: 45px;top: 30;left: 0;border-top: .906rpx solid #e6e6e6;border-bottom: .906rpx solid #e6e6e6;display: flex;align-items: center;justify-content: space-between;background-color: #fff;z-index: 99;}.ql-active {color: #3388ff;}
本文名稱：創(chuàng)新互聯(lián)百度小程序教程：Editor富文本編輯器
新聞來源：http://m.fisionsoft.com.cn/article/cojoiic.html
