終于，微信在5月9號的v2.7.0版本中新增了 editor富文本編輯器組件，今天有時間了準備體驗一下

在5月6日的時候寫了一篇小程序富文本解析的「偽需求」，從wxParse到towxml的坑,當時還在感慨官方什么時候出個比較全面的富文本組件，誰知道沒幾天就發布了editor富文本組件。

image

熟悉下文檔

首先是兼容版本，最低要求2.7.0，使用時確認下開發工具的調試基礎庫。

image

然后需要關注下目前支持的標簽，從目前公眾號排版出來的文章的樣式還是比較復雜的，總覺得目前的富文本編輯器不一定全部支持「我的猜測還是正確的」

從文檔上看目前支持的標簽數不是很多，但常用的基本都在里面了。

image

初嘗試

使用還是比較簡單的，官方的文檔已經表述的比較清楚了，直接在wxml中引入組件

<editor
  id="editor"
  class="ql-container"
  placeholder="{{placeholder}}"
  showImgSize
  showImgToolbar
  showImgResize
  bindstatuschange="onStatusChange"
  read-only="{{readOnly}}"
  bindready="onEditorReady">
</editor>

然后在js中對組件進行初始化即可。

onEditorReady() {
    const that = this
    wx.createSelectorQuery().select('#editor').context(function (res) {
      that.editorCtx = res.context
    }).exec()
  },

具體也可以直接下載官方的demo，可以直接在開發工具中運行，還是比較簡單的。

image

結合我的博客小程序

最后就想嘗試下，我的博客小程序中是否可以將towxml替換成editor,畢竟towxml太大了。

實現也比較簡單，獲取文章詳情后，利用setContents來給富文本賦值，先寫了一個簡單的demo，核心代碼如下：

  /**
   * 初始化富文本框
   */
  onEditorReady:async function() {
    const that = this
    wx.createSelectorQuery().select('#editor').context(function (res) {
      that.editorCtx = res.context
    }).exec()

    let result=await api.getPostsById('ee3099285ccee97e0ca03888750d4603')
    console.info(result.data)
    that.editorCtx.setContents({
      html:result.data.content,
      success:  (res)=> {
        console.log(res)
      },
      fail:(res)=> {
        console.log(res)
      }
    })
  },

運行后發現，一片空白，但看了日志數據已經獲取成功，調用setContents方法也是成功的。

image

首先確認下代碼是否有問題，將html賦值的地方寫死固定的字符串，運行后發現是可以渲染成功的，證明代碼應該沒問題。

在確認代碼確實無問題之后，優先想到的是開發工具是不是也要更新成最新版，檢查更新之后發現確實有最新版，于是更新了下開發工具。

可遺憾的是即使更新到最新的版本，依舊無法顯示，但神奇的是，利用手機預覽是可以渲染成功的。

image

可還是比較遺憾，渲染出來的效果不是特別理想，原因還是因為部分標簽不支持的緣故。

這里簡單看了下樣式出現問題的html代碼，比如截圖中的使用教程標題沒有居中且顏色也不是原來的紅色。

<section style="text-align: center;white-space: normal;">
    <p style="color:#f05454;" class="active brush">
        使用教程
    </p><
/section>

代碼中是使，用section標簽來進行渲染的，可目前editor應該還不支持。

同樣的，對于文章中的代碼塊的樣式渲染也不是很理想，原因與上面一樣，不支持code標簽。

總結

editor富文本編輯器還是基本能滿足需求的，但對于從第三方生成的復雜的html文本，支持的不是很完美。

就目前來看，目前還不能替換towxml組件，期待editor后續的更新吧。