微信小程序官方富文本编辑器editor

通过 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