小程序富文本编辑器editor初体验

栏目: IOS · Android · 发布时间: 4年前

内容简介:终于,微信在5月9号的在5月6日的时候写了一篇

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

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

小程序富文本编辑器editor初体验

熟悉下文档

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

小程序富文本编辑器editor初体验

然后需要关注下目前支持的标签,从目前公众号排版出来的文章的样式还是比较复杂的,总觉得目前的富文本编辑器不一定全部支持「我的猜测还是正确的」

从文档上看目前支持的标签数不是很多,但常用的基本都在里面了。

小程序富文本编辑器editor初体验

初尝试

使用还是比较简单的,官方的文档已经表述的比较清楚了,直接在 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,可以直接在开发工具中运行,还是比较简单的。

小程序富文本编辑器editor初体验

结合我的博客小程序

最后就想尝试下,我的博客小程序中是否可以将 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 方法也是成功的。

小程序富文本编辑器editor初体验

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

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

可遗憾的是即使更新到最新的版本,依旧无法显示,但神奇的是,利用手机预览是可以渲染成功的。

小程序富文本编辑器editor初体验

可还是比较遗憾,渲染出来的效果不是特别理想,原因还是因为部分标签不支持的缘故。

这里简单看了下样式出现问题的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 后续的更新吧。


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

订阅

订阅

[美] 罗伯特·金奇尔、马尼·佩伊万 / 中信出版集团 / 2018-12 / 68.00元

数据显示,年轻人现在每天看视频的时间已经超过电视。YouTube 平台每天的视频观看总时长超过10亿小时,这个数字还在增长。数字视频牢牢占据着人们的注意力。 数字时代如何实现创意变现?视频平台如何提升自己的品牌认知和广告号召力?想要在这个庞大的媒体生态中占据流量入口,你需要先了解 YouTube。在过去的10年里,互联网视频平台 YouTube 已经像60多年前的电影、广播和电视的发明一样,......一起来看看 《订阅》 这本书的介绍吧!

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具