CKEditor插件設置類

Question

我想要做的是類似於原生前景/背景顏色對話框。 不同的是，它將在工具欄中直接顯示帶顏色的按鈕。 所以一個插件必須有多個按鈕，具有不同的樣式（顏色）。 另一個問題是，這個本機插件設置了CSS color和background-color屬性。 我需要使用類，如下所示：

text <span class="fg red">colored text</span> text

和

text <span class="bg blue">colored background</span> text

點擊顏色必須改變跨度的顏色與fg類（和背景顏色 - bg類）

我怎樣才能做到這一點？

Answer 1

首先，你必須添加自己的按鈕。 檢查執行此操作的任何插件的來源 - 例如basicstyles/plugin.js 。 您必須為每個按鈕創建命令，然后注冊所有按鈕。 簡單。

然后我建議使用我們的樣式實現。 它允許從給定的選擇/范圍中應用/刪除定義的樣式。 在樣式定義中，您可以指定它將對給定的類應用span元素。 檢查此樣式定義。

最后一步 - 將這些東西結合在一起。 與按鈕關聯的命令應該應用/刪除此樣式。 有准備使用一個-檢查CKEDITOR.styleCommand使用這里 。

你需要的一切都是基本basicstyles插件，所以請參考那里。

Pozdrawiam :)

Answer 2

如果您對界面很靈活，可以將樣式添加到“樣式”選擇器中 。

這比創建自己的插件要少。 特別是如果您使用CKEditor 3.6或更高版本，您可以使用新的樣式表分析器插件 。

---

歡迎您使用答案中的插件，您要求我查看此問題 。

它基於“basicstyles”插件。 如果你查看我包含的評論，你會發現你可以用它來添加多個按鈕和多種樣式。

// This "addButtonCommand" function isn't needed, but
// would be useful if you want to add multiple buttons

您可以多次調用addButtonCommand方法。

addButtonCommand( 'Fg_red'   , 'Label'   , 'fg_red'   , config.coreStyles_fg_red );
addButtonCommand( 'Bg_blue'   , 'Label'   , 'bg_blue'   , config.coreStyles_bg_blue );

插件代碼之后的最后一行代碼是您添加到配置中的代碼。 您可以使用任何您喜歡的屬性：

CKEDITOR.config.coreStyles_fg_red = { element : 'span', attributes : { 'class': 'fg red' } };
CKEDITOR.config.coreStyles_bg_blue = { element : 'span', attributes : { 'class': 'bg blue' } };

---

您還可以基於“colorbutton”插件創建一個插件。 它會創建本機前景/背景顏色對話框。