mavon-editor組件使用時(shí)，需要設(shè)置字體的顏色，但是官方?jīng)]有對(duì)應(yīng)控件，只能自定義
引入
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>
函數(shù)
activeChange(e) {
const insert_text = {
prefix: `<font color="${e}">`,
subfix: "</font>",
str: "",
};
const $vm = this.$refs.md;
$vm.insertText($vm.getTextareaDom(), insert_text);
},
