Question

我想在CKEditor添加一个工具栏按钮，显示所选内容的当前颜色。这可能吗？

到目前为止，我设法通过关注此tutorial和colorbutton插件添加了一个新的工具栏按钮，但我找不到任何带动态演示的工具栏按钮示例。

Answer 1

您可以使用透明图像作为按钮，并在插件功能中设置按钮跨度的背景颜色。

通过查找带有您指定标题的锚标记（工具提示），然后使用id=cke_icon设置子跨度的背景颜色，看起来最容易获得该范围。

这是我的一个插件按钮的HTML看起来，按钮调用的特定插件的名称没有使用，它的功能被赋予变量功能号，因此插件名称不可用：< / p>

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

如果您想在每次用户选择内容区域的一部分时确定颜色，那将是相当多的工作，因为他们可以选择具有多种颜色的多个元素。即使他们只是单击内容区域，您也可能需要走向DOM树以找到光标位置继承其颜色的元素。

我帮助了另一个具有不同目标的问题的插件，但它涉及每次进行选择时触发，根据选择创建对象，然后沿着DOM树向上查看分配给元素。您可以修改它以符合您的目标：

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

CKEditor - 在工具栏按钮上显示当前颜色

1 个答案: