Question

我可以在按钮中添加类：

  editor.ui.addButton(_buttonName,
            {
                'label': 'Switch Toolbar',
                icon: CKEDITOR.getUrl(this.path) + 'images/' + pluginIcon,
                className: 'cke_switchtoolbar',
                command: _pluginCommand
            });

但我也希望将一些样式应用于其父跨度。我怎么能这样做。

<span id="cke_403" class="cke_toolbar" aria-labelledby="cke_403_label" role="toolbar">
    <span id="cke_403_label" class="cke_voice_label">Expandable</span>
    <span class="cke_toolbar_start"></span>
    <span class="cke_toolgroup" role="presentation">
        <a id="cke_404" class="cke_switchtoolbar cke_button cke_button__switchbar cke_button_off cke_switchtoolbar" "="" href="javascript:void('Switch Toolbar')" title="Switch Toolbar" tabindex="-1" hidefocus="true" role="button" aria-labelledby="cke_404_label" aria-haspopup="false" onkeydown="return CKEDITOR.tools.callFunction(44,event);" onfocus="return CKEDITOR.tools.callFunction(45,event);" onmousedown="return CKEDITOR.tools.callFunction(46,event);" onclick="CKEDITOR.tools.callFunction(47,this);return false;">
            <span class="cke_button_icon cke_button__switchbar_icon" style="background-image:url(http://localhost:55244/Content/ckeditor/plugins/switchbar/images/arrow-downward.png?t=D08E);background-position:0 undefinedpx;">&nbsp;</span>
            <span id="cke_404_label" class="cke_button_label cke_button__switchbar_label">Switch Toolbar</span>
        </a>
    </span>
    <span class="cke_toolbar_end"></span>
</span>

在这种情况下，我想添加样式以跨越类“cke_toolgroup”和类“cke_toolbar”具有类“cke_switchtoolbar”的内部按钮但是，可以有多个跨度使用相同的班级“cke_toolgroup”或“cke_toolbar”。

Answer 1

如果给出按钮的类名是唯一的，那么在将自定义按钮添加到CKEditor工具栏后，可以使用一些jquery来更改样式：

$(".cke_toolbar").closets("span").addClass(yourClass);

closest("span")部分，找到最近的父级，如果需要，可以使用任何其他选择器。

Answer 2

您也可以使用1 a 2 a 3 b 4 c 5 c或#cke_1_top .cke_toolbox span:last-child

等css来定位父级

#cke_1_top .cke_toolbox span:nth-child(n)是一个主要的父级，#cke_1_top包装所有工具栏范围，两个范围都可以定位任何子跨度

ckeditor - 将类添加到工具栏按钮的父跨度

2 个答案: