CKEditor 删除 <html> 和 <body> 标签

Question

我使用 CKEditor，如果我单击源按钮并粘贴 HTML 代码，如下所示：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html" />
</head>
<body>
<p>test</p>
</body>
</html>

并再次单击“来源”，然后提交表单，html、head 和、body 标签被删除，只保留 <p>test</p>!

CKEditor 配置：

CKEDITOR.replace('content', {
            extraPlugins: 'font,panelbutton,colorbutton,colordialog,justify,indentblock,aparat,buyLink',
            autoGrow_onStartup: true,
            enterMode: CKEDITOR.ENTER_BR,
            FullPage : false,
            allowedContent : true,
            ProtectedTags : 'html|head|body'
        });

你能帮帮我吗？

Answer 1

如果要编辑整个 HTML 页面，包含 <html>、<head> 和 <body> 元素，您需要设置 config.fullPage 选项到 true:

CKEDITOR.replace( 'content', {
    fullPage: true,
    extraPlugins: 'font,panelbutton,colorbutton,colordialog,justify,indentblock,aparat,buyLink',
    // You may want to disable content filtering because if you use full page mode, you probably
    // want to  freely enter any HTML content in source mode without any limitations.
    allowedContent: true,
    autoGrow_onStartup: true,
    enterMode: CKEDITOR.ENTER_BR
} );

注意在您的配置中使用正确的大小写（fullPage 不是 FullPage）。另请参阅以下资源以获取更多信息：

如果您想使用 config.autoGrow_onStartup 选项，您需要在您的设置中包含 Auto Grow 插件。

最后但同样重要的是，更改 Enter Mode setting to BR or DIV is not recommended. The default CKEDITOR.ENTER_P 模式得到所有编辑器功能和插件的完全支持，并且在创建 Web 内容的最佳实践方面也是最正确的。

如果你这样做是为了控制段落间距，你应该改用样式表。编辑contents.css文件，为<p>个元素设置合适的边距值，例如：

p { margin: 0; }

Answer 2

只需添加此代码即可防止编辑器从您的源代码中删除 'HEAD/BODY/HTML' 标记：-

CKEDITOR.replace( 'editor1', {              
    fullPage: true,
    allowedContent: true,
    autoGrow_onStartup: true,
    enterMode: CKEDITOR.ENTER_BR
});

CKEditor 删除 <html> 和 <body> 标签

CKEditor removing <html> and <body> tags

html

javascript

ckeditor