如何在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 = {
    $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。现在基本的 HTML 元素如 <div> <span> <h3> 工作得非常完美。但是 ckeditor 仍然会剥离 <i> 标签。

完整的 Config 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';
};

- HddnTHA

---

请发布您的完整config.js文件，并指定您正在使用的CKEditor版本。 - Necreaux

这是一个不同的问题，为什么空的内联元素会被移除。这个问题的基础是一个 https://dev59.com/K2Uo5IYBdhLWcg3w7jEq 的 DUP。 - Reinmar

@Reinmar，我不确定问题有什么不同，但我问为什么ckeditor会剥离HTML元素和属性。 - HddnTHA

@Reinmar 顺便说一下，我在那个问题的答案中找到了答案。谢谢你指出来 (: - HddnTHA

请您把您的评论改成回答，这样我就可以接受它了。 - HddnTHA

Answer 1

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

- Eelke

---

我也尝试了一下。它允许除<i></i>和其他一些元素之外的所有HTML元素。 - HddnTHA

在哪里？你能更具体地说明一下吗？ - TOPKAT

我正在使用它，但它不允许我放置<label>标签。 - Heemanshu Bhalla

Answer 2

第一件事是为什么某些元素、属性、样式和类会被删除，而不考虑它们的内容。这是由于高级内容过滤器引起的。有关如何更改其设置的详细信息，请参见此问题：CKEditor自动从div中剥离类。

另一件事是为什么空的行内元素会被删除，无论它们是否被允许。这个问题也已经被问过了 - 请参见CKEditor剥离标签 - 注意那里有一个以上的好答案。

- Reinmar

---

CKEDITOR.replace('editor').config.allowedContent = true;的意思是允许在CKEDITOR编辑器中使用所有类型的内容，包括HTML元素和属性。 - Juni Brosas

Answer 3

你尝试过以下方法吗？

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

- Necreaux

---

我现在尝试了一下，但什么也没改变。仍然擦除了<i>标签。感谢你的努力。 - HddnTHA

还要添加 config.removeFormatTags = ''; - Necreaux

它是否已经将它们翻译成“em”了？这是我得到的行为，我不确定你为什么有这种行为。 - Necreaux

顺便说一下，<em>也被剥离了。 - HddnTHA

我正在使用4.4.3版本，但我无法复制任何内容。你尝试过清除所有自定义配置设置并查看是否解决了问题吗？其中一些其他选项可能会起作用。另外，你使用的是哪种安装类型？ - Necreaux

我正在使用标准包。如果它们阻止了某些规则，我将尝试在config.js中注释其他自定义设置。 - HddnTHA

Answer 4

你尝试过这个吗？

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

- Tayyab Hussain

Answer 5

这些是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;
}

- no81no

Answer 6

CKEditor 4会删除空标签，所以您可以在不更改任何配置设置的情况下进行技巧操作。

替换

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

With

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

现在标签有内容，即 ，所以CKEditor将不会删除该标签。

- Dhaval Bharadva

Answer 7

CKEditor 4 的答案。

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

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

- Deva