5

次のコードでツールバー ボタンを作成する場合CKEditor 3.0、アイコン プロパティのコメントを解除してボタンを表示する必要があります。それ以外の場合、スペースは占有されていますが、ラベルは表示されません。カーソルを合わせると、キャプションがポップアップ表示されます。

        editor.ui.addButton('customButton', {
            label: 'Custom Action',
            //icon: this.path + 'images/anchor.gif',
            command: commandName
        });

アイコンなしのツールバーボタンを作成する方法を知っていますか? ただの純粋なテキスト。

4

2 に答える 2

7

より簡単な方法は、CKEditorがカスタムラベルに自動的に呼び出されるCSSクラスを作成することです：cke_button_ <command>

たとえば、ボタンのコマンドが「myCommand」と呼ばれ、「label：」「My Command」を設定した場合、CKは次のようにレンダリングします。

<a id="cke_27" class="cke_off cke_button_myCommand" ....>
...
<span id="cke_27_label" class="cke_label">My Command</span>
</a>

したがって（「kama」スキンを使用していると仮定すると、そうでない場合はスキンの代わりになります）、次のCSSを使用してcke_label ==> display：noneをオーバーライドできます。

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

出来上がり。

于 2011-06-09T20:09:42.760 に答える
2

これが私がやった方法です。ボタンは次のようになります。

<span class="cke_button">
    <a id="cke_..." class="cke_off cke_button_cmd" ...>
        <span class="cke_icon"/>
        <span class="cke_label">Label</span>
    </a>
</span>

.cke_labelは、デフォルトで「display：none」のスタイルになっています。これはまさに私たちが望むことをするでしょう：

<span style="display:none;" class="cke_icon"/>
<span style="display:inline;" class="cke_label">Label</span>

したがって、セレクターは少し注意が必要です。エディターを使用して、ページのスタイルタグにこれを配置します。

<style type="text/css">
.cke_skin_kama .cke_button_CMDNAMEHERE span.cke_icon{display:none !important;}
.cke_skin_kama .cke_button_CMDNAMEHERE span.cke_label{display:inline;}
</style>

ckeditorの作成者は、cssを適用してソースボタン（presets.css）のラベルを取得しました。

/* "Source" button label */
.cke_skin_kama .cke_button_source .cke_label
{
 display: inline;
}
于 2009-11-17T02:29:04.667 に答える