Ckeditor按钮ID正在通过浏览器进行更改

Posted 2021-04-11

目前使用CKEditor，我需要在工具栏中获取按钮id以应用某些特定的CSS并获取某些按钮的位置例如。

但是使用谷歌浏览器，按钮的ID与使用mozilla或IE不同。

一个例子会更清楚：

如果我有相同的工具栏，相同的代码，Mozilla将告诉我这个：

<span id="cke_1_top>
    <span id="cke_7">Toolbar</span>

     // My first group of buttons, which contains 2 buttons
    <span id="cke_9" class="cke_toolbar" role = "toolbar">
         // Code for buttons
    </span>

    // My second group of buttons
    <span id="cke_12" class="cke_toolbar" role = "toolbar">
         // Code for buttons
    </span>
</span>

虽然chrome会显示：

<span id="cke_1_top>
    <span id="cke_8">Toolbar</span>
     // My first group of buttons, which contains 2 buttons
    <span id="cke_10" class="cke_toolbar" role = "toolbar">
         // Code for buttons
    </span>

    // My second group of buttons
    <span id="cke_13" class="cke_toolbar" role = "toolbar">
         // Code for buttons
    </span>

</span>

所以我的CSS，例如：

#cke_13{
    color: red
}

仅适用于Chrome，因为如果代码由mozilla显示，则此ID不存在。

目前问题仅出现在chrome中，所有ID都会增加1。

有谁知道问题出在哪里？或者至少有一种方法可以在创建按钮时选择按钮的ID吗？

我真的不知道为什么会这样，任何解决方案都会受到赞赏。

答案

改变CKEditor皮肤的一般方法应该通过获得source version，在ckeditor/skins和building the editor进行更改来执行。

但是，如果您只需更改特定按钮，请注意每个按钮都分配了一个唯一的类，您可以在不同的浏览器中使用相同的样式或相同的javascript代码进行更改。请参阅：。

如果您需要更改工具栏组（包含一组按钮的元素），那么遗憾的是没有唯一的ID或类，我唯一​​可以推荐的方法是通过其唯一的类获取特定按钮，然后获取其最接近的父级（使用JavaScript）它有cke_toolbar或cke_toolgroup类，是span。