防止WYSIWYG + CKEditor剥离html类

我在CKEditor中使用WYSIWYG编辑器。我发现，当从“源”视图向我的元素添加自定义类时，CKEditor在切换出源视图时会剥离这些类。

搜寻解决方案时，我发现了CKEditor模块页面，其中介绍了如何在单独使用CKEditor时解决此问题。（基本上，我们需要config.allowedContent = true在其高级内容过滤器设置中设置一个JS配置）。

但是，通过WYSIWYG使用CKEditor时，这些设置不会在管理界面中公开。通过所见即所得使用CKEditor时，您如何实现相同的目的？

PS：我不能单独使用CKEditor，因为它没有与媒体插件集成。

您正在使用哪个版本的CKEditor？CKEditor 4.1+存在一个问题，该问题具有一个称为“自动内容筛选器”（ACF）的功能，该功能将自动剥离未为编辑器定义的属性：https : //drupal.org/node/1956778

该问题中的第37个补丁对我有用。

我找到了解决方案。

这会关闭过滤功能，但可以正常工作，但不是一个好主意...

config.allowedContent = true;

播放内容字符串适用于id等，但不适用于class和style属性，因为使用（）和{}可以进行class和style过滤。

所以我的选择是允许编辑器中的任何类是：

config.extraAllowedContent = '*(*)';

这允许任何类和任何内联样式。

config.extraAllowedContent = '*(*);*{*}';

要仅对任何标记允许class =“ asdf1”和class =“ asdf2”：

config.extraAllowedContent = '*(asdf1,asdf2)';

（因此您必须指定类名）

仅对p标签仅允许class =“ asdf”：

config.extraAllowedContent = 'p(asdf)';

要允许任何标签使用id属性：

config.extraAllowedContent = '*[id]';

等

要允许样式标签（<style type =“ text / css”> ... </ style>）：

config.extraAllowedContent = 'style';

稍微复杂一点：

config.extraAllowedContent = 'span;ul;li;table;td;style;*[id];*(*);*{*}';

希望这是一个更好的解决方案...

这似乎应该添加到所见即所得模块中，将自定义设置添加到编辑器的功能是相当普遍的要求。但是在没有这种情况的情况下，我仍然建议不要编辑模块本身，因为它会在升级时中断...幸运的是，该模块确实提供了对的调用drupal_alter，因此在自定义模块中：

function mymodule_wysiwyg_editor_settings_alter(&$settings, $context){
    //check if the editor is ckeditor and the version is at least 4.0
    if($context['profile']->editor=='ckeditor' && $context['editor']['installed version'][0]>3){
        //add custom settings for ckeditor 4.+ here
        $settings['allowedContent'] = TRUE;
    }
}

其中“ mymodule”显然是您的自定义模块的名称。这样就可以完成任务，而无需编辑其他人的模块。

尝试将以下内容添加到modules / wysiwyg / editors / ckeditor.inc

'allowedContent' => TRUE, 至 function wysiwyg_ckeditor_settings($editor, $config, $theme)

现在它显示为：

function wysiwyg_ckeditor_settings($editor, $config, $theme) {
  $settings = array(
    'width' => 'auto',
    // For better compatibility with smaller textareas.
    'resize_minWidth' => 450,
    'height' => 420,
    // @todo Do not use skins as themes and add separate skin handling.
    'theme' => 'default',
    'skin' => !empty($theme) ? $theme : 'kama',
    // By default, CKEditor converts most characters into HTML entities. Since
    // it does not support a custom definition, but Drupal supports Unicode, we
    // disable at least the additional character sets. CKEditor always converts
    // XML default characters '&', '<', '>'.
    // @todo Check whether completely disabling ProcessHTMLEntities is an option.
    // ADDED  'allowedContent' => TRUE, to keep WYSIWYG from removing classes
    'entities_latin' => FALSE,
    'entities_greek' => FALSE,
    'allowedContent' => TRUE, 
  );

无需破解任何资源，也无需尝试弄清楚这些设置在哪里被读取，您可以将其添加到自己的自定义模块中

function mymodule_wysiwyg_editor_settings_alter(&$settings, $context) {
    if ($context['profile']->editor == 'ckeditor') {
        $settings['extraAllowedContent'] = array(
            'a[download,type,length,href]',
            'span;ul;li;table;tr;td;style;*[id];*(*);*{*}'
        );
    }
}

OP要求的设置*(*);*{*}来自上面@Tommy的答案。这似乎允许在任何元素上使用class和style属性。其余只是示例条目。作为另一个示例，该条目允许媒体模块所需的标签。

'img[title,alt,src,data-cke-saved-src](wysiwyg-break,drupal-content);video[width,height,controls,src](*);source[src,type];audio[controls,src](*);img[*](media-element,file-default)',

Filtered HTML过滤器从其允许的HTML元素中未包含的元素中剥离类。<p>默认情况下，段落标记（）不在其中（这可能会造成混乱和不自然），尽管它可能是应用class的最常见元素。一旦将其放入其中，过滤的HTML将不再从这些标记中剥离类。图像标签（<img>）也是如此。