web-dev-qa-db-ja.com

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

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

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

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

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

7wysiwyg
9
jrharshath

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

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

4
Dave Bruns

解決策を見つけました。

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

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

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

10
Tommy at LIW

これは、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"は明らかにカスタムモジュールの名前です。これにより、他の人のモジュールを編集することなくタスクを実行できます。

2
Trey

次を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, 
  );
_
0
Todd Austin

ソースをハックすることなく、またこれらの設定が読み取られているブリープ音を把握することなく、独自のカスタムモジュールにこれを追加できます。

_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)',
_
0
commonpike

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

0
cptstarling