终于,微信在5月9号的v2.7.0版本中新增了 editor富文本编辑器组件,今天有时间了打算感受一下

  在5月6日的时侯写了一篇小程序富文本解读的「伪需求」,从wxParse至towxml的坑,当时还在感叹官方什么时候出个比较全面的富文本组件,谁知道没几天就公布了editor富文本组件。

  熟悉下文档

  首先是兼容版本,最低要求2.7.0,使用时确认下开发工具的调试基础库。

  然后还要关注下现在支持的标签,从现在公众号排版下来的文章的款式还是比较复杂的,总认为现在的富文本编辑器不一定全部支持「我的猜想还是正确的」

  从文档上看现在支持的标签数不是这些,但常用的基本都在上面了。

  初尝试

  使用还是比较简略的,官方的文档早已叙述的比较清楚了,直接在wxml中引进组件

  <pre>

</pre>

  然后在js中对组件进行初始化即可。

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

  具体也可以直接下载官方的demo,可以直接在开发工具中运行,还是比较简略的。

  结合我的博客小程序

  最后就想尝试下,我的博客小程序中是否可以将towxml替换成editor,毕竟towxml很大了。

  实现也比较简略,获取文章详情后,利用setContents来给富文本形参,先写了一个简略的demotypecho 富文本编辑器,核心代码如下:

  <pre> /* 初始化富文本框 */ 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) } }) },
</pre>

  运行后发觉,一片空白,但看了日志数据早已获取成功,调用setContents方式只是成功的。

  截图5

  首先确认下代码是否有问题,将html形参的地方写死固定的字符串,运行后发觉是可以渲染成功的,证明代码应当没问题。

  在确认代码确实无问题以后,优先想起的是开发工具是不是也要更新成最新版,检查更新以后发觉确实有最新版,于是更新了下开发工具。

  可遗憾的是虽然更新至最新的版本,依旧未能显示,但神奇的是,利用相机预览是可以渲染成功的。

  可还是比较遗憾typecho 富文本编辑器,渲染下来的疗效不是非常理想,原因还是由于部份标签不支持的缘故。

  这里简略看了下款式出现问题的html代码,比如截图中的使用教程标题没有居中且色调也不是原先的黑色。

  <pre> <p style="color:#f05454;" class="active brush"> 使用教程

</pre></p>
  代码中是让,用section标签来进行渲染的,可现在editor应当还不支持。

  同样的,对于文章中的代码块的款式渲染也不是太理想,原因与前面一样,不支持code标签。

  总结

  editor富文本编辑器还是基本能满足需求的,但对于从第三方生成的复杂的html文本,支持的不是太完美。

  就现在来看,目前还不能替换towxml组件,期待editor后续的更新吧。

最后修改:2020 年 12 月 16 日 12 : 04 AM
如果觉得我的文章对你有用,请随意赞赏