如何在CKEditor中设置按钮的标题？

Question

在CK编辑器中，我希望当用户将鼠标悬停在相应的按钮上时显示相应的快捷按钮。

例如，当我将鼠标悬停在“B”上时，它会显示“Bold”，但我希望它说“Bold Ctrl + B”。这类似于MS Word甚至Stack Overflow的编辑器。我怎么能这样做？

我的想法是在编辑器加载后对按钮文本进行更改。

例如：

// Invalid Code - Just an example
editor.setButtonText('codeSnippet', config.lang.codesnippet.title + " - Ctrl + K"));

当然上面的代码无效，因为我不确定如何设置按钮文字。

更新

我现在知道如何检索按钮的按钮文本。即

config.lang.codesnippet.title

但是我无法设置标题的值。

Answer 1

旧帖但有些人可能会遇到同样的问题，我发现这是黑客攻击：您可以手动覆盖按钮的title属性。

CKEditor按类引用工具栏按钮。 ＆＃34; Bold＆＃34;按钮具有以下类：cke_button cke_button__bold cke_button_off

您需要做的就是获取HTML元素的引用（在纯JavaScript中为getElementsByClass()）并使用title更改.setAttribute()属性

我的项目在Angular2中，所以在我的情况下它看起来像这样： this.elRef.nativeElement.querySelector('.cke_button.cke_button__bold').setAttribute('title', 'Bold (Ctrl+B)');

在普通JS中，它看起来像： document.getElementsByClass('.cke_button.cke_button__bold')[0].setAttribute('title', 'Bold (Ctrl+B)');

以下是一些按钮的列表（不全面）：

粗体：cke_button cke_button__bold cke_button_off

斜体：cke_button cke_button__italic cke_button_off

下划线：cke_button cke_button__underline cke_button_off

项目符号列表：cke_button cke_button__bulletedlist cke_button_off

编号列表：cke_button cke_button__numberedlist cke_button_off

......等等。