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); },
标签:mavon,颜色,自定义,text,vm,editor,选择器 From: https://www.cnblogs.com/sinceForever/p/17078738.html