web-dev-qa-db-ja.com

CSSクラスをwysiwygに追加する

私はckeditorでwysiwygを使用していますが、CSSスタイルを追加して、たとえばユーザーが画像を左にフロートしたり、他の同様の変更を加えたりする方法を考えていました...？

ありがとう！

themingwysiwyg
7
Jane

Ckeditorはckeditor.styles.jsファイルを使用して、[スタイル]ドロップダウンで使用可能なスタイルを定義します。そのファイルのドキュメントには次のように記載されています。

'Styles' button is not enabled by default in DrupalFull and DrupalFiltered toolbars.

ファイルを見ると、与えられた例を使用してファイルを変更するのはかなり簡単です。

ckeditor.styles.jsファイルは、Drupalでアクセス可能なディレクトリにコピーして、スタイルを含めるように変更できます。次に、該当するCSSを含め、新しいファイルを指すようにCKeditorプロファイルを構成する必要があります。

6
nmc

ckeditor.styles.jsにフックする代わりに、フォーマットの構成ページで直接行うことができます。

WYSIWYG形式では、独自のスタイルを選択でき、これらの形式に基づいてcssを簡単に記述できます。

スタイルを追加する手順

  • 管理者としてサイトにログインします。

  • 形式の[構成]ページに移動します。 （設定"コンテンツオーサリング"Wysiwygプロファイル）

    enter image description here

  • フォーマットを編集します。

    enter image description here

  • CSSフィールドセットを開きます。

    enter image description here

  • CSSクラステキストエリアで、作成するスタイルを作成します。そのフォーマットは

スタイル名= html_element.class_name

同じの例は

静的ページタイトル= div.static_page_title（つまり、スタイルの名前 isStatic Page Title、これを適用するとdivでテキストが折り返されますstatic_page_titleをdiv要素のクラスとして追加します。）

使用手順

  • コンテンツを作成して、スタイルを追加したフォーマットを使用してみてください。
  • スタイルの下に、作成したスタイル設定が表示されます。 enter image description here

  • テストを書いて、スタイルを選択するだけです。すると、マークアップは次のようになります

    <div class="static_page_title">Testing</div>

  • したがって、static_page_titleクラスのcssを記述するだけで、すべてが期待どおりに機能します。

私の答えが役に立てば幸い

1
Nitesh Sethia