Question

我正在使用Drupal和WYSIWYG模块。

我希望编辑器中的CSS与我的页面相同，因此颜色和字体等都会在页面保存时看起来如何。我对不同的节点类型和某些页面有不同的CSS。如何将这些CSS规则导入编辑器？

如果html在Wysiwyg使用的iframe之外，则使用普通的CSS选择器不起作用。使用'.cke_show_borders'作为选择器可以正常工作，但是我无法在不同的节点编辑页面上加载不同的样式。

我已经在模块页面上发布了这个问题，似乎没有一个内置的解决方案，但有没有人找到解决这个问题的方法？是否有一些javascript方式将样式从iframe外部的iframe中引入？

由于

Answer 1

我遇到了与ckeditor类似的问题并设法使用hook_js_alter解决了问题（目前只在drupal7中出现）

使用这个钩子来解决这个问题并不是什么问题，但无论如何都可以使用。

也许这种方法可以帮助您为其他编辑器（如tinymce

）获得相同的结果

因此，我正在改变通常通过drupal_add_js（$ data，'setting'）加载的js设置。所以有类似Drupal.settings.wysiwyg.configs.ckeditor.formatfull_html.contentsCss的东西，我正在为它添加一个新元素。这是一个css样式数组，ckeditor / wysiwyg在编辑器中加载。此代码段适用于Full 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 ;
}

Answer 2

您可以在WYSIWYG编辑器中定义样式（您使用的是CKeditor还是TinyMCE？）在文本周围设置一些自定义类（在iframe中读取）。之后，您可以使用hook_init()通过drupal_add_css()函数添加加载上下文css文件。

Answer 3

我担心的基本答案是“不幸的是，目前不适合Drupal。”为了真正看到页面之间不同的CSS，WYSIWYG系统需要非常非常“智能”并与系统的其他部分紧密集成 - 例如生成用于生成CSS文件链接的标头

我实际上已经开发了一个模块，试图实现你在这里描述的一些功能 - 允许页面在不同的准备样式表上选择不同的CSS样式组，然后在这些样式表中重新解析这些样式表以供特定用途WYSIWYG编辑器。这是一项很多工作，不幸的是，它并没有达到分享的好处。 Drupal的下一个可能步骤是包含这种类型的功能，而不是自动神奇地知道你在模板中抛出的任何css - 只是因为Drupal给你模板的自由意味着“核心”不知道所有你正在用CSS做的事情。如果Drupal试图以你描述的方式集成模板和编辑器css，模板将受到严重限制，或者比现在复杂得多。

如果您使用WYSIWYG API，您可以在那里为编辑器指定自己的样式表 - 遗憾的是，它不是动态的，因此您无法根据PHP代码计算样式表的路径。

Drupal WYSIWYG - 每个节点类型，页面等不同的编辑器CSS？

3 个答案: