uni-app原生editor封装编辑组件（vue3）

 uni-app内置的editor直接使用的时候是什么图标都没有的，各个功能也需要自己借助api进行封装，因此简单封装一个编辑器组件，包括了几个基本的功能，包括加粗、倾斜、段落格式、分割线、上下角标等。

最终呈现的样式大致如下（注释了部分暂时用不到的按钮）

 具体代码如下：

（使用到的icon可以在阿里巴巴里面自己找一下进行替换哈）

<template>
  <view class="container">
    <view class="page-body">
      <view class="wrapper">
        <view
          class="toolbar"
          @tap="format"
          style="max-height: 240rpx; overflow-y: auto"
        >
          <!-- 字体 -->
          <!-- <view
            :class="data.formats.fontFamily ? 'ql-active' : ''"
            class="iconfont icon-font"
            data-name="fontFamily"
            data-value="Pacifico"
          ></view> -->
          <!-- 加粗 -->
          <view
            :class="data.formats.bold ? 'ql-active' : ''"
            class="iconfont icon-zitijiacu"
            data-name="bold"
          ></view>
          <!-- 斜体 -->
          <view
            :class="data.formats.italic ? 'ql-active' : ''"
            class="iconfont icon-zitixieti"
            data-name="italic"
          ></view>
          <!-- 下划线 -->
          <view
            :class="data.formats.underline ? 'ql-active' : ''"
            class="iconfont icon-zitixiahuaxian"
            data-name="underline"
          ></view>
          <!-- 删除中划线 -->
          <!-- <view
            :class="data.formats.strike ? 'ql-active' : ''"
            class="iconfont icon-zitishanchuxian"
            data-name="strike"
          ></view> -->
          <!-- 字号 -->
          <!-- <view
            :class="data.formats.fontSize === '24px' ? 'ql-active' : ''"
            class="iconfont icon-font-size"
            data-name="fontSize"
            data-value="48rpx"
          ></view>-->
          <!-- 字体颜色 -->
          <!-- <view
            :class="data.formats.color === '#0000ff