Question

我正在尝试允许所有的html标签

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

和html属性如下（class，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

编辑＆amp;更新：

在@Eelke和@Necreaux回答之后，我在config.js中添加了allowedContent = true。现在基本的html元素<div> <span> <h3>完美地工作了。但是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';
};

Answer 1

首先，为什么删除某些元素，属性，样式和类，而不管其内容如何。这是由Advanced Content Filter引起的。有关如何更改其设置的详细信息，请参阅此问题：CKEditor automatically strips classes from div

另一个原因是为什么无论是否允许空内联元素都会被删除。这个问题也已被提出 - 请参阅CKEditor strips <i> Tag - 注意那里有更好的答案。

Answer 2

如果允许一切，您可以使用allowedContent = true

Answer 3

您是否尝试过以下操作？

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

Answer 4

这些是CKEditor 4在空时删除的标签：

abbr，acronym，b，bdi，bdo，big，cite，code，del，dfn，em，font，i，ins，label，kbd，mark，meter，output，q，ruby，s，samp，small ，span，strike，strong，sub，sup，time，tt，u，var

允许所有空标记 - 尝试将其添加到config.js：

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

Answer 5

你试过这个吗？

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

Answer 6

CKEditor 4的答案。

不要使用旧版本的CKEditor和这种类型的配置。

只需在您的配置中添加config.allowedContent = true;。它将允许所有标签。

Answer 7

CKEditor 4 删除了 emtpy 标签，所以在这里你可以在不更改任何配置设置的情况下进行技巧。

替换

<i class="fas fa-arrow-right"></i>

与

<i class="fas fa-arrow-right">&nbsp;</i>

现在 <i></i> 标签具有内容，即  ，因此 CKEditor 不会删除该标签。

如何使用CKeditor允许所有html标签和属性？

7 个答案: