小程序富文本editor組件使用及初始化內容

小程序editor組件使用及內容回顯（初始化編輯器內容）

結合官網的 editor組件 和 相關API 可以更好的理解

先看效果圖

<view class="toolbar" catchtouchend="format">
  <i class="iconfont icon-format-header-1 {
    
    {formats.header === 1 ? 'ql-active' : ''}}" data-name="header" data-value="{
    
    {1}}"></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-format-header-4 {
    
    {formats.header === 4 ? 'ql-active' : ''}}" data-name="header" data-value="{
    
    {4}}"></i>
  <i class="iconfont icon-format-header-5 {
    
    {formats.header === 5 ? 'ql-active' : ''}}" data-name="header" data-value="{
    
    {5}}"></i>
  <i class="iconfont icon-format-header-6 {
    
    {formats.header === 6 ? 'ql-active' : ''}}" data-name="header" data-value="{
    
    {6}}"></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>
  <i class="iconfont icon-fontsize {
    
    {formats.fontSize === '24px' ? 'ql-active' : ''}}" data-name="fontSize" data-value="24px"></i>
  <i class="iconfont icon-text_color {
    
    {formats.color === '#0000ff' ? 'ql-active' : ''}}" data-name="color" data-value="#0000ff"></i>
  <i class="iconfont icon-fontbgcolor {
    
    {formats.backgroundColor === '#E33D1E' ? 'ql-active' : ''}}" data-name="backgroundColor" data-value="#E33D1E"></i>
  <i class="iconfont icon-indent" data-name="indent" data-value="+1"></i>
  <i class="iconfont icon-outdent" data-name="indent" data-value="-1"></i>
  <i class="iconfont icon-juzhongduiqi {
    
    {formats.align === 'center' ? 'ql-active' : ''}}" data-name="align" data-value="center"></i>
  <i class="iconfont icon-youduiqi {
    
    {formats.align === 'right' ? 'ql-active' : ''}}" data-name="align" data-value="right"></i>
  <i class="iconfont icon-zuoduiqi {
    
    {formats.align === 'left' ? 'ql-active' : ''}}" data-name="align" data-value="left"></i>
  <i class="iconfont icon-zitixiabiao {
    
    {formats.script === 'sub' ? 'ql-active' : ''}}" data-name="script" data-value="sub"></i>
  <i class="iconfont icon-zitishangbiao {
    
    {formats.script === 'super' ? 'ql-active' : ''}}" data-name="script" data-value="super"></i>
  <i class="iconfont icon-zitiyanse {
    
    {formats.color === '#e33d1e' ? 'ql-active' : ''}}" data-name="color" data-value="#e33d1e"></i>
  <i class="iconfont icon-undo" bindtap="undo"></i>
  <i class="iconfont icon-redo" bindtap="redo"></i>
  <i class="iconfont icon-date" bindtap="insertDate"></i>
  <i class="iconfont icon-clearup" bindtap="clear"></i>
</view>
<view class="" style="height:{
      
      {
      
      editorHeight}}px;">
  <editor id="editor" class="ql-container" placeholder="開始輸入..." bindstatuschange="onStatusChange" bindready="onEditorReady" bindblur="blur" show-img-toolbar show-img-resize>
  </editor>
</view>

<view class="insertImg bg_white flex_yC" catchtouchend="insertImage">
  <i class="iconfont icon-charutupian"></i>
  插入圖片
</view>

<view class="save bg_white flex_xy_center" style="height: {
      
      {
      
      btnHeight}}px;" bindtap="tapSave">完成</view>

引入css，weui.wxss和iconfont.wxss自行在官網下載即可

@import "../../../common/weui.wxss";
@import "../../../common/iconfont.wxss";
.ql-container {
   
   
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  font-size: 16px;
  line-height: 1.5;
  overflow: auto;
  padding: 10px 10px 20px 10px;
  border: 1px solid #ECECEC;
}
.ql-active {
   
   
  color: #22C704;
}
.iconfont {
   
   
  display: inline-block;
  width: 30px;
  height: 30px;
  text-align: center;
  cursor: pointer;
  font-size: 20px;
}
.toolbar {
   
   
  box-sizing: border-box;
  padding: 5px 10px;
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  border: 1px solid #ECECEC;
}
.insertImg{
   
   
  font-size: 26rpx;
  padding: 8rpx 30rpx 8rpx 25rpx;
  border-radius: 40rpx;
  position: fixed;
  top: 70vh;
  right: 20rpx;
  box-shadow: 0 5rpx 17rpx 0 rgba(0, 0, 0, 0.06);
}
.save{
   
   
  width: 100%;
  color: blue;
}

js模塊

data: {
   
   
    formats: {
   
   },
    readOnly: false,
    editorHeight: 300,  // 編輯器的高度
    btnHeight: 50, // 底部按鈕高度
    isIOS: false,
    html: ''
  },

  redo(){
   
   // 恢復
    this.editorCtx.redo()
  },
  undo(){
   
   // 撤銷
    this.editorCtx.undo()
  },
  clear() {
   
   // 清空編輯器內容
    this.editorCtx.clear({
   
   
      success: function (res) {
   
   
        console.log("clear success")
      }
    })
  },
  insertImage() {
   
   // 插入圖片
    const that = this
    wx.chooseImage({
   
   
      count: 1,
      success: function (res) {
   
   
        // 在這裏上傳到服務器
        that.editorCtx.insertImage({
   
   
          src: res.tempFilePaths[0],
          extClass: 'edit_img',
          width: '80%',
          success: function () {
   
   
            console.log('insert image success')
          }
        })
      }
    })
  },
  onLoad(option) {
   
   
	const platform = wx.getSystemInfoSync().platform
	const isIOS = platform === 'ios'
	console.log(333, option)
	wx.createSelectorQuery().select('.toolbar').boundingClientRect(rect=>{
   
   
	  let height = rect.height
	  const {
   
    windowHeight } = wx.getSystemInfoSync()
	  console.log('工具欄高度=', height)
	  this.setData({
   
    
	    isIOS,
	    editorHeight: windowHeight - height - this.data.btnHeight
	  })
	}).exec();
	if(!option.html) return
	const html = option.html.replace(/\+/g, '=')  // 上個頁面把 = 轉換成了 + ，現在恢復 = 
	this.setData({
   
    html })
  },
  // 初始化編輯器
  onEditorReady() {
   
   
    const that = this
    wx.createSelectorQuery().select('#editor').context(function (res) {
   
   
      that.editorCtx = res.context
      wx.pageScrollTo({
   
   
        scrollTop: 0,
        success: () => {
   
   
          that.editorCtx.scrollIntoView()
        }
      })
      if(!res || !that.data.html) return
      that.editorCtx.setContents({
   
   
        html: that.data.html,
        success: result => {
   
   
          console.log('初始化內容成功 ', result)
        },
        fail: err => {
   
   
          console.log('初始化內容失敗 ', err)
        }
      })
    }).exec()
  },

最後，如果這篇文章解決了您的問題請給個贊，歡迎大家評論及提出更好的建議