无法为TinyMCE的<a>标签应用自定义CSS的问题咨询

问题描述 #

加载自定义CSS文件后，多数样式能正常显示在格式菜单中，但所有使用a.和table.选择器的样式无法生效——菜单项可见但无法点击，且被TinyMCE自动加上了mce-disabled类。想问下这是样式冲突导致的禁用，还是a.*这类选择器本身就不能用？使用的是TinyMCE 4版本。

补充信息 #

CSS示例 #

a.btn-standard {
    display: inline-block;
    background-color: #e25200;
    font-family: "Source Sans Pro", sans-serif;
    color: white;
    text-transform: uppercase;
    font-size: 14pt;
    font-weight: 600;
    padding: 1.25rem 2rem;
    line-height: 1.25;
}

菜单项渲染代码 #

<div id="mceu_94" class="mce-menu-item mce-menu-item-preview mce-stack-layout-item mce-disabled" tabindex="-1" role="menuitem" aria-disabled="true" aria-checked="false"><i class="mce-ico mce-i-none"></i>&nbsp;<span id="mceu_94-text" class="mce-text" style="font-family:&quot;Source Sans Pro&quot;, sans-serif;font-size:18.6667px;font-weight:600;font-style:normal;text-decoration:none solid rgb(255, 255, 255);text-transform:uppercase;color:rgb(255, 255, 255);background-color:rgb(226, 82, 0);padding:0 2px;border:0px none rgb(255, 255, 255);border-radius:0px;outline:rgb(255, 255, 255) none 0px;text-shadow:none;">a.btn-standard</span></div>

原因及解决方法 #

这不是样式冲突，是TinyMCE 4的styleselect格式菜单控件本身的功能限制：

• 该控件默认只支持给**块级元素（如p、div）**应用类样式，当检测到选择器是行内元素（如a.xxx）或表格元素（如table.xxx）时，会判定这类样式无法通过当前控件的逻辑直接应用，因此自动禁用菜单项。

对应解决办法 #

1. 链接类样式：
   不要通过styleselect加载，改用自定义按钮触发格式命令，或者在TinyMCE配置中通过formats选项定义专属的链接格式：

   tinymce.init({
     formats: {
       btnStandard: { inline: 'a', classes: 'btn-standard' }
     },
     toolbar: 'styleselect | btnStandard' // 将自定义格式按钮加入工具栏
   });
   

2. 表格类样式：
   同样避开styleselect，通过自定义按钮或借助表格插件的API，手动为选中的表格添加类样式。

内容的提问来源于stack exchange，提问作者Robb