需求,简单的复制文字、有格式 ,能从别的地方复制文案过来,有格式化展示即可,要求高的可以去插件市场看看。
可以直接复制允许!!!! 前提是在项目里!!!
<template>
<view class="container">
<view class="editor-wrapper">
<editor id="editor" class="ql-container" placeholder="开始输入..." show-img-size show-img-toolbar
show-img-resize @ready="onEditorReady" @input="onEditorInput">
</editor>
</view>
</view>
</template>
<script>
export default {
data() {
return {
editorCtx: null,
isDataLoad: false, //仅初始化 加载时使用,例如编辑
}
},
onLoad() {
this.loadActivityDetail()
},
methods: {
onEditorReady() {
uni.createSelectorQuery().select('#editor').context((res) => {
console.log('===>', res)
this.editorCtx = res.context
// 初始化测试 假的
this.editorCtx.setContents({
html: 'zouni~~~'
})
}).exec()
},
onEditorInput(e) {
this.editorContext = e.detail.html
// console.log('编辑器内容发生变化:', e.detail.html);
},
// 初始化 走接口加载数据
setEditorContents() {
if (this.isDataLoad) {
this.editorCtx.setContents({
html: this.editorContext, //editorContext 后台返回的数据
success: res => {}
})
} else {
// isDataLoad false 就一直调用,因为我这边内容一定有,没有可以不用
setTimeout(() => {
this.setEditorContents()
}, 200)
}
},
async loadActivityDetail(activityId) {
await this.$u.api
.activityDetail(activityId)
.then((res) => {
this.editorContext = res.data.description
this.isDataLoad = true
// 调用更新 富文本内容 初始化
this.setEditorContents()
})
.catch((err) => {
console.log(err);
});
},
}
}
</script>