uni-app之editor编辑器
2020-10-30 本文已影响0人
Cute_小肥鸡
富文本编辑器，可以对图片、文字格式进行编辑和混排。
在web开发时，可以使用contenteditable来实现内容编辑。但这是一个dom API，在非H5平台无法使用。于是微信小程序和uni-app的App-vue提供了editor组件来实现这个功能，并且在uni-app的H5平台也提供了兼容。从技术本质来讲，这个组件仍然运行在视图层webview中，利用的也是浏览器的contenteditable功能。
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| read-only | boolean | false | 否 | 设置编辑器为只读 |
| placeholder | string | 否 | 提示信息 | |
| show-img-size | boolean | false | 否 | 点击图片时显示图片大小控件 |
| show-img-toolbar | boolean | false | 否 | 点击图片时显示工具栏控件 |
| show-img-resize | boolean | false | 否 | 点击图片时显示修改尺寸控件 |
| @ready | eventhandle | 否 | 编辑器初始化完成时触发 | |
| @focus | eventhandle | 否 | 编辑器聚焦时触发，event.detail = {html, text, delta} | |
| @blur | eventhandle | 否 | 编辑器失去焦点时触发，detail = {html, text, delta} | |
| @input | eventhandle | 否 | 编辑器内容改变时触发，detail = {html, text, delta} | |
| @statuschange | eventhandle | 否 | 通过 Context 方法改变编辑器内样式时触发，返回选区已设置的样式 |
案例
<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="请输入内容" v-else></editor>
</view>
</template>
<script>
export default {
data() {
return {
contentVal: '', //内容（带html）
contentText: '', //内容（纯文本）
}
},
onLoad(e) {
//////////////////////////////////////////////////////////////1、当前模板ID
this.currentID = e.id;
//////////////////////////////////////////////////////////////2、如果有模板ID，标题和内容填入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;
//将内容写入编辑器
this.editorCtx = res.context;
let EContent = {
html: contentVal_1
}
this.editorCtx.setContents(EContent); //设置富文本编辑器的内容
}).exec()
},
getEditorContent(e) {/////////////////////////获取编辑器内容，当前页面都能获取到
this.contentVal = e.detail.html;
this.contentText = e.detail.text;
}
}
}
</script>
<style>
.container {
padding: 10px;
}
#editor {
width: 100%;
height: 300px;
background-color: #CCCCCC;
}
</style>
