通过 id 跟一个 editor 组件绑定,操作对应的 editor 组件
Step 1:通过 id 跟一个 editor 组件绑定
wxml
<view class="container" style="height:{{editorHeight}}px;">
//下面本来是一行,为了观看换为多行
<editor id="editor"
class="ql-container"
placeholder="{{placeholder}}"
bindstatuschange="onStatusChange"
bindblur="bindblur"
bindready="onEditorReady" //⬅⬅⬅⬅ 就是这个
value="{{content}}"
>
</editor>
</view>
Step 2:过 id 跟一个 editor 组件绑定,操作对应的 editor 组件
js
bindready="onEditorReady"
onEditorReady() {
const that = this
wx.createSelectorQuery().select('#editor').context(function(res) {
that.editorCtx = res.context
that.editorCtx.setContents({
html:that.data.content //这里就是设置默认值的地方(html 后面给什么就显示什么)
//that.data.content 是我存在 data 里面的数据
//注意是 this 赋值的 that,如果用 this 就把上面的 function 改成箭头函数
});
}).exec()
},
/**
* 获取富文本内容
*/
getContent: function () {
let that = this
return new Promise((resolve, rej) => {
that.editorCtx.getContents({
success: (res) => {
console.log("res" + res)
var jsonstr = JSON.stringify(res)
console.log("res jsonstr==" + jsonstr)
resolve(res.html)
},
fail: res => {
console.log("请求失败")
}
})
})
},
output
res jsonstr=={"errMsg":"ok","html":"<p>9999</p>","text":"9999\n","delta":{"ops":[{"insert":"9999\n"}]}}
https://developers.weixin.qq.com/miniprogram/dev/component/editor.html
https://developers.weixin.qq.com/miniprogram/dev/api/media/editor/EditorContext.html
How to use
https://blog.csdn.net/XH_jing/article/details/115509316
https://developers.weixin.qq.com/community/develop/article/doc/000e2667890ee0284598518f65bc13