web-dev-qa-db-ja.com

CKEditorは自動的にdivからクラスを取り除きます

私は CKEditor を私のウェブサイトのバックエンドエディターとして使用しています。ソースボタンを押すたびにコードが適切に見えるようにコードを変更したいので、曲がり角を曲がります。たとえば、ソースにアクセスして<div>を作成した場合...

<div class="myclass">some content</div>

その後、明白な理由もなく、<div>からクラスを削除します。そのため、ソースを再度ヒットすると、...に変更されました。

<div>some content</div>

私は、config.jsでこの刺激的な動作をオフにできると思いますが、それをオフにするためにドキュメントで何かを見つけていません。

classhtmlckeditor
133
Iain Simpson

コンテンツフィルタリングを無効にする

最も簡単な解決策は、config.jsと設定に行くことです：

config.allowedContent = true;

（ブラウザのキャッシュをクリアすることを忘れないでください）。その後、CKEditorは入力されたコンテンツのフィルタリングを停止します。ただし、これにより、CKEditorの最も重要な機能の1つである content filtering が完全に無効になります。

コンテンツフィルタリングの構成

CKEditorのコンテンツフィルター をより正確に構成して、必要な要素、クラス、スタイル、属性のみを許可することもできます。このソリューションははるかに優れています。CKEditorは、コンテンツをコピーして貼り付けるときにブラウザーが生成する大量の不正なHTMLを引き続き削除しますが、必要なコンテンツを削除しないためです。

たとえば、デフォルトのCKEditorの構成を拡張して、すべてのdivクラスを受け入れることができます。

config.extraAllowedContent = 'div(*)';

または、いくつかのBootstrapもの：

config.extraAllowedContent = 'div(col-md-*,container-fluid,row)';

または、dirおよびdt要素のオプションのdd属性を使用して説明リストを許可できます。

config.extraAllowedContent = 'dl; dt dd[dir]';

これらは非常に基本的な例にすぎません。あらゆる種類のルールを書くことができます-属性、クラス、またはスタイルを要求し、特別な要素のみに一致し、すべての要素に一致しますまた、コンテンツを禁止し、CKEditorのルールを完全に再定義することもできます。続きを読む：

277
Iain Simpson

私は解決策を見つけました。

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

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

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

55
Tommy at LIW

Edit：この回答は、drupalでckeditorモジュールを使用する人向けです。

Ckeditor jsファイルを変更する必要のないソリューションを見つけました。

この回答は here からコピーされます。すべてのクレジットは元の著者に送られるべきです。

「管理>>設定>> CKEditor」に進みます。 [プロファイル]で、プロファイルを選択します（例：完全）。

そのプロファイルを編集し、「詳細オプション>>カスタムJavaScript構成」でconfig.allowedContent = true;を追加します。

enter image description here

[パフォーマンス]タブでキャッシュをフラッシュすることを忘れないでください。

15
sepehr

CKEditor v4.1以降、CKEditorのconfig.jsでこれを行うことができます。

CKEDITOR.editorConfig = function( config ) {
  config.extraAllowedContent = '*[id](*)';  // remove '[id]', if you don't want IDs for HTML tags
}

許可されたコンテンツルールの詳細な構文 の公式ドキュメントを参照できます。

14
Marty ZHANG

ckeditor 4.xを使用している場合は、試すことができます

config.allowedContent = true;

ckeditor 3.xを使用している場合、 この問題 になっている可能性があります。

config.jsに次の行を入れてみてください

config.ignoreEmptyParagraph = false;
10
Wasif.Butt

これは、ckeditorでACF（自動コンテンツフィルター）と呼ばれます。テキストコンテンツで使用しているすべての不要なタグを削除します。config.jsファイルでこのコマンドを使用すると、このACKをオフにする必要があります。

config.allowedContent = true;
9
Mari Selvan

公式の高度なコンテンツフィルタガイド および プラグイン統合チュートリアル を参照してください。

この強力な機能については、これ以上のことがわかります。 config.extraAllowedContent も参照してください。これはニーズに適しているようです。

6
oleq

DrupalとCKEditorライブラリで「WYSIWYG」というモジュールを使用する場合、次の回避策が解決策になる可能性があります。私にとってそれは魅力のように機能します。 Drupal 7.33でCKEditor 4.4.5およびWYSIWYG 2.2を使用しています。私はこの回避策をここに見つけました： https://www.drupal.org/node/1956778 。

ここにあります：カスタムモジュールを作成し、「。module」ファイルに次のコードを配置します。

<?php
/**
 * Implements hook_wysiwyg_editor_settings_alter().
 */
function MYMODULE_wysiwyg_editor_settings_alter(&$settings, $context) {
  if ($context['profile']->editor == 'ckeditor') {
    $settings['allowedContent'] = TRUE;
  }
}
?>

これが他のDrupalユーザーに役立つことを願っています。

4
pyretta

次に、CKEDITOR 4.xの完全な例を示します。

HTML

<textarea name="post_content" id="post_content" class="form-control"></textarea>

スクリプト

CKEDITOR.replace('post_content', {
   allowedContent:true,
});

上記のコードは、エディター内のすべてのタグを許可します。

詳細： CK EDITOR許可コンテンツルール

2
Sanchit Gupta

この問題を解決したのは、フィルター処理されたhtmlではなく完全なhtmlを使用するように切り替える（テキスト形式ドロップダウンボックスのエディターの下）ことです。そうしないと、スタイルが消えてしまいます。

0
cdavidyoung

drupalを使用する場合の別のオプションは、使用するcssスタイルを単に追加することです。そうすれば、スタイルやクラス名は削除されません。

私の場合、drupal 7の[css]タブの下に次のようなものを追加します。

facebook = span.icon-facebook2

また、フォントスタイルボタンが有効になっていることを確認してください

0
Daniel

このconfig.allowedContent = true;を追加したいと思います。 config.jsではなくckeditor.config.jsファイルに追加する必要があり、config.jsは私のために何もしませんでしたが、ckeditor.config.jsの上部に追加するとdivクラスが保持されました

0
Alpdog14

Ckeditor 4.7.1では、chromeでも同じ問題に直面します。 ckeditor instanceReadyでpasteFilterを無効にします。このプロパティは、Advance Content Filter（ACF）のすべてのフィルターオプションを無効にします。

 CKEDITOR.on('instanceReady', function (ev) {
        ev.editor.pasteFilter.disabled = true;
    });
0
pandian_Snkl