mavon-editor自定义添加颜色选择器

mavon-editor原本是没有带颜色选择器的,产品提出的需求,只好自定义一个了

这里是看了源码再加上看别人的博客,然后加了个插槽,我使用的是elementui的颜色选择器

el-color-picker

          <mavon-editor
              v-model="queryParams.template"
              :toolbars="toolbars"
              ref="md"
            >
        // 插槽
              <button
                slot="left-toolbar-before"
                type="button"
                aria-hidden="true"
                title="颜色"
                class="op-icon"
                style="position: relative"
                v-if="queryParams.channel != 2"
              >
                <i class="el-icon-s-open" />
                <el-color-picker
                  v-model="color1"
                  style="opacity: 0; position: absolute; top: 0; left: 0"
                  @change="activeChange"
                />
              </button>
            </mavon-editor>
// 富文本编辑器加颜色
    activeChange(e) {
      const insert_text = {
        prefix: `<font color="${e}">`,
        subfix: '</font>',
        str: ''
      };
   // 使用span标签,里面的style会被过滤掉,导致颜色不生效。所以使用上面的font标签
      // const insert_text = {
      //   prefix: `<span style="color: ${e}">`,
      //   subfix: '</span>',
      //   str: ''
      // };

      const $vm = this.$refs.md;
      $vm.insertText($vm.getTextareaDom(), insert_text);
    },
posted @ 2023-01-31 14:06  sinceForever  阅读(338)  评论(0编辑  收藏  举报