TinyMCE 一些自定义文本样式是不可选择的，有些是

Question

编辑：可重复的小提琴供审查：https://fiddle.tiny.cloud/P2haab

我在创建自定义样式格式配置选项时遇到问题，我的文本样式有时有效，有时无效。以下是我目前的 style_formats 供参考：

style_formats: [
    { title: 'Table Row or List Styles' },
    { title: 'Light Gray', selector: 'tr,ul,ol', classes: 'bg__ltgray' },
    { title: 'Light Blue', selector: 'tr,ul,ol', classes: 'bg__ltblue' },
    { title: 'Light Teal', selector: 'tr,ul,ol', classes: 'bg__ltteal' },
    { title: 'Light Purple', selector: 'tr,ul,ol', classes: 'bg__ltpurple' },
    { title: 'List Styles' },
    { title: 'Dark Teal Text', selector: 'ul,ol', classes: 'text__dkteal' },
    { title: 'Dark Purple Text', selector: 'ul,ol', classes: 'text__dkpurple' },
    { title: 'Dark Blue Text', selector: 'ul,ol', classes: 'text__dkblue' },
    { title: 'Text Styles' },
    { title: 'White Text', inline: 'span', classes: 'text__white' },
    { title: 'Dark Blue Text', inline: 'span', classes: 'text__dkblue' },
    { title: 'Medium Blue Text', inline: 'span', classes: 'text__medblue' },
    { title: 'Dark Green Text', inline: 'span', classes: 'text__dkgreen' },
    { title: 'Dark Teal Text', inline: 'span', classes: 'text__dkteal' },
    { title: 'Dark Purple Text', inline: 'span', classes: 'text__dkpurple' },
    { title: 'Dark Blue Gray Text', inline: 'span', classes: 'text__dkbluegray' },
    { title: 'Medium Blue Gray Text', inline: 'span', classes: 'text__medbluegray' },
    { title: 'Dark Gray Text', inline: 'span', classes: 'text__dkgray' },
    { title: 'Medium Gray Text', inline: 'span', classes: 'text__medgray' },
],
paste_block_drop: false,
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
                    + '.bg__ltgray {background-color: #ededee;}.bg__dkgray {background-color: #a5a7a9;}.bg__dkblue {background-color: #1a315b;}.bg__ltblue {background-color: #cdd6df;}.bg__medblue {background-color: #33587d;}.bg__dkgreen {background-color: #0a492c;}.bg__ltteal {background-color: #ceebeb;}.bg__dkteal {background-color: #00b9ad;}.bg__ltpurple {background-color: #e0d4e1;}.bg__dkpurple {background-color: #652767;}.bg__dkbluegray {background-color: #4b6e8c;}.bg__ltbluegray {background-color: #dbe2e8;}.bg__medbluegray {background-color: #6e8aa3;}.bg__dkgray {background-color: #a5a7a9;}.bg__medgray {background-color: #b9b7bb;}'
                    + '.text__white {color: #ffffff;} .text__dkblue {color: #1a315b;} .text__medblue {color: #33587d;} .text__dkgreen {color: #0a492c;} .text__dkteal {color: #00b9ad;} '
                    + '.text__dkpurple { color: #652767;} .text__dkbluegray { color: #4b6e8c; } .text__medbluegray { color: #6e8aa3; } .text__dkgray { color: #a5a7a9; } '
                    + '.text__medgray { color: #b9b7bb; } '

如您所见，所有文本样式完全相同，但是，用户只能从列表中选择几个选项，其他选项将显示不可用的鼠标光标，类似于您尝试如果没有要应用样式的表格或列表，请使用列表或表格样式。

具体来说，这些是是且不可可选择的颜色：

• 可选：
  • 白色
  • 中蓝
  • 深绿色
  • 深蓝灰色
  • 中蓝灰色
  • 深灰色
  • 中灰色
• 不可选择：
  • 深蓝色
  • 深蓝绿色
  • 深紫色

我找不到不能应用这些其他样式的任何押韵或原因。当我尝试应用其中一种不起作用的样式时，我包含了一个显示鼠标光标的屏幕截图。我是否在配置中遗漏了一些会特别限制这些颜色/样式选择的内容？

Answer 1

您的样式名称似乎必须是全局唯一的，并且“深蓝色文本”（例如）同时出现在“列表样式”和“文本样式”中。将其中一个实例更改为唯一可以解决此问题。

我认为样式的名称应该只在它们出现的部分中是唯一的，但这可能只是这个版本的 TinyMCE 的限制。

Answer 2

无法选择的文本样式都与列表样式共享标题：

• Dark Teal Text
• Dark Purple Text
• Dark Blue Text

这些列表样式只有在列表内容存在（如预期的那样）时才可选择。但是，由于它们与文本样式共享标题，并且标题用作格式的标识符，因此前者（列表样式）在下拉菜单中覆盖了后者（文本样式）。

在 TinyMCE 5.6.0 中，添加了 name 字段以用于解决此问题同时允许重复标题的格式。这是一个使用上面代码的 Tiny Fiddle 示例：

https://fiddle.tiny.cloud/O2haab/2

注意添加name属性，例如：

{ name: 'text-dark-purple', title: 'Dark Purple Text', inline: 'span', classes: 'text__dkpurple' },

如果您还没有使用 TinyMCE 5.6.0，一种解决方法是编辑标题，以便在不同类型的格式之间没有重复。