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

时间:2018-03-02 21:00:27

标签: javascript css google-chrome ckeditor mozilla

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

但是使用Google Chrome,按钮的ID与使用mozilla或IE不同。

一个例子会更清楚:

如果我有samme工具栏,相同的代码,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都会增加一个。

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

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

1 个答案:

答案 0 :(得分:0)

更改CKEditor皮肤的一般方法应该是通过获取source version来执行,并在ckeditor/skinsbuilding the editor中进行更改。

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

如果您需要更改工具栏组(包含一组按钮的元素),那么很遗憾没有唯一的ID或类,我唯一​​可以推荐的方法是通过其独特的类获取特定按钮然后获取它最接近的父级(使用JavaScript),其中包含cke_toolbarcke_toolgroup类,并且是span