网上找了四五个编辑器,因为用的是uniapp的,还要自己修改,太懒了,所需直接找了兼容uniapp微信小程序的一个插件
插件下载地址
最后的效果是这样的
但是一个小程序要那么多编辑器干嘛我就删了很多 现在是这样
具体要什么自己删,样式什么自己改下简单的
主要说一下评论里的一个问题如何从后台取出的富文本插入进这里边的编辑里边 回显以及获得编辑器富文本数据
父组件
<comeditor2 @getChild1="getChild1" :Content="Content" ></comeditor2> //组件引用就不说了
//Content就是后台的富文本数据,getChild1编辑器的富文本数据
getChild1(e){
console.log(e);
},
子组件
props: { Content: String,},
<editor id="editor" show-img-size :read-only="isEdit" show-img-resize show-img-toolbar class="ql-container"
@blur="blur" @input="oninput" :placeholder="placeholder" @statuschange="onStatusChange" @ready="onEditorReady">
//照理来说 @ready 定义初始化就可以获得 模拟器上可以实现 但是上线的时候初始化有延迟,渲染时有时无
onEditorReady($event) {
// console.log(uni.createSelectorQuery().in(this).select('#editor').context)
// let that=this;
// uni.createSelectorQuery().in(that).select('#editor').context(function(res) {
// that.editorCtx = res.context;
// console.log('12' ,that.editorCtx);
// that.editorCtx.setContents({
// html:that.Content,
// })
// }).exec();
},
//于是我做了一个watch监听 讲道理(父组件上v-if应该也可以吧)做法和上面相似
//编辑器的内容 传给富文本即可
this.editorCtx.getContents({
success: function(res) {
console.log(res)
that.$emit("getChild1",res.html);
}
});
富文本传给父组件的后,提交需要注意,建议弄个定时器 提交