vue2 wangeditor文字颜色如何添加

在Vue 2中使用WangEditor富文本编辑器，如果想要改变文本的颜色，你可以通过编辑器提供的API来操作。WangEditor本身允许自定义样式，包括文字颜色。以下是基本步骤：

1. 首先，在你的Vue组件中安装和初始化WangEditor：

<template>
  <div id="editor">
    <wangeditor ref="editor" @ready="onEditorReady"></wangeditor>
  </div>
</template>

<script>
import WangEditor from 'wangeditor'

export default {
  components: {
    WangEditor,
  },
  methods: {
    onEditorReady(editor) {
      // 在这里注册你需要的功能
      editor.config.customConfig = {
        toolbar: [
          ['color', ['foreColor', 'backColor']], // 添加颜色选择功能
        ],
      }
    },
  },
}
</script>

2. `foreColor` 和 `backColor` 是WangEditor内置的颜色选项，可以通过调用`editor.execCommand(' foreColor' | 'backColor')`并传入颜色值来进行切换。

举个例子，你想将选中的文字变为红色：

methods: {
  changeTextColor(color) {
    this.$refs.editor.execCommand('foreColor', color);
  },
  ...其他方法
}

然后可以在你的模板中绑定事件处理函数，比如按钮点击：

<button @click="changeTextColor('#ff0000')">设置红色</button>