WYSIWYG + CKEditorがHTMLクラスを削除しないようにする

CKEditorでWYSIWYGエディターを使用しています。「ソース」ビューから要素にカスタムクラスを追加すると、ソースビューから切り替えるときにCKEditorがそれらのクラスを取り除きます。

これに対する解決策を探しているときに、CKEditorを単独で使用する場合の修正方法を説明するCKEditorモジュールのページを見つけました。（基本的に、config.allowedContent = true高度なコンテンツフィルター設定でJS構成を設定する必要があります）。

ただし、WYSIWYGを介してCKEditorを使用する場合、これらの設定は管理インターフェースで公開されません。WYSIWYGを介してCKEditorを使用する場合、同じことをどのように実現しますか？

PS：CKEditorはメディアプラグインと統合されていないため、単独では使用できません。

CKEditorのどのバージョンを使用していますか？エディターに定義されていない属性を自動的に削除する自動コンテンツフィルター（ACF）と呼ばれる機能を持つCKEditor 4.1+に問題があります：https : //drupal.org/node/1956778

問題のパッチ＃37は私のために働いた。

解決策を見つけました。

これはフィルタリングをオフにします、それは機能していますが、良い考えではありません...

config.allowedContent = true;

コンテンツ文字列を操作することは、idなどでは正常に機能しますが、クラスとスタイルのフィルタリングでは（）と{}があるため、クラスとスタイルの属性では機能しません。

だから私の賭けは、エディタで任意のクラスを許可することです：

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];*(*);*{*}';

それがより良い解決策であることを願っています...

これは、WYSIWYGモジュールに追加する必要があるもののようです。カスタム設定をエディターに追加する機能は、かなり広範囲にわたる要件です。しかし、それがない場合でも、アップグレード時に壊れるので、モジュール自体を編集しないことをお勧めします...幸い、モジュールはへの呼び出しを提供する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の回答からのものです。これは、任意の要素でクラスとスタイルの属性を許可するようです。残りは単なる例のエントリです。別の例として、このエントリはメディアモジュールに必要なタグを許可します。

'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-filterは、許可されたHTML要素にない要素からクラスを取り除きます。段落タグ（<p>）は、クラスが適用される最も頻繁な要素である可能性がありますが、デフォルトではそこにありません（混乱して不自然になる場合があります）。そこに配置すると、Filtered HTMLはこれらのタグからクラスを削除しなくなります。イメージタグ（<img>）についても同様です。