image.png

官方文檔

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

核心代碼

如何獲取內(nèi)容

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

內(nèi)容格式

<p>微信小程序之掃碼評分</p><p>備注說明：</p><p>① 評分規(guī)則</p><p>② 注意事項(xiàng)</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")) { // 設(shè)置~歷史值
        that.editorCtx.insertText(wx.getStorageSync("content")) // 注意：插入的是對象
      }

    }).exec()
  },
  // 返回選區(qū)已設(shè)置的樣式
  onStatusChange(e) {
    // console.log(e.detail)
    const formats = e.detail
    this.setData({
      formats
    })
  },
  // 內(nèi)容發(fā)生改變
  onContentChange(e) {
    // console.log("內(nèi)容改變")
    // console.log(e.detail)
    // that.setData({
    //   content: e.detail
    // })
    // wx.setStorageSync("content", e.detail)
  },
  // 失去焦點(diǎn)
  onNoFocus(e) {
    // console.log("失去焦點(diǎn)")
    // console.log(e.detail)
    // that.setData({
    //   content: e.detail
    // })
    // wx.setStorageSync("content", e.detail)
  },
  // 獲取內(nèi)容
  clickLogText(e) {
    that.editorCtx.getContents({
      success: function(res) {
        console.log(res.html)
        wx.setStorageSync("content", res.html); // 緩存本地
        // < p > 備注說明：</p > <p>1、評分規(guī)則</p> <p>2、注意事項(xiàng)</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">打印結(jié)果</button>
      </view>

    </view>
  </view>

</view>