終于唠梨，微信在5月9號(hào)的
v2.7.0版本中新增了 editor富文本編輯器組件卤唉，今天有時(shí)間了準(zhǔn)備體驗(yàn)一下
在5月6日的時(shí)候?qū)懥艘黄?a target="_blank">小程序富文本解析的「?jìng)涡枨蟆乖し撸瑥膚xParse到towxml的坑,當(dāng)時(shí)還在感慨官方什么時(shí)候出個(gè)比較全面的富文本組件崭捍，誰(shuí)知道沒(méi)幾天就發(fā)布了editor富文本組件构哺。
熟悉下文檔
首先是兼容版本捡絮，最低要求2.7.0熬芜，使用時(shí)確認(rèn)下開(kāi)發(fā)工具的調(diào)試基礎(chǔ)庫(kù)。
然后需要關(guān)注下目前支持的標(biāo)簽福稳，從目前公眾號(hào)排版出來(lái)的文章的樣式還是比較復(fù)雜的涎拉，總覺(jué)得目前的富文本編輯器不一定全部支持「我的猜測(cè)還是正確的」
從文檔上看目前支持的標(biāo)簽數(shù)不是很多，但常用的基本都在里面了的圆。
初嘗試
使用還是比較簡(jiǎn)單的鼓拧，官方的文檔已經(jīng)表述的比較清楚了，直接在wxml中引入組件
<editor
id="editor"
class="ql-container"
placeholder="{{placeholder}}"
showImgSize
showImgToolbar
showImgResize
bindstatuschange="onStatusChange"
read-only="{{readOnly}}"
bindready="onEditorReady">
</editor>
然后在js中對(duì)組件進(jìn)行初始化即可越妈。
onEditorReady() {
const that = this
wx.createSelectorQuery().select('#editor').context(function (res) {
that.editorCtx = res.context
}).exec()
},
具體也可以直接下載官方的demo季俩，可以直接在開(kāi)發(fā)工具中運(yùn)行，還是比較簡(jiǎn)單的梅掠。
結(jié)合我的博客小程序
最后就想嘗試下酌住，我的博客小程序中是否可以將towxml替換成editor,畢竟towxml太大了。
實(shí)現(xiàn)也比較簡(jiǎn)單阎抒，獲取文章詳情后酪我，利用setContents來(lái)給富文本賦值，先寫了一個(gè)簡(jiǎn)單的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)
}
})
},
運(yùn)行后發(fā)現(xiàn)都哭，一片空白，但看了日志數(shù)據(jù)已經(jīng)獲取成功，調(diào)用setContents方法也是成功的欺矫。
首先確認(rèn)下代碼是否有問(wèn)題纱新，將html賦值的地方寫死固定的字符串，運(yùn)行后發(fā)現(xiàn)是可以渲染成功的穆趴，證明代碼應(yīng)該沒(méi)問(wèn)題脸爱。
在確認(rèn)代碼確實(shí)無(wú)問(wèn)題之后，優(yōu)先想到的是開(kāi)發(fā)工具是不是也要更新成最新版毡代，檢查更新之后發(fā)現(xiàn)確實(shí)有最新版阅羹，于是更新了下開(kāi)發(fā)工具。
可遺憾的是即使更新到最新的版本教寂，依舊無(wú)法顯示，但神奇的是执庐，利用手機(jī)預(yù)覽是可以渲染成功的酪耕。
可還是比較遺憾，渲染出來(lái)的效果不是特別理想轨淌，原因還是因?yàn)椴糠謽?biāo)簽不支持的緣故迂烁。
這里簡(jiǎn)單看了下樣式出現(xiàn)問(wèn)題的html代碼，比如截圖中的使用教程標(biāo)題沒(méi)有居中且顏色也不是原來(lái)的紅色递鹉。
<section style="text-align: center;white-space: normal;">
<p style="color:#f05454;" class="active brush">
使用教程
</p><
/section>
代碼中是使盟步，用section標(biāo)簽來(lái)進(jìn)行渲染的，可目前editor應(yīng)該還不支持躏结。
同樣的却盘，對(duì)于文章中的代碼塊的樣式渲染也不是很理想，原因與上面一樣媳拴，不支持code標(biāo)簽黄橘。
總結(jié)
editor富文本編輯器還是基本能滿足需求的，但對(duì)于從第三方生成的復(fù)雜的html文本屈溉，支持的不是很完美塞关。
就目前來(lái)看，目前還不能替換towxml組件子巾，期待editor后續(xù)的更新吧帆赢。
