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);
},