終于，微信在5月9號的v2.7.0版本中新增了 富文本編輯器組件，今天有時間了準備體驗一下
在5月6日的時候寫了一篇小程序富文本解析的「偽需求」，從到的坑,當時還在感慨官方什么時候出個比較全面的富文本組件富文本編輯器顯示問題，誰知道沒幾天就發布了富文本組件。
小程序富文本編輯器初體驗
熟悉下文檔
首先是兼容版本，最低要求2.7.0，使用時確認下開發工具的調試基礎庫。
小程序富文本編輯器初體驗
然后需要關注下目前支持的標簽，從目前公眾號排版出來的文章的樣式還是比較復雜的，總覺得目前的富文本編輯器不一定全部支持「我的猜測還是正確的」
從文檔上看目前支持的標簽數不是很多，但常用的基本都在里面了。
小程序富文本編輯器初體驗
初嘗試
使用還是比較簡單的，官方的文檔已經表述的比較清楚了，直接在wxml中引入組件
showImgSize
showImgToolbar
showImgResize
bindstatuschange="onStatusChange"
read-only="{{readOnly}}"
bindready="onEditorReady">
然后在js中對組件進行初始化即可。
onEditorReady()
{
const that = this
wx.createSelectorQuery().select("#editor").context(function (res)
{ that.editorCtx = res.context }).exec()
},
具體也可以直接下載官方的demo，可以直接在開發工具中運行，還是比較簡單的。
小程序富文本編輯器初體驗
結合我的博客小程序
最后就想嘗試下，我的博客小程序中是否可以將替換成,畢竟太大了。
實現也比較簡單，獲取文章詳情后富文本編輯器顯示問題，利用來給富文本賦值，先寫了一個簡單的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) } }) },
運行后發現，一片空白，但看了日志數據已經獲取成功，調用方法也是成功的。
小程序富文本編輯器初體驗
截圖5
首先確認下代碼是否有問題，將html賦值的地方寫死固定的字符串，運行后發現是可以渲染成功的，證明代碼應該沒問題。
在確認代碼確實無問題之后，優先想到的是開發工具是不是也要更新成最新版，檢查更新之后發現確實有最新版，于是更新了下開發工具。
可遺憾的是即使更新到最新的版本，依舊無法顯示，但神奇的是，利用手機預覽是可以渲染成功的。
小程序富文本編輯器初體驗
可還是比較遺憾，渲染出來的效果不是特別理想，原因還是因為部分標簽不支持的緣故。
這里簡單看了下樣式出現問題的html代碼，比如截圖中的使用教程標題沒有居中且顏色也不是原來的紅色。
使用教程
代碼中是使，用標簽來進行渲染的，可目前應該還不支持。
同樣的，對于文章中的代碼塊的樣式渲染也不是很理想，原因與上面一樣，不支持code標簽。
總結
富文本編輯器還是基本能滿足需求的，但對于從第三方生成的復雜的html文本，支持的不是很完美。
就目前來看，目前還不能替換組件，期待后續的更新吧。