layui获取select 文本_小程序富文本编辑器editor初体验
终于,微信在5月9号的
v2.7.0
版本中新增了 editor富文本编辑器组件,今天有时间了准备体验一下
在5月6日的时候写了一篇小程序富文本解析的「伪需求」,从wxParse到towxml的坑,当时还在感慨官方什么时候出个比较全面的富文本组件,谁知道没几天就发布了editor
富文本组件。
熟悉下文档
首先是兼容版本,最低要求2.7.0
,使用时确认下开发工具的调试基础库。
然后需要关注下目前支持的标签,从目前公众号排版出来的文章的样式还是比较复杂的,总觉得目前的富文本编辑器不一定全部支持「我的猜测还是正确的」
从文档上看目前支持的标签数不是很多,但常用的基本都在里面了。
初尝试
使用还是比较简单的,官方的文档已经表述的比较清楚了,直接在wxml
中引入组件
<editorid="editor"class="ql-container"placeholder="{{placeholder}}"showImgSizeshowImgToolbarshowImgResizebindstatuschange="onStatusChange"read-only="{{readOnly}}"bindready="onEditorReady">
</editor>
然后在js中对组件进行初始化即可。
onEditorReady() {const that = thiswx.createSelectorQuery().select('#editor').context(function (res) {that.editorCtx = res.context}).exec()},
具体也可以直接下载官方的demo,可以直接在开发工具中运行,还是比较简单的。
结合我的博客小程序
最后就想尝试下,我的博客小程序中是否可以将towxml
替换成editor
,毕竟towxml
太大了。
实现也比较简单,获取文章详情后,利用setContents
来给富文本赋值,先写了一个简单的demo,核心代码如下:
/*** 初始化富文本框*/onEditorReady:async function() {const that = thiswx.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
后续的更新吧。
layui获取select 文本_小程序富文本编辑器editor初体验相关推荐
- 小程序 富文本自适应屏幕_自适应文本:跨屏幕尺寸构建可读文本
小程序 富文本自适应屏幕 Many of you may already know about responsive web design. Cited from Wikipedia, respons ...
- 微信小程序富文本编辑器获取内容
1.新建wxParse文件夹 里面的结构是这样:wxParse :{ emojis (文件夹) html2json.js (文件) htmlparser.js(文件) showdown.js (文件) ...
- 小程序 html编辑器,小程序富文本编辑器editor初体验
终于,微信在5月9号的v2.7.0版本中新增了 editor富文本编辑器组件,今天有时间了准备体验一下 在5月6日的时候写了一篇小程序富文本解析的「伪需求」,从wxParse到towxml的坑,当时还 ...
- 微信小程序 富文本组件使用
能够使用微信小程序提供的富文本组件及引入的第三方富文本组件 掌握使用微信小程序的表单组件 掌握使用微信小程序的form表单及如何提交数据 掌握使用微信小程序的导航及跳转组件 一.基础内容组件 1.1 ...
- 微信小程序 富文本编辑器组件 editor
微信小程序 富文本编辑器组件 editor <view class="container"><view class="titlebox"> ...
- uni-app 富文本 小程序 富文本 (微信小程序、支付宝小程序、百度小程序)直接套用pc端富文本问题解析
微信跟百度 直接使用 u-parse组件,效果还是不错的,注意一点是a标签的复制提示语,自己需要uni.hideLoading()一下,再重置. 支付宝相对复杂一点,采用原生rich-text 标签, ...
- 小程序富文本提取图片可放大缩小
小程序富文本提取图片可放大缩小 启发: step1 step2 step3 step4 step5 最后 启发: 因为最近有需求说在小程序商品的详情页里所有图片可以放大缩小,网上好像不太好找,就写了篇 ...
- 微信小程序富文本处理
微信小程序富文本处理 wxml页面代码: <rich-text nodes ="{{content.content}}"></rich-text> ts代码 ...
- 微信小程序富文本渲染(rich-text)换行失效
微信小程序富文本渲染(rich-text)换行失效 给rich-text标签加css 样式 white-space: pre;
最新文章
- 动态调用WCF不添加服务(svcutil.exe)
- 求生之路 服务器优化参数,《求生之路2》服务器及网络参数优化指南
- [ActionScript 3.0] NetConnection建立客户端与服务器的双向连接
- C#中的DES加解密方法
- 工程数学(数值分析)第一讲:误差
- 2022牛客寒假算法基础集训营2 签到题7题
- Nginx配置文件(作为Web服务器)
- SQL 增删改查等操作
- android修改开机动画和铃声
- 联想电脑无法自动修复此计算机,Win10自动修复无法开机的解决方法(完美解决)...
- Python | 使用Socks5
- pid温度控制算法c语言程序,温度控制的PID算法的C语言程序
- 软件测试自动化面试题(含答案)
- 【Debug系列】ImportError: No module named ‘_tkinter‘
- 制作后台首页详细步骤
- IOS流媒体播放器V1.1_rtsp、rmtp、m3u8、mms、mmsh
- 自定義ListActivity(一)
- 如何将dataframe数据类型某两列合并成一列
- Android:从零开始打造自己的深度链接库(一):ARouter简介
- 无痕bu单及降低分险常规办法分享
热门文章
- python 菜鸟-python菜鸟教程
- python中文版软件下载-Python中文版下载_PyCharm官方最新版下载_3DM单机
- 学python后到底能干什么-普通小白学会Python到底具体能做什么呢?
- 线上python课程一般多少钱-培训python多少钱 ?
- python和java选择哪个-Python与Java-你首选哪个?
- python全套完整教程-Python全套教程
- python代码-我整理的Python代码规则
- NVIDIA背书-Kaldi是目前最受欢迎的开源语音识别框架
- 微信小程序开发公司哪家好?
- 用sql取a与b的交集_【庖丁解牛SQL(二)】SQL核心语法速查