内容简介:终于,微信在5月9号的在5月6日的时候写了一篇
终于,微信在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
后续的更新吧。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 10个最佳富文本编辑器
- Notepad++ 7.7 发布,文本编辑器
- 文本编辑器 Notepad++ 7.8.1 发布
- Emacs 25.3 发布,Linux 文本编辑器
- GNU nano 5.0 发布,文本编辑器
- SubEthaEdit 5.2 发布,macOS 文本编辑器
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
React Native开发指南
[美]艾森曼 / 黄为伟 / 人民邮电出版社 / 2016-6-1 / CNY 59.00
本书通过丰富的示例和详细的讲解,介绍了React Native这款JavaScript框架。在React Native中利用现有的JavaScript和React知识,就可以开发和部署功能完备的、真正原生的移动应用,并同时支持iOS与Android平台。除了框架本身的概念讲解之外,本书还讨论了如何使用第三方库,以及如何编写自己的Java或Objective-C的React Native扩展。一起来看看 《React Native开发指南》 这本书的介绍吧!