Drupal WYSIWYG - ノードタイプ、ページなどに応じて異なるエディタCSS？

Question

私はWYSIWYGモジュールでDrupalを使用しています。

私のエディタのCSSを自分のページと同じにしたいので、色やフォントなどはすべてページの保存時にどのように見えますか？私は異なるノードタイプと特定のページに異なるCSSを持っています。これらのCSSルールをエディタにインポートするにはどうしたらいいですか？

htmlがWysiwygで使用されているiframeの外側にある場合、通常のCSSセレクタを使用することはできません。セレクタとして '.cke_show_borders'を使用すると、別のノードの編集ページで異なるスタイルを読み込むことはできません。

Iveはモジュールページにこの質問を掲載しました。それにinbuiltソリューションはありませんが、誰もこの問題の回避策を見つけましたか？そこには、それの外のページからスタイルをiframeに持っていくjavascriptの方法がありますか？

おかげ

Answer 1

私は基本的な答えが "残念ながら、現時点ではDrupalではない"と恐れています。ページごとに変化するCSSを真に見るためには、WYSIWYGシステムは非常に「スマート」で、システムの他の部分と緊密に統合する必要があります。たとえば、CSSファイルリンクを生成するヘッダーの作成。

私は実際にここで説明した機能のいくつかを達成しようと努力しました。ページが異なる準備済みのスタイルシートで異なるCSSスタイルのグループを選択できるようにしました。これらのスタイルシートは、 WYSIWYGエディタで。それはたくさんの仕事でしたが、残念ながらそれは分かち合うのが良い展開の段階ではありません。 Drupalの次の可能性のあるステップは、あなたのテンプレートに投げかけているCSSを自動的に覚えているのではなく、このタイプの機能を組み込むことです - 単にDrupalの自由がテンプレートを与えるという理由で、 "コア"あなたがCSSで何をしているのか、本当に分かります。 DrupalがテンプレートとエディタのCSSをあなたが記述する方法で統合しようとすると、テンプレート化が大幅に制限されるか、今よりも複雑になります。

WYSIWYG APIを使用すると、エディタに独自のスタイルシートを指定することができます。残念ながら、動的ではないため、PHPコードに基づいてスタイルシートのパスを計算することはできません。

Answer 2

あなたは（あなたがCKEditorバージョンやTinyMCEのを使用していますか？）あなたのテキストの周りにいくつかのカスタムクラスを設定するには、WYSIWYGエディタでスタイルを定義することができます（iframe内に読み込み）。 その後、hook_init()を使用して、drupal_add_css()機能を使用してコンテンツのCSSテキストファイルを追加することができます。

Answer 3

私はこの問題のために、このフックを使用するdrupalwayはないが、それはとにかく働く

（今のdrupal7にのみ存在している）CKEditorバージョンと同様の問題があったとhook_js_alterを使用してそれを解決するために管理。

たぶん、このアプローチは、結果として、私は通常drupal_add_js（$データ、「設定」）を介してロードされているJSの設定を変更しています、あなたはTinyMCEはそう

のような他のエディタで同じ結果を達成するのを助けることができます。だから、Drupal.settings.wysiwyg.configs.ckeditor.formatfull_html.contentsCssのようなものがあり、それに新しい要素を追加しています。これは、CSSスタイルの配列で、ckeditor/wysiwygはエディタを起動するときに読み込まれます。このコードスニペットはフルHTMLエディター（formatfull_html）に適用されます。必要に応じて変更または変更する必要があります。

function mymodule_js_alter(&$javascript) { 
    // Checking if we're editing a node. 
    if (arg(0) == 'node' && arg(2) == 'edit') { 
    $nid = arg(1); 

    // Loading a node to check it's type. 
    // we may be certain that it's loaded from cache. 
    $node = node_load((int) $nid); 
    if ($node->type == 'your-node-type') { 
     foreach ($javascript['settings']['data'] as &$row) { 
     // This will make changes to the proper js-settings record. 
     if (isset($row['wysiwyg']['configs']['ckeditor']['formatfull_html']['contentsCss'])) { 
      $row['wysiwyg']['configs']['ckeditor']['formatfull_html']['contentsCss'][] = url(drupal_get_path('module','mymodule') . '/wysiwyg-style.css'); 
     } 
     } 
    } 
    } 
} 

エディタのボタンドロップダウンのスタイルは、これらのスタイルの影響を受けることにも注意してください。

編集：私は最近、この問題に対するより "Drupalway"ソリューションを作成することができましたが、アプローチは同じです。

function mymodule_element_info_alter(&$types) { 
    $types['text_format']['#pre_render'][] = 'mymodule_pre_render_text_format'; 
} 

function mymodule_pre_render_text_format($element) { 
    if ($element['#entity_type'] == 'node' && $element['#bundle'] == "your-node-type" && $element['#type'] == 'textarea') { 
    $setting = array(); 
    $setting['wysiwyg']['configs']['ckeditor']['formatfull_html']['contentsCss'][] = url(drupal_get_path('module','mymodule') . '/wysiwyg-style.css'); 
    drupal_add_js($setting , 'setting'); 
    } 
    return $element ; 
}