mavon-editor 自定义字体颜色选择器

mavon-editor组件使用时，需要设置字体的颜色，但是官方没有对应控件，只能自定义

引入

import { mavonEditor } from "mavon-editor";
import "mavon-editor/dist/css/index.css";

使用组件

components: {
    mavonEditor,
},

html

<mavon-editor
  ref="md"
  v-model="Addform.markdown"
  defaultOpen="preview"
  :toolbarsFlag="true"
>
  <!-- 左工具栏前加入自定义按钮 -->
  <template slot="left-toolbar-before">
    <button
      slot="left-toolbar-before"
      type="button"
      aria-hidden="true"
      title="颜色"
      class="op-icon"
    >
      <i class="el-icon-s-open" />
      <el-color-picker
        style="
          opacity: 0;
          position: absolute;
          top: 0;
          left: 0;
        "
        @change="activeChange"
      />
    </button>
  </template>
</mavon-editor>

函数

activeChange(e) {
  const insert_text = {
    prefix: `<font color="${e}">`,
    subfix: "</font>",
    str: "",
  };
  const $vm = this.$refs.md;
  $vm.insertText($vm.getTextareaDom(), insert_text);
},