微信小程序之富文本编辑组件editor结合RichText进行显示

image

核心代码

var that;

Page({
  data: {
    content: '',
    content_html: '',
    placeholder: '开始输入...',
    isReadOnly: false,
    nodes: [{
      name: 'div',
      attrs: {
        class: 'div_class',
        style: 'line-height: 60px; color: red;'
      },
      children: [{
        type: 'text',
        text: 'RichText组件'
      }]
    }]
  },
  onLoad() {
    that = this;
  },
  onEditorReady() {
    // 输入~编辑框
    wx.createSelectorQuery().select('#editor').context(function(res) {
      that.editorCtx = res.context;
      console.log("初始化成功：" + wx.getStorageSync("content"))
      if (wx.getStorageSync("content")) { // 设置~历史值
        that.editorCtx.insertText(wx.getStorageSync("content")) // 注意：插入的是对象
      }
    }).exec()

  },
  // 获取内容
  onContentChange(e) {
    that.setData({
      content: e.detail,
    })
    wx.setStorageSync("content", e.detail)
  },
  // 显示结果
  clickShowText(e) {
    that.setData({
      nodes: that.data.content.html,
      content_html: that.data.content.html
    })
  },
})

  
    
    

    
      显示结果
    

    
      
    
  

@import "../common/lib/weui.wxss";
@import "./assets/iconfont.wxss";

.ql-container {
  box-sizing: border-box;
  padding: 12px 15px;
  width: 100%;
  min-height: 30vh;
  height: 20px;
  background: #fff;
  margin-top: 20px;
  font-size: 14px;
  line-height: 1.5;
}

.ql-container2 {
  box-sizing: border-box;
  padding: 12px 15px;
  width: 100%;
  /* min-height: 30vh; */
  height: auto;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  background: #fff;
  margin-top: 20px;
  font-size: 14px;
  line-height: 1.5;
}

.ql-active {
  color: #06c;
}

.show-rich {
  padding: 12px 15px;
  width: 100%;
  margin-top: 20px;
  font-size: 14px;
  line-height: 1.5;
}