微信小程序富文本编辑器 editor 组件源码

 <view class="container">   <form bindsubmit="submitBlog">      <view class="form-group form-column">       <view class="toolbar" catchtouchend="format">         <i class="iconfont icon-charutupian" catchtouchend="insertImage"></i>         <i class="iconfont icon-format-header-2 { 
        {formats.header === 2 ? 'ql-active' : ''}}" data-name="header" data-value="{ 
        {2}}"></i>         <i class="iconfont icon-format-header-3 { 
        {formats.header === 3 ? 'ql-active' : ''}}" data-name="header" data-value="{ 
        {3}}"></i>         <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--checklist" data-name="list" data-value="check"></i>
        <i class="iconfont icon-youxupailie { 
        {formats.list === 'ordered' ? 'ql-active' : ''}}" data-name="list" data-value="ordered"></i>
        <i class="iconfont icon-wuxupailie { 
        {formats.list === 'bullet' ? 'ql-active' : ''}}" data-name="list" data-value="bullet"></i>
      </view>
      <editor id="contentEditor" bindready="onEditorReady" class="form-editor"></editor>
    </view>

    <view style="margin-top:30rpx;margin-bottom:60rpx;">
      <button type="primary" form-type="submit">提交</button>
    </view>

    <!--展示-->
    <rich-text nodes="{ 
        {blogContent}}"></rich-text>
    
  </form>
</view>

// index.js
/** * 技术交流群：325025375 * 我的公众号：祁大聪 */
const app = getApp()

Page({ 
        
  data: { 
        

  },

  //提交数据
  submitBlog:function(e){ 
        
    //获取富文本编辑器里的内容
    this.editorContext.getContents({ 
        
      success:res=>{ 
        
        console.log(res)//有html和纯文本
        
        this.setData({ 
        
          blogContent:res.html
        })
      }
    })
  },

  //富文本编辑器初始化
  onEditorReady: function (e) { 
        
    wx.createSelectorQuery().select("#contentEditor").context(res => { 
        
      this.editorContext = res.context
    }).exec()
  },

  //富文本处理
  format: function (e) { 
        
    let { 
        
      name,
      value
    } = e.target.dataset
    if (!name) return
    this.editorContext.format(name, value)
  },

  //插入图片
  insertImage: function (e) { 
        
    wx.chooseImage({ 
        
      count: 1,
      success: res=> { 
        
        this.editorContext.insertImage({ 
        
          src: res.tempFilePaths[0], //可以换成云函数的 fileid
          data: { 
        
            id: 'myImg'
          },
          width: '80%',
          success: function () { 
        
            console.log('insert image success')
          }
        })
      }
    })
  }
})