image.png

官方文档

https://developers.weixin.qq.com/miniprogram/dev/component/editor.html

核心代码

如何获取内容

    that.editorCtx.getContents({
      success: function(res) {
        var content = {
          html: res.html,
          text: res.text,
          delta: res.delta,
        }
        that.showEditCtx.insertText(content)
      }
    })

内容格式

<p>微信小程序之扫码评分</p><p>备注说明：</p><p>① 评分规则</p><p>② 注意事项</p><p><br></p><p><br></p><p><br></p><p><br></p>

image.png

var that;

Page({
  data: {
    content: '',
    formats: {}, // 样式
    placeholder: '开始输入...',
  },
  onLoad() {
    that = this;
  },
  // 初始化编辑器
  onEditorReady() {
    wx.createSelectorQuery().select('#editor').context(function(res) {
      that.editorCtx = res.context

      if (wx.getStorageSync("content")) { // 设置~历史值
        that.editorCtx.insertText(wx.getStorageSync("content")) // 注意：插入的是对象
      }

    }).exec()
  },
  // 返回选区已设置的样式
  onStatusChange(e) {
    // console.log(e.detail)
    const formats = e.detail
    this.setData({
      formats
    })
  },
  // 内容发生改变
  onContentChange(e) {
    // console.log("内容改变")
    // console.log(e.detail)
    // that.setData({
    //   content: e.detail
    // })
    // wx.setStorageSync("content", e.detail)
  },
  // 失去焦点
  onNoFocus(e) {
    // console.log("失去焦点")
    // console.log(e.detail)
    // that.setData({
    //   content: e.detail
    // })
    // wx.setStorageSync("content", e.detail)
  },
  // 获取内容
  clickLogText(e) {
    that.editorCtx.getContents({
      success: function(res) {
        console.log(res.html)
        wx.setStorageSync("content", res.html); // 缓存本地
        // < p > 备注说明：</p > <p>1、评分规则</p> <p>2、注意事项</p> <p>3、哈哈呵呵</p> <p><br></p><p><br></p>
      }
    })
  },
  // 清空所有
  clear() {
    this.editorCtx.clear({
      success: function(res) {
        console.log("清空成功")
      }
    })
  },
  // 清除样式
  removeFormat() {
    this.editorCtx.removeFormat()
  },
  // 记录样式
  format(e) {
    let {
      name,
      value
    } = e.target.dataset
    if (!name) return
    this.editorCtx.format(name, value)
  },
})

<view class="container">

  <view class="page-body">
    <view class='wrapper'>
      <view class='toolbar' bindtap="format">
        <i class="iconfont icon-zitijiacu {{formats.bold ? 'ql-active' : ''}}" data-name="bold"></i>
        <i class="iconfont icon-zitixieti {{formats.italic ? 'ql-active' : ''}}" data-name="italic"></i>
        <i class="iconfont icon-zitixiahuaxian {{formats.underline ? 'ql-active' : ''}}" data-name="underline"></i>
        <i class="iconfont icon-clearedformat" bindtap="removeFormat"></i>
        <i class="iconfont icon-shanchu" bindtap="clear"></i>
      </view>

      <editor id="editor" class="ql-container" placeholder="{{placeholder}}" showImgSize showImgToolbar showImgResize bindstatuschange="onStatusChange" bindready="onEditorReady" bindinput="onContentChange" bindblur="onNoFocus">
      </editor>

      <view>
        <button bindtap="clickLogText">打印结果</button>
      </view>

    </view>
  </view>

</view>