選択範囲の現在の色を表示するツールバー ボタンをCKEditorに追加したいと思います。これは可能ですか?
これまでのところ、このチュートリアルとcolorbuttonプラグインに従って新しいツールバー ボタンを追加することができましたが、動的なプレゼンテーションを備えたツールバー ボタンの例は見つかりませんでした。
選択範囲の現在の色を表示するツールバー ボタンをCKEditorに追加したいと思います。これは可能ですか?
これまでのところ、このチュートリアルとcolorbuttonプラグインに従って新しいツールバー ボタンを追加することができましたが、動的なプレゼンテーションを備えたツールバー ボタンの例は見つかりませんでした。
ボタンに透明な画像を使用し、プラグイン機能内でボタン スパンの背景色を設定できます。
割り当てたタイトル (ツールチップ) を持つアンカー タグを見つけて、子スパンの背景色を で設定することで、そのスパンを取得するのが最も簡単なようですid=cke_icon
。
これは私のプラグイン ボタンの 1 つの HTML がどのように見えるかです。ボタンが呼び出す特定のプラグインの名前は使用されません。その関数には可変関数番号が割り当てられているため、プラグイン名は使用できません。
<a id="cke_33" class="cke_off"
onclick="CKEDITOR.tools.callFunction(71, this); return false;"
onfocus="return CKEDITOR.tools.callFunction(70, event);"
onkeydown="return CKEDITOR.tools.callFunction(69, event);"
onblur="this.style.cssText = this.style.cssText;" aria-haspopup="true"
aria-labelledby="cke_33_label" role="button" hidefocus="true" tabindex="-1"
title="Block Background Color">
<span class="cke_icon" style="background-image:url
(/ckeditor_3.6.1/plugins/cwmarcontentbackcolor/images/contentbackcolor16x16.png?t=B5GJ5GG);
background-position:0 0px;">
</span>
<span id="cke_33_label" class="cke_label">Block Background Color</span>
<span class="cke_buttonarrow"> </span>
</a>
ユーザーが複数の色を持つ複数の要素を選択する可能性があるため、ユーザーがコンテンツ領域の一部を選択するたびに色を決定したい場合は、かなりの作業量になります。コンテンツ領域をクリックするだけでも、カーソル位置が色を継承している要素を見つけるために DOM ツリーをたどらなければならない場合があります。
別の目標を持つ別の質問のプラグインを手伝いましたが、選択が行われるたびに起動し、選択に基づいてオブジェクトを作成し、DOM ツリーを上って要素に割り当てられたクラスを確認する必要がありました。目標に合わせて変更できる場合があります。