终于，微信在5月9号的
v2.7.0版本中新增了 editor富文本编辑器组件，今天有时间了准备体验一下
在5月6日的时候写了一篇小程序富文本解析的「伪需求」，从wxParse到towxml的坑,当时还在感慨官方什么时候出个比较全面的富文本组件，谁知道没几天就发布了editor富文本组件。
熟悉下文档
首先是兼容版本，最低要求2.7.0，使用时确认下开发工具的调试基础库。
然后需要关注下目前支持的标签，从目前公众号排版出来的文章的样式还是比较复杂的，总觉得目前的富文本编辑器不一定全部支持「我的猜测还是正确的」
从文档上看目前支持的标签数不是很多，但常用的基本都在里面了。
初尝试
使用还是比较简单的，官方的文档已经表述的比较清楚了，直接在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，可以直接在开发工具中运行，还是比较简单的。
结合我的博客小程序
最后就想尝试下，我的博客小程序中是否可以将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方法也是成功的。
首先确认下代码是否有问题，将html赋值的地方写死固定的字符串，运行后发现是可以渲染成功的，证明代码应该没问题。
在确认代码确实无问题之后，优先想到的是开发工具是不是也要更新成最新版，检查更新之后发现确实有最新版，于是更新了下开发工具。
可遗憾的是即使更新到最新的版本，依旧无法显示，但神奇的是，利用手机预览是可以渲染成功的。
可还是比较遗憾，渲染出来的效果不是特别理想，原因还是因为部分标签不支持的缘故。
这里简单看了下样式出现问题的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后续的更新吧。
Ps.关注公众号「Bug生活2048」回复「博客小程序」获取源码哦～
