CKEditorでは、ボタンに「テキスト」ラベルを追加するにはどうすればよいですか？

Question

editor.ui.addButton('ImageUpload',{ 
       label: 'Upload Image', 
       command: 'popup_image_uploader', 
       icon: this.path + 'images/icon.png' 
      }); 

これは現在私の現在のコードです。ページをロードすると、アイコンのみが表示されます。

デモhereに行くと、「ソース」がテキストであることがわかります。アイコンの横に「画像をアップロード」という言葉を追加したいと思います。

Answer 1

CKEditorバージョンのツールバーボタンのラベルは、デフォルトで持つクラス.cke_labelを持ってdisplay:noneので、ボタンはアイコンのみです：

.cke_skin_kama .cke_button .cke_label { 
    ... 
    display: none; 
    ... 
} 

同様ソースボタンのために、あなたはCSSを使用する必要がありますあなたのラベルを表示する。

通常ボタンCKEditorバージョンは、コマンドの名前であること.cke_button_CMDNAMEHERECMDNAMEHEREのようなクラスを追加作成します。だから、必要があるでしょう：

.cke_skin_kama .cke_button_CMDNAMEHERE .cke_label { 
    display: inline; 
} 

追加クラスの正確な名前を確認し、それに応じてCSSルールを作るためにhtmlソースを確認してください。

Answer 2

.cke_button_label.cke_button__CMDNAMEHERE{ 
    display: inline; 
} 

は

（ボタンやCMDNAMEHEREの間に二重アンダースコアに注意）上記の答えとは違って、あなた自身のCSS内のどこにでも

Answer 3

を配置することができ、別の解決策はただになり、すべてのスキンのために動作しますcss "：before"または "：after"疑似クラスを使用して、ボタンの前後にカスタムコンテンツを追加します。例えば

、 "リンク" ボタンをカスタマイズする：

は、いくつかのスペースを作成します（コンテンツの長さに依存する）：

.cke_button_icon.cke_button__link_icon { 
padding-right: 25px; 
} 

は、コンテンツを追加：現在のCKEditorバージョンで

.cke_button_icon.cke_button__link_icon:after { 
content: "Link"; 
position: relative; 
left: 15px; 
} 

Answer 4

を（4.6.x）上記の答えは私にとってはうまくいかない。

私はCKEditorバージョン/スキン/ moonoリスト/ editor.cssの周り掘って、彼らはテキストを持っているソースボタンをどうやったのか見つけるために、「ソース」を検索しました。私はこれを見つけました：

.cke_button__source_label, 
.cke_button__sourcedialog_label 
{ 
    display:inline 
} 

カスタムボタンの名前の前に2つの下線があります。私がアンダースコアを1つだけ試してみたら、うまくいきませんでした。

とにかくあなたが好きで、上記「ソース」や「sourcedialog」を交換し、独自のCSSファイルにそれを追加します。

また、ボタン名がすべての小文字のの場合にのみ機能するようです。