小程序开发笔记（二）：微信小程序富文本编辑器editor的使用

小程序在去年5月的 v2.7.0 版本新增了组件editor富文本编辑器，但对于像我这种开发新手，要熟练使用还是有一定难度。所以记录一下我的学习过程，希望对大家有帮助。
小程序有详细的微信开发文档，所以对于开发新手，我建议不要一味的复制别人的博客代码，一定要学看和使用开发文档。
首先熟悉一下开发文档关于editor富文本编辑器的内容。

基础库低于2.7.0要做兼容处理。
官方推荐用delta解析插入内容。

下面是组件使用过程：(可参照官方的示例代码)

wxml引入组件（看开发文档的属性）

//富文本编辑器组件引用
<editor id="editor" class="ql-container" placeholder="富文本编辑器" bindstatuschange="onStatusChange"bindready="onEditorReady">
</editor>
//创建按钮，触发获取富文本编辑器内容
<view class="action text-green" bindtap="getContent">发表</view>

2.js初始化富文本编辑器

//初始化富文本编辑器onEditorReady() {const that = thisconst query = wx.createSelectorQuery()//创建节点查询器query.in(that).select('#editor').context()//选择id=editor的节点，获取节点内容信息query.exec(function(res){that.editorCtx = res.contextconsole.log(res.context);})}

3.获取编辑器内容（查看开发文档EditorContext）

//获取编辑器输入的内容
getContent() {const that = thisthat.editorCtx.getContents({success: function (res) {   console.log(res.detla)}.fail: function (error){console.log(error)}

注意：查看EditorContext.getContents(Object object)，success返回参数如下，所以res不是res.data, 可以是res.html 、res.text、res.delta，官方文档推荐使用delta, 所以这里选择delta, 在数据库也保存的是delta对象。

4.显示delta对象。
前面我们将delta对象转换为字符串存入数据库，在显示时将delta对象取出显示，查看EditorContext.getContents(Object object)。
wxml

//同样引入富文本编辑器组件editor,并将其设置为只读read-only<editor id="content" class="ql-container1" read-only="true"></editor>

 onLoad: function (options) {let that = this//content是从数据库获取的数据里的delta字符串，然后装换为jsonvar content = JSON.parse(that.data.contentInfo.content)var query = wx.createSelectorQuery();//创建节点查询器 query.in(that).select('#content').context(function (res) {res.context.setContents({delta: content,success: function (res) {// console.log(res.data)},fail: function (error) {console.log(error)}})}).exec()
}

这样，便完成了编辑器组件的引用以及编辑器内容的显示了。
当然编辑器里还需进行其他功能设置，如插入图片、设置样式、清空编辑器等，这些均可根据开发文档的editor与EditorContext，按照上面进行编写。可参考官方的demo。图片插入上传可看本博客下一篇文章。

小程序开发笔记（二）：微信小程序富文本编辑器editor的使用相关推荐

微信小程序开发笔记二（WXSS和CSS样式美化）
微信小程序开发笔记二(WXSS和CSS样式美化) 一.CSS基本知识 1.Class选择器的定义 2.ID选择器的定义 3.ID选择器和class选择器的区别 4.CSS中设置颜色 5.CSS中的文本 ...
小程序（二十五）微信小程序富文本编辑器editor上传图片
官方给出的示例代码中图片上传功能是将图片上传至小程序的缓存中,代码如下所示: insertImage(e) {console.log(e);const that = thiswx.chooseImag ...
小程序 html编辑器,小程序富文本编辑器editor初体验
终于,微信在5月9号的v2.7.0版本中新增了 editor富文本编辑器组件,今天有时间了准备体验一下在5月6日的时候写了一篇小程序富文本解析的「伪需求」,从wxParse到towxml的坑,当时还 ...
android前端代码编辑器,前端程序员福利，6款轻量级富文本编辑器
原标题:前端程序员福利,6款轻量级富文本编辑器 1.国产富文本编辑wangEditor 基于java和css开发的 Web富文本编辑器, 轻量.简洁.易用.开源免费,样式可自定义,菜单栏可以自定义配置 ...
php+仿微信公众号样式,仿微信公众号富文本编辑器
微信公众号富文本编辑器使用百度ueditor插件为基础加以封装百度ueditor配置提供替换皮肤,只要添加相应的样式即可(码云代码链接) TIM截图20190404150153.png 以下处理富文 ...
微信小程序富文本编辑器editor初体验-图片上传
https://developers.weixin.qq.com/miniprogram/dev/component/editor.html 以前没有小程序富文本编辑器,只能输入文字,图片上传后,在服 ...
layui获取select 文本_小程序富文本编辑器editor初体验
终于,微信在5月9号的v2.7.0版本中新增了 editor富文本编辑器组件,今天有时间了准备体验一下在5月6日的时候写了一篇小程序富文本解析的「伪需求」,从wxParse到towxml的坑,当时还 ...
html实现富文本编辑器,前端程序员福利，6款轻量级富文本编辑器，轻松实现富文本编辑...
1.国产富文本编辑wangEditor 基于javascript跟css开发的 Web富文本编辑器, 轻量.简洁.易用.开源免费,样式可自定义typecho 富文本编辑器,菜单栏可以自定义配置. 下载 ...
微信小程序开发笔记二—底部导航栏tabar
文章目录一.实现效果二.实现方法 1.准备图标 2.app.json文件添加新页面 3.app.json中添加tabar组件三.注意事项一.实现效果首先展示一下实现效果底部导航栏有三个按键 ...

小程序开发笔记（二）：微信小程序富文本编辑器editor的使用

小程序开发笔记（二）：微信小程序富文本编辑器editor的使用相关推荐

最新文章

热门文章