CODEWITHSUNDEEP
javascriptjqueryhtmlcssckeditor
GorvGoyl
GorvGoyl

Reputation: 49150

ckeditor - Add class to the parent span of toolbar button

I am able to add class to the button:

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

But I want to apply some styling to its parent spans also. How can I do it.

<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>

In this case i want to add styles to span with class 'cke_toolgroup' and class 'cke_toolbar' having inner button with class 'cke_switchtoolbar' but, there can be many spans with same class 'cke_toolgroup' or 'cke_toolbar'.

Upvotes: 2

Views: 1078

Answers (2)

Gursharan Sandhu
Gursharan Sandhu

Reputation: 11

you may also target parent span with css like #cke_1_top .cke_toolbox span:last-child or #cke_1_top .cke_toolbox span:nth-child(n)

#cke_1_top is a main parent span and .cke_toolbox wrap all toolbar span, with both span you can target any child span

Upvotes: 0

hsh
hsh

Reputation: 1855

if the class name you gave the button is unique, you can use some jquery to change styling after you added custom button to CKEditor toolbar like this:

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

the closest("span") part, finds nearest parent that is span, you can use any other selector if you need.

Upvotes: 1

Related Questions