富文本編輯器，可以對(duì)圖片拍冠、文字格式進(jìn)行編輯和混排尿这。
在web開發(fā)時(shí)，可以使用contenteditable來實(shí)現(xiàn)內(nèi)容編輯庆杜。但這是一個(gè)dom API射众，在非H5平臺(tái)無法使用。于是微信小程序和uni-app的App-vue提供了editor組件來實(shí)現(xiàn)這個(gè)功能晃财，并且在uni-app的H5平臺(tái)也提供了兼容叨橱。從技術(shù)本質(zhì)來講，這個(gè)組件仍然運(yùn)行在視圖層webview中断盛，利用的也是瀏覽器的contenteditable功能罗洗。
| 屬性 | 類型 | 默認(rèn)值 | 必填 | 說明 |
|---|---|---|---|---|
| read-only | boolean | false | 否 | 設(shè)置編輯器為只讀 |
| placeholder | string | 否 | 提示信息 | |
| show-img-size | boolean | false | 否 | 點(diǎn)擊圖片時(shí)顯示圖片大小控件 |
| show-img-toolbar | boolean | false | 否 | 點(diǎn)擊圖片時(shí)顯示工具欄控件 |
| show-img-resize | boolean | false | 否 | 點(diǎn)擊圖片時(shí)顯示修改尺寸控件 |
| @ready | eventhandle | 否 | 編輯器初始化完成時(shí)觸發(fā) | |
| @focus | eventhandle | 否 | 編輯器聚焦時(shí)觸發(fā)，event.detail = {html, text, delta} | |
| @blur | eventhandle | 否 | 編輯器失去焦點(diǎn)時(shí)觸發(fā)郑临，detail = {html, text, delta} | |
| @input | eventhandle | 否 | 編輯器內(nèi)容改變時(shí)觸發(fā)栖博，detail = {html, text, delta} | |
| @statuschange | eventhandle | 否 | 通過 Context 方法改變編輯器內(nèi)樣式時(shí)觸發(fā)，返回選區(qū)已設(shè)置的樣式 |
案例
<template>
<view class="container">
<editor id="editor" class="ql-container m-ql-container" @ready="onEditorReady" @input="getEditorContent" v-if="contentVal"></editor>
<editor id="editor" class="ql-container m-ql-container" placeholder="請(qǐng)輸入內(nèi)容" v-else></editor>
</view>
</template>
<script>
export default {
data() {
return {
contentVal: '', //內(nèi)容（帶html）
contentText: '', //內(nèi)容（純文本）
}
},
onLoad(e) {
//////////////////////////////////////////////////////////////1厢洞、當(dāng)前模板ID
this.currentID = e.id;
//////////////////////////////////////////////////////////////2仇让、如果有模板ID，標(biāo)題和內(nèi)容填入input框和textarea框
if (this.currentID > 0) {
uni.request({
url: getApp().globalData.ehhost + '/api/ClassBroadcast/getTempInfo',
method: 'POST',
header: {
"content-type": "application/x-www-form-urlencoded"
},
data: {
't_i': this.currentID
},
success: (res) => {
if (res.statusCode == 200) {
this.contentVal = res.data.resData.FContent;
} else {
this.contentVal = '';
}
}
});
} else {
this.contentVal = '';
}
},
methods: {
onEditorReady() {/////////////////////////初始化
uni.createSelectorQuery().select('#editor').context((res) => {
var contentVal_1 = this.contentVal;
//將內(nèi)容寫入編輯器
this.editorCtx = res.context;
let EContent = {
html: contentVal_1
}
this.editorCtx.setContents(EContent); //設(shè)置富文本編輯器的內(nèi)容
}).exec()
},
getEditorContent(e) {/////////////////////////獲取編輯器內(nèi)容躺翻，當(dāng)前頁(yè)面都能獲取到
this.contentVal = e.detail.html;
this.contentText = e.detail.text;
}
}
}
</script>
<style>
.container {
padding: 10px;
}
#editor {
width: 100%;
height: 300px;
background-color: #CCCCCC;
}
</style>
