微信小程序之富文本编辑组件editor的简单使用

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)
      }
    })

内容格式

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

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 > 备注说明：
 
1、评分规则
 
2、注意事项
 
3、哈哈呵呵
 



      }
    })
  },
  // 清空所有
  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)
  },
})

  
    
      
        
        
        
        
        
      

      
      

      
        打印结果