Home/ Questions/Q 8582627
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T21:20:22+00:00

I would like to add a toolbar button to CKEditor that shows the current

  • 0

I would like to add a toolbar button to CKEditor that shows the current color of the selection. Is this possible?

So far I managed to add a new toolbar button by following this tutorial and the colorbutton plugin, but I can’t find any example of a toolbar button with dynamic presentation.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You could use a transparent image for the button and set the background color of the button span within your plugins functionality.

    It looks like it might be easiest to get that span by finding the anchor tag with the title that you assigned (the tooltip) and then set the background color of the child span with id=cke_icon.

    This is what the HTML for one of my plugin buttons looks like, the name of the particular plugin that the button calls isn’t used, it’s functions are assigned variable function numbers, so the plugin name isn’t available:

    <a id="cke_33" class="cke_off" 
onclick="CKEDITOR.tools.callFunction(71, this); return false;" 
onfocus="return CKEDITOR.tools.callFunction(70, event);" 
onkeydown="return CKEDITOR.tools.callFunction(69, event);" 
onblur="this.style.cssText = this.style.cssText;" aria-haspopup="true" 
aria-labelledby="cke_33_label" role="button" hidefocus="true" tabindex="-1" 
title="Block Background Color">

<span class="cke_icon" style="background-image:url
(/ckeditor_3.6.1/plugins/cwmarcontentbackcolor/images/contentbackcolor16x16.png?t=B5GJ5GG);
background-position:0 0px;"> 
</span>

<span id="cke_33_label" class="cke_label">Block Background Color</span>
<span class="cke_buttonarrow"> </span>

</a>

    It will be a fair amount of work if you want to determine the color each time the user selects a portion of the content area because they could select multiple elements with multiple colors. Even if they simply click in the content area, you may have to walk up the DOM tree to find the element that the cursor position is inheriting it’s color from.

    I helped with a plugin for another question that had a different goal, but it involved firing each time a selection was made, creating an object based on the selection, and walking up the DOM tree to look at the class assigned to the elements. You may be able to modify it to fit your goals:

    How to block editing on certain part of content in CKEDITOR textarea?

    • 0