4

私がやりたいことは、ネイティブの前景/背景色ダイアログに似たものです。違いは、ツールバーに直接色付きのボタンがあることです。したがって、1 つのプラグインには、異なるスタイル (色) の複数のボタンが必要です。もう 1 つの問題は、このネイティブ プラグインが CSScolorとbackground-colorプロパティを設定することです。次のように、代わりにクラスを使用する必要があります。

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

と

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

色をクリックすると、スパンの色をfgクラス (および背景色 -bgクラス)で変更する必要があります

どうすればこれを達成できますか？

4

2 に答える 2

2

まず、独自のボタンを追加する必要があります。これを行うプラグインのソースを確認してくださいbasicstyles/plugin.js。ボタンごとにコマンドを作成してから、すべてのボタンを登録する必要があります。単純。

次に、スタイルの実装を使用することを提案します。指定された選択/範囲から定義されたスタイルを適用/削除できます。spanスタイル定義では、特定のクラスの要素を適用するように指定できます。このスタイル定義を確認してください。

そして最後のステップ - これらのものを一緒に結合します。ボタンに関連付けられたコマンドは、このスタイルを適用/削除する必要があります。ここでワンチェックCKEDITOR.styleCommand使用法を使用する準備ができています。

必要なものはすべてbasicstylesプラグインに含まれているので、そこを参照してください。

ポズドラウィアム:)

于 2012-10-11T22:11:37.360 に答える
2

インターフェイスに柔軟性がある場合は、スタイルを「スタイル」セレクターに追加するだけです。

独自のプラグインを作成するよりも手間がかかりません。特に、新しいStylesheet Parser Pluginを使用できる 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」プラグインに基づいてプラグインを作成することもできます。ネイティブの前景色/背景色ダイアログを作成します。

于 2012-10-11T22:53:31.493 に答える