WYSIWYGモジュールを含むカスタムckeditor.styles.jsファイル


9

WYSIWYGモジュールを使用してCKeditorの「フォントスタイル」ドロップダウンをカスタマイズしようとしていますが、wysiwygモジュールのプロファイルエディターでckeditor.styles.jsのパスを指定する方法がありません。

詳細については、この投稿を参照してください。そのファイルの場所を指定する方法があるはずです。

回答:


6

これらは、drupal wyswiwygモジュールを使用してカスタムckeditorスタイルセットを追加する2つの方法です(確かに多くあります)。

  1. 提供されたモジュールCkeditor Stylesの使用
  2. 次のようにhook_wysiwyg_editor_settings_alterを使用します。

(コードはckeditor_stylesモジュールによってインスパイアされています)

カスタムモジュールで、hook_wysiwyg_editor_settings_alter実装を追加します。

/**
 * Implements hook_wysiwyg_editor_settings_alter().
 *
 * @param type $settings
 * @param type $context
 */
function MYCUSTOMMODULE_wysiwyg_editor_settings_alter(&$settings, $context) {
  // We only add the settings to ckeditor wysiwyg profiles.
  if ($context['profile']->editor == 'ckeditor') {
    $format = $context['profile']->format;
    $path = drupal_get_path('module', 'MYCUSTOMMODULE') . '/js';
    $settings['stylesSet'] = "mycustomstyleset:/$path/ckeditor_styles.js";
  }
}

そして、カスタムモジュールのサブディレクトリjsにckeditor_styles.jsという名前のファイルを追加します。

CKEDITOR.stylesSet.add('mycustomstyleset',
  [
    { name : 'Red', element : 'span', styles : {'color' : 'red' } },
    { name : 'CSS Style', element : 'span', attributes: { 'class' : 'my_style' } },
    { name : 'Marker: Yellow', element : 'span', styles : { 'background-color' : 'Yellow' } },
    { name : 'Heading 4' , element : 'h4' },
    { name : 'Blue Button', element : 'div', attributes : { 'class' : 'blue-button' } },
  ]);

私は本当にこれを働かせたかった。ここで使用するstylesSetファイルへの相対パスではなく、絶対パスを使用する必要がありました。そうしないと、wysiwygが消えてしまいます。それでも、[スタイル]ドロップダウンが無効になり、原因を特定できませんでした。
digitgopher、2015

グローバル$ base_url:を忘れないでください mycustomstyleset:$base_url/$path/ckeditor_styles.js
commonpike 2017

@commonpike不要$base_url
Felix Eve

4

私はいつもDrupalサイトでこれを行っています!@marblegravyの答えが最初のステップですが、対応するcssルールをCKEditorに追加するなどの操作を行うこともできます。これにより、エディターがカスタムスタイルの1つを適用しているときに、エディターが実際にそれらを適用し、エディターがプレビューできます。保存せずに変更!

私は最近、すべての可動部分について非常に詳細なブログ投稿をここに書きました:http : //drupalwoo.com/content/how-customize-ckeditor-drupal-7-site

チュートリアルでカバーするのは

  1. ツールバーをカスタマイズする方法
  2. カスタムckeditor.styles.jsファイルを作成します。これがサンプルです:

     CKEDITOR.addStylesSet( 'drupal',
     [
     /* Block Styles */
     { name : 'Heading 2'        , element : 'h2' },
     { name : 'Heading 3'        , element : 'h3' },
     { name : 'Heading 4'        , element : 'h4' },
     { name : 'Paragraph'        , element : 'p' },
     { name : 'Blue Image Button',
     element : 'div',
     attributes : {
     'class' : 'blue-image-button' }
     },
    
     /* Inline Styles */
     { name : 'Inline Quotation'    , element : 'q' },
      ...
    
  3. このカスタムスタイルファイルの場所がわかるようにCKEditorを構成する

  4. これらのスタイルに対応するCSSを実装し、CKEditorにこれらについても知らせます!

ここに画像の説明を入力してください

  1. セットアップをエディターとして使用する方法!

お役に立てば幸いです。これが機能するかどうかをお知らせください!


ステップ3はどこで行いますか?カスタムckeditor.styles.jsファイルについてCKEditorに知らせます。
バタンドワ2014

5
この答えは正しくありません。問題は、Drupal Wysiwygモジュールを使用してこれを解決する方法についてですが、作者はDrupal CKEditorモジュールを使用してそれを解決する方法を説明しています。2つの異なるもの。Wysiwygモジュールには、custom.styles.jsファイルを追加するオプションがありません
batigolix

4

小さなカスタムモジュールを書いたところです。私は(CKEditorモジュールではなく)Wysiwygモジュールを使用しています。これにより、テーマのckeditor.styles.jsからスタイルをロードできるようになります。

/**
 * Implements hook_wysiwyg_editor_settings_alter().
 */
function MYMODULE_wysiwyg_editor_settings_alter(&$settings, $context) {
  if ($context['profile']->editor == 'ckeditor') {
    $path = drupal_get_path('theme', 'THEMENAME');
    $settings['stylesSet'] = "drupal:/$path/ckeditor.styles.js";
  }
}

これが答えになるはずです!!!
Alex Gill、

0

WYSIWYGプロファイル設定(admin / config / content / wysiwyg、目的のプロファイルを編集)でスタイルを定義できます。

[CSS]タブ> [CSSクラス]

オプションで、「フォントスタイル」ドロップダウンリストのCSSクラスを定義します。

[ラベル] = [要素]。[クラス]の形式で、各行に1つのクラスを入力します。例:Title = h1.title

空白のままにすると、CSSクラスはロードされたスタイルシートから自動的にインポートされます。内部でstylesSet設定を使用します。


-1

オーバーライドしたckeditor.styles.jsファイルをテーマのルートに配置し、/ admin / config / content / ckeditor / edit /に移動します。次に、プロファイルごとにそれらを編集し、css フィールドセットを開いて、[定義済みのスタイル]フィールドで、[ テーマの使用] ckeditor.styles.jsを選択します。

* Predefined Style * sフィールドのヘルプから:

ckeditor.styles.jsファイルの場所を定義します。これは、デフォルトのツールバーにある[スタイル]ドロップダウンリストで使用されます。sites / all / modules / contrib / ckeditor / ckeditor.styles.jsファイルをテーマディレクトリ(themes / seven / ckeditor.styles.js)にコピーし、ニーズに合わせて調整します。


3
この回答は、CKEDitorモジュールの使用も想定しています。これは、質問の内容ではありません
batigolix
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.