先上效果图

主要用到小程序 editor 组件和EditorContext的API，其中关键的是EditorContext.format方法

前期准备

1. 首页要想好富文本编辑器需要支持哪些标签和样式
2. 然后找好对应的图标,可以去 iconfont找图标很方便
3. 准备好后就可以设计界面了

html中关键性代码说明

<div
    // 判断当前选中的文本是否包含居中样式
    class="item icon icon-center {{formats.align === 'center' ? 'ql-active' : ''}}"
    data-name="align"  //点击事件中获取该样式名称
    data-value="center" //点击事件中获取该样式的值
    catchtouchend="format" // 这个事件主要目的是使编辑器不会失去焦点很重要
    @tap="onFormat" // 设置样式
    />

查看具体代码

onFormat方法设置文本格式

 onFormat(e) {
      if (!this.canUse) return;
      const { name, value } = e.target.dataset;
      if (!name) return;
      this.editorCtx.format(name, value);
    },

遇到的坑

在IOS中编辑器聚焦时页面并不会被上推，直接导致工具条被虚拟键盘挡住了

解决办法

监听键盘高度变化事件,获取键盘高度

 attached() {
 wx.onKeyboardHeightChange(res => {
      const { height } = res;
      if (height) {
        this.boardHeight = height;
      }
    });
 }

<div class="editor-tool" style="bottom: {{isIOS ? boardHeight : 0}}px;">
.....
</div>

查看完整示例