WYSIWYGモジュールを使用してCKeditorの「フォントスタイル」ドロップダウンをカスタマイズしようとしていますが、wysiwygモジュールのプロファイルエディターでckeditor.styles.jsのパスを指定する方法がありません。
これらは、drupal wyswiwygモジュールを使用してカスタムckeditorスタイルセットを追加する2つの方法です(確かにもっとあります)。
(コードは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' } },
]);
私はこれを私のDrupalサイトに対して常に行います!@marblegravyの答えは最初のステップですが、CKEditorに対応するcssルールを追加して、エディターはカスタムスタイルの1つを適用しています。エディターは実際にそれらを適用し、エディターは変更を保存することなくプレビューできます!
私は最近、すべての可動部分について非常に詳細なブログ投稿をここに書きました: http://drupalwoo.com/content/how-customize-ckeditor-drupal-7-site
チュートリアルでカバーするのは
カスタム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' },
...
このカスタムスタイルファイルの場所がわかるようにCKEditorを構成する
お役に立てば幸いです。これが機能するかどうかをお知らせください!
小さなカスタムモジュールを書いたところです。私は(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";
}
}
WYSIWYGプロファイル設定(admin/config/content/wysiwyg、目的のプロファイルを編集)でスタイルを定義できます。
[CSS]タブ> [CSSクラス]
オプションで、「フォントスタイル」ドロップダウンリストのCSSクラスを定義します。
[ラベル] = [要素]。[クラス]の形式で、各行に1つのクラスを入力します。例:Title = h1.title
空白のままにすると、CSSクラスはロードされたスタイルシートから自動的にインポートされます。 stylesSet 設定を内部で使用します。