web-dev-qa-db-ja.com

CKeditorですべてのhtmlタグと属性を許可するにはどうすればよいですか？

すべてのhtmlタグを許可しようとしています

<div> <p> <span> <i> /* etc */

以下のようなHTML属性（クラス、ID）：

<div id="foo" class="bar" style="z-index:1;">SOME COOL CONTENT HERE</div>

ckeditorで。

Docs.ckeditor.comのようなものを見つけました

config.allowedContent = {
    $1: {
        // Use the ability to specify elements as an object.
        elements: CKEDITOR.dtd,
        attributes: true,
        styles: true,
        classes: true
    }
};
config.disallowedContent = 'script; *[on*]';

ckeditorのルートフォルダのconfig.jsに追加しました。しかし、何も変わっていません。 ckeditorのソースコードブロックにhtmlタグを追加しようとすると、htmlコンテンツがすべて消去されます。

何が欠けていますか？前もって感謝します。

バージョン：## CKEditor 4.4.7

編集および更新：

@Eelkeと@Necreauxが答えた後、config.jsにallowedContent = trueを追加しました。 <div> <span> <h3>などの基本的なHTML要素が完全に機能するようになりました。しかし、ckeditorはまだ<i>タグをストライピングしています。

JSを完全に構成する

    CKEDITOR.editorConfig = function( config ) { 
    config.allowedContent = true;
    config.removeFormatAttributes = '';
    // Define changes to default configuration here.
    // For complete reference see:
    // http://docs.ckeditor.com/#!/api/CKEDITOR.config

    // The toolbar groups arrangement, optimized for two toolbar rows.
    config.toolbarGroups = [
        { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
        { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
        { name: 'links' },
        { name: 'insert' },
        { name: 'forms' },
        { name: 'tools' },
        { name: 'document',    groups: [ 'mode', 'document', 'doctools' ] },
        { name: 'others' },
        '/',
        { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
        { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
        { name: 'styles' },
        { name: 'colors' },
        { name: 'about' }
    ];

    // Remove some buttons provided by the standard plugins, which are
    // not needed in the Standard(s) toolbar.
    config.removeButtons = 'Underline,Subscript,Superscript';

    // Set the most common block elements.
    config.format_tags = 'p;h1;h2;h3;pre;';

    // Simplify the dialog windows.
    config.removeDialogTabs = 'image:advanced;link:advanced';
};
javascriptregexckeditor
18
HddnTHA

最初の理由は、コンテンツに関係なく一部の要素、属性、スタイル、およびクラスが削除される理由です。これは Advanced Content Filter が原因です。設定を変更する方法の詳細については、この質問を参照してください。 CKEditorは自動的にdivからクラスを削除します

別のことは、空のインライン要素が許可されているかどうかに関係なく削除される理由です。この質問もすでに質問されています- CKEditor strips <i> Tag を参照してください。

12
Reinmar

すべて許可されている場合は、allowedContent = true

12
Eelke

以下を試しましたか？

config.allowedContent = true;
config.removeFormatAttributes = '';
7
Necreaux

これらは、空のときにCKEditor 4が削除するタグです。

abbr、頭字語、b、bdi、bdo、big、cite、code、del、dfn、em、font、i、ins、label、kbd、mark、meter、output、q、Ruby、s、samp、small、span、ストライク、ストロング、サブ、sup、時間、tt、u、var

すべての空のタグを許可するには-これをconfig.jsに追加してください：

for(var tag in CKEDITOR.dtd.$removeEmpty){
    CKEDITOR.dtd.$removeEmpty[tag] = false;
}
3
no81no

これを試してみましたか？

<script>
        CKEDITOR.replace( 'text-area-id' );
        CKEDITOR.config.allowedContent = true;
</script>
2
Jake Conner

CKEditor 4の回答。

古いバージョンのCKEditorおよびこのタイプの構成は使用しないでください。

構成にconfig.allowedContent = true;を追加するだけです。すべてのタグが許可されます。

0
Deva