CKEditor - 在工具欄按鈕上顯示當前顏色

Question

我想添加一個工具欄按鈕到CKEditor，它顯示了選擇的當前顏色。這可能嗎？

到目前爲止，我設法按照這個tutorial和colorbutton插件添加一個新的工具欄按鈕，但我找不到任何帶動態演示的工具欄按鈕的示例。

Answer 1

您可以爲按鈕使用透明圖片，並在插件功能中設置按鈕範圍的背景顏色。

它看起來像通過找到具有您分配的標題的錨標記（工具提示）來獲得該跨度可能最容易，然後使用id=cke_icon設置子跨度的背景顏色。

這就是我的一個插件按鈕的HTML外觀，按鈕調用的特定插件的名稱未使用，它的功能分配了可變函數編號，因此插件名稱不可用：

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