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

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 = {
    : {
        // 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。现在 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

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

Answer 2

您尝试过以下方法吗？

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

Answer 3

首先是为什么一些元素、属性、样式和类无论其内容如何都被删除。这是由 Advanced Content Filter. See this question for more details about how to change its settings: CKEditor automatically strips classes from div

引起的

另一件事是为什么无论是否允许空内联元素都会被删除。也有人问过这个问题 - 请参阅 CKEditor strips <i> Tag - 请注意，那里有不止一个好的答案。

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 删除了空标签，因此您可以在不更改任何配置设置的情况下进行操作。

替换

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

与

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

现在 <i></i> 标签有内容，即   所以 CKEditor 不会删除那个标签。

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

How to allow all html tags and attributes with CKeditor?

javascript

regex

ckeditor