微信小程序使用富文本编辑器

1. wxml引入组件（看开发文档的属性）

//富文本编辑器组件引用
<editor id="editor" 
		class="ql-container" 
		placeholder="富文本编辑器" 
		bindstatuschange="onStatusChange"
		 bindready="onEditorReady">
</editor>
//创建按钮，触发获取富文本编辑器内容
<view class="action text-green" bindtap="getContent">发表</view>

2.js初始化富文本编辑器

//初始化富文本编辑器
 onEditorReady() { 
  const that = this
  const query = wx.createSelectorQuery()//创建节点查询器
  query.in(that).select('#editor').context()//选择id=editor的节点，获取节点内容信息
  query.exec(function(res){ 
      that.editorCtx = res.context
      console.log(res.context);
    })
 }

3.获取编辑器内容（查看开发文档EditorContext）

//获取编辑器输入的内容
getContent() { 
  const that = this
  that.editorCtx.getContents({ 
    success: function (res) {    
    	console.log(res.detla)
    }.
    fail: function (error){ 
    	console.log(error)
    }

注意：查看EditorContext.getContents(Object object)，success返回参数如下，所以res不是res.data, 可以是res.html 、res.text、res.delta，官方文档推荐使用delta, 所以这里选择delta, 在数据库也保存的是delta对象。

4.显示delta对象。
前面我们将delta对象转换为字符串存入数据库，在显示时将delta对象取出显示，查看EditorContext.getContents(Object object)。
wxml

//同样引入富文本编辑器组件editor,并将其设置为只读read-only
 <editor id="content" class="ql-container1" read-only="true">
        </editor>

js

 onLoad: function (options) { 
  let that = this
  //content是从数据库获取的数据里的delta字符串，然后装换为json
  var content = JSON.parse(that.data.contentInfo.content)
  var query = wx.createSelectorQuery();//创建节点查询器 
  query.in(that).select('#content').context(function (res) { 
    res.context.setContents({ 
       delta: content,
       success: function (res) { 
         // console.log(res.data)
       },
       fail: function (error) { 
         console.log(error)
       }
     })
   }).exec()
}

这样，便完成了编辑器组件的引用以及编辑器内容的显示了。
当然编辑器里还需进行其他功能设置，如插入图片、设置样式、清空编辑器等，这些均可根据开发文档的editor与EditorContext，按照上面进行编写。可参考官方的demo。图片插入上传可看本博客下一篇文章。

这篇好文章是转载于：学新通技术网