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

Question

编辑：Repeatable Fiddle 审核：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; } '

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

具体来说，这些是和不select可用的颜色：

选择table:
- 白色
- 中蓝色
- 深绿色
- 深蓝灰色
- 中蓝灰色
- 深灰色
- 中灰色
不选择table:
- 深蓝色
- 深蓝绿色
- 深紫色

我找不到任何无法应用这些其他样式的韵律或原因。当我尝试应用其中一种不起作用的样式时，我提供了一个显示鼠标光标的屏幕截图。我是否在配置中遗漏了一些专门限制这些 colors/style select 离子的东西？

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，解决方法是编辑标题，这样不同格式的标题就不会重复。

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

TinyMCE some custom text styles aren't selectable and some are

html

css

styles

tinymce