这是我参加掘金启航计划的第三篇文章，这次总结的是实现一个简单的富文本编辑器，相信阅读文章后，观众老爷们，能够实现富文本编辑器，在微信小程序中发布自己的文章，希望观
|
这是我参加掘金启航计划的第三篇文章，这次总结的是实现一个简单的富文本编辑器，相信阅读文章后，观众老爷们，能够实现富文本编辑器，在微信小程序中发布自己的文章，希望观众老爷们多多支持 1. 实现效果实现的效果如下图：
实现的功能点如下：
2. 创建发布页面，实现基本布局首先创建发布页面 article，在 app.json 中通过配置生成页面即可。
在 article.wxml 中，书写结构：
在 article.wxss，书写基本的样式：
这时我们会发现中间的操作栏图标不显示，我们需要在 article.wxss 中头部引入 iconfont.wxss 字体图标。 iconfont.wxss 文件获取地址
3. 实现编辑区操作栏的功能本文只实现操作栏的功能，实现富文本编辑，其他文章类型的选择，请自行实现，不难哦！
首先，我们需要获取富文本编辑器实例 EditorContext，通过 wx.createSelectorQuery 获取，我们在页面 Page函数中，创建 onEditorReady 函数，用于获取该实例：
然后将该方法绑定到富文本编辑器的 bindready 属性上，随着富文本编辑器初始化完成后触发，从而获取实例。
3.1. 实现文本加粗、斜体、文本下划线、左对齐、居中对齐、右对齐
我们如何修改文本的样式呢？
通过查阅微信小程序开发文档可知，实现上述功能，我们需要的 name 和 value的值为：
Page 函数中的 format 函数：
通过查阅 editor 微信小程序开发相关文档后，bindstatuschange 属性绑定的方法，会在当你通过 Context 方法改变编辑器内样式时触发，会返回选区已设置的样式。 那么我们可以在 data 中，添加 formats 对象，存储点击后的样式属性。然后在点击图标按钮时，通过 bindstatuschange 绑定的方法，得到已设置的样式存储到 formats 中；在模板渲染时，在<i> 的 class 属性上，添加 {{formats.align === 'right' ? 'ql-active' : ''}}(如文本向右)，当你点击了这个图标，那么 formats 中就有这个属性了，那么就添加我们的动态类名 ql-active 改变图标颜色。 具体实现
3.2. 实现撤销、恢复、插入图片、删除操作
首先在 <i> 标签上绑定相应的事件：
撤销 undo 调用 EditorContext API 即可
恢复 redo 同理
插入图片 insertImage 同理
清空 clear 同理
4. 参考editor | 微信开放文档 (qq.com) |
2021-06-04
2019-01-10
2019-02-17
2021-09-12
2021-09-30
