ckeditor 不读取媒体嵌入代码

Posted 2023-03-13

【中文标题】ckeditor 不读取媒体嵌入代码

【英文标题】：ckeditor doesn´t read media embed code

【发布时间】：2013-06-03 06:34:49

【问题描述】：

我使用 ckeditor 的媒体嵌入插件。它工作正常，代码正确保存在数据库和 youtube、soundcloud 等中。播放器在页面上显示正常。但是当用户去他的管理部门时，他可以编辑信息，里面的文本和带有标签的文本没有显示，所以当用户点击保存按钮时，所有以前保存的 iframe 都将被“删除”，只有其余的的格式化文本将被保存。有没有办法在ckeditor中显示iframe代码？

【参考方案1】：

我假设您使用 Advanced Content Filter (ACF) 附带的 CKEditor 4.1.x。最有可能的是，您使用不同的编辑器进行前端/后端编辑。

每个插件都使用自己的标签、属性和类规则扩展allowedContent 属性。使用这些规则，编辑器会自动删除不需要的内容，例如，如果您的前端编辑器允许 <iframe>，因为它加载了 mediaembed 插件，那么没有此插件的后端编辑器将从内容中删除您的 <iframe>。

此外，ACF 还会观察您的工具栏配置，因此即使您包含插件但您不希望工具栏中的按钮出现，该按钮提供的任何内容（即<iframe>）也将在编辑器的输出中被禁止。

您可以轻松检查您的编辑是否接受<iframes>。基本上调用以下命令并查看输出：

CKEDITOR.instances.yourInstance.filter.check( 'iframe' );
>>> true // it's allowed

如果是false，那么有几种解决方案可以解决您的问题：

在您的后端编辑器中启用 mediaembed 插件（工具栏中的按钮）。 扩展 config.extraAllowedContent 以恢复它。

虽然第一个solution is straightforward，但第二个可能对您来说很棘手。 allowedContent mediaembed 插件的规则如下（见plugin's code）：

allowedContent: 'iframe[*]' // stands for: iframe element with any attribute

如果您将以下内容添加到后端编辑器的配置中，您将在内容中恢复 iframe，而无需加载 mediaembed 插件：

config.extraAllowedContent = 'iframe[*]'

如果此解决方案不适合您，请提供编辑器配置和 CKEditor 版本，以便人们可以帮助您。

【讨论】：

这同样适用 config.extraAllowedContent = 'iframe(*)';

@SiddharthChauhan 不，根据the documentation (*) 只允许任何类。 [*] 用于允许任何属性。

@Prim 我同意。对不起，我缺乏知识

【参考方案2】：

CKEDITOR.config.allowedContent = true;

为我工作。

【参考方案3】：

要允许 CKEditor 存储自定义 html 而不会消失，您需要将 allowed content 标志设置为 true。

var allowedContent = true; // to allow custom html like iframe or div's

CKEDITOR.replace('yourEditorWindowsId', 
    allowedContent
,