在项目中，要求实现自定义调色盘，包含若干颜色和重置为默认颜色。

在编辑器原本的调色盘处理中其处理方式分为以下几种情况

1. 有选中区域，行内或跨行，修改颜色之后，选中区域变成所选颜色
2. 在行位，无选中区域，修改颜色之后，输入文字为所选颜色
3. 在行内，无选中区域，修改颜色之后，整行文字变为所选颜色

一般情况下，这三种模式都容易被理解
但是第三种情况，容易造成理解歧义
或者说用户只是单纯的想在一行中，增加一段其他颜色的文字
如果用默认的模式就会遇到阻碍。

那么，我们就需要对调色盘功能进行一定的修改。
整体上，思路就是自定义组件和响应事件，监听器根据所传的参数使用execCommand来对编辑器（dom的可编辑区域进行编辑）

// CustomeColorPicker.vue
<template>
  <ul class="color-picker" @click="setColor">
    <li class="default-color"><li>
    <li>red<li>
    <li>blue<li>
    <li>green<li>
  </ul>
</template>

<script>
      export default {
          data() {
              return {}
          },
          methods: {
            setColor(evt) {
              // 获取颜色色值,可以是字符串也可以是带#的十六进制
              const color = evt.target.innerText

              // 按照默认来说, 使用的这个API进行文本颜色的设置,然而这样的设置就会造成上面提到的第3点
              // 无选中时, 影响整行文本颜色
              // tinymce.activeEditor.execCommand('ForeColor', false, color);

              // 需要进行如下判断

              // 如果要设置字体颜色为默认的颜色,使用mceRemoveTextcolor
              // Description: Removes the text color or background color from the current selection. 
              // Requires an argument of either 'hilitecolor' or 'forecolor'.
              if (!color) {
                return this.execCommand('mceRemoveTextcolor', 'forecolor');
              }

              // 先判断选区,是否选中了内容
              const { collapsed } = this.editor.selection.getRng();
              if (collapsed) {
                // 如果没有选区
                // 则注入一个带颜色的空间, &#8203是零宽的空格字符用于占位
                this.execCommand(
                  'mceInsertContent',
                  false,
                  `<span style="color: ${color}">&#8203</span>`,
                );
              } else {
                // 如果有选区 设置选区的颜色
                // Description: Applies text color or background color to the current selection. 
                // Requires an argument of either 'hilitecolor' or 'forecolor', and the value of the color.
                this.execCommand('mceApplyTextcolor', 'forecolor', color);
              }
            }
          }
      }
<script>

另外，如果想用此类策略应用到其他格式上的话，也需要做一些调整
不能直接使用 execCommand('bold') 类似的方法

 const StylePlaceholder = {
    bold: `<strong>&#8203</strong>`,
    italic: `<em>&#8203</em>`,
    underline: `<span style="text-decoration: underline;"></span>`,
    strikethrough: `<span style="text-decoration: line-through;"></span>`,
};

if (['bold', 'italic', 'underline', 'strikethrough'].includes(command)) {
    const { collapsed } = this.editor.selection.getRng();
    if (collapsed) {
         // 将对应的命令，更换成插入对应的html空容器
        this.execCommand('mceInsertContent', false, StylePlaceholder[command]);
    } else {
        this.execCommand(...res);
    }
} else {
     this.execCommand(...res);
}

总结:

1. 关于修改颜色时,使用的命令选择

没有使用ForeColor,因为这个命令对于选区存在不符合我们需求预期的影响.

将颜色设置的三种情况使用不同的命令:

反选(设置成默认值) mceRemoveTextColor
无选区设置 mceInsertContent 一个容器
有选区 mceApplyTextcolor

2. &#8203

Unicode Character 'ZERO WIDTH SPACE' (U+200B)

参考:

1. Commands Available for TinyMCE
2. B站创作中心编辑器