image

核心代碼

var that;

Page({
  data: {
    content: '',
    content_html: '',
    placeholder: '開(kāi)始輸入...',
    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")) { // 設(shè)置~歷史值
        that.editorCtx.insertText(wx.getStorageSync("content")) // 注意：插入的是對(duì)象
      }
    }).exec()

  },
  // 獲取內(nèi)容
  onContentChange(e) {
    that.setData({
      content: e.detail,
    })
    wx.setStorageSync("content", e.detail)
  },
  // 顯示結(jié)果
  clickShowText(e) {
    that.setData({
      nodes: that.data.content.html,
      content_html: that.data.content.html
    })
  },
})

<view class="container">
  <view class="page-body">
    <editor id="editor" class="ql-container" placeholder="請(qǐng)輸入..." bindready="onEditorReady" bindinput="onContentChange">
    </editor>

    <view>
      <button bindtap="clickShowText">顯示結(jié)果</button>
    </view>

    <view class="show-rich">
      <rich-text nodes="{{nodes}}"></rich-text>
    </view>
  </view>
</view>

@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;
}