微信小程序实战之实现富文本编辑器

前言

这是我参加掘金启航计划的第三篇文章，这次总结的是实现一个简单的富文本编辑器，相信阅读文章后，观众老爷们，能够实现富文本编辑器，在微信小程序中发布自己的文章，希望观众老爷们多多支持！

1. 实现效果

实现的效果如下图：

1.文本加粗、斜体、下划线，对齐方式
2.撤销、恢复、插入图片、删除功能。

2. 创建发布页面，实现基本布局

首先创建发布页面 article，在 app.json 中通过配置生成页面即可。

"pages": ["pages/article/article"] 

在 article.wxml 中，书写结构：

<view><!-- 文章类型 --><view><picker bindchange="bindPickerChange" model:value="{
  {index}}" range="{
  {array}}"><view class="picker">文章类型：{
  {objectArray[index].name}}</view></picker></view><!-- 文章标题 --><view><input name="title" class="title" placeholder="请输入文章标题" maxlength="18" model:value="{
  {title}}"></input></view><!-- 编辑区 --><view class="container"><view class="page-body"><view class='wrapper'><!-- 操作栏 --><view class='toolbar' bindtap="format"> <i class="iconfont icon-zitijiacu"></i><i class="iconfont icon-zitixieti"></i><i class="iconfont icon-zitixiahuaxian"></i><i class="iconfont icon-zuoduiqi"></i><i class="iconfont icon-juzhongduiqi"></i><i class="iconfont icon-youduiqi"></i><i class="iconfont icon-undo"></i><i class="iconfont icon-redo"></i> <i class="iconfont icon-charutupian"></i><i class="iconfont icon-shanchu"></i></view><!-- 文章内容区，富文本编辑器 --><editor id="editor" class="ql-container" placeholder="{
  {placeholder}}"showImgSize showImgToolbar showImgResize></editor><!-- 发布按钮 --><view class="button