CKEditor：允许视频嵌入代码答案

【问题标题】：CKEditor: Allow video embed codeCKEditor：允许视频嵌入代码
【发布时间】：2011-07-10 10:41:21
【问题描述】：

我正在使用 CKEditor 并希望允许插入来自 YouTube、Vimeo 等的嵌入代码。 CKEditor 将所有标签转换为等效的 HTML 字符，这很好，但我希望它对此类内容进行例外处理。 iFrames 似乎是它现在的做法，那我如何告诉 CKEditor 不理会 iFrame 标签？

谢谢。

【问题讨论】：

标签： video embed ckeditor

【解决方案1】：

刚刚在搜索相同解决方案时发现了您的问题。这是我发现的。基本上，它会向您的工具栏添加一个按钮，如图像按钮，但它会弹出一个框让您将来自 YouTube、Vimeo 等的嵌入代码粘贴到其中。看起来效果不错。

http://www.fluidbyte.net/index.php?view=embed-youtube-vimeo-etc-into-ckeditor

编辑：链接到 archive.org： http://web.archive.org/web/20110805213357/http://www.fluidbyte.net/index.php?view=embed-youtube-vimeo-etc-into-ckeditor

【讨论】：

我在尝试嵌入时收到错误 400。为了修复它，我只是将以下代码（第 30 行）从 plugin.js '<iframe src="'+me.path+'/dialogs/mediaembed.html" frameborder="0" name="iframeMediaEmbed" id="iframeMediaEmbed" allowtransparency="1" style="width:100%;margin:0;padding:0;"></iframe>' 更改为 html: '<iframe src="' + me.path + 'dialogs/mediaembed.html" frameborder="0" name="iframeMediaEmbed" id="iframeMediaEmbed" allowtransparency="1" style="width:100%;margin:0;padding:0;"></iframe>'
他显然正在将他的博客转移到 Tumblr 并且（大概）很快就会转移他的内容。同时：web.archive.org/web/20110805213357/http://www.fluidbyte.net/…

【解决方案2】：

没有。这些答案都不是完全准确的。该插件对于您想要做的事情来说太过分了。在项目范围内搜索以下文本：extraAllowedContent 并将'iframe[!src];' 添加到任何其他允许的内容中。然后添加以下内容：allowedContent: true,

【讨论】：

【解决方案3】：

CKEditor 带有一个config.js 文件。在此文件中，将参数config.allowedContent 设置为true。

例如，

CKEDITOR.editorConfig = function( config )
{
    config.toolbar_TRiGCustom =
    [
        ['Bold','Italic','Underline','-','JustifyLeft','JustifyCenter','-','Blockquote'],
        ['FontSize'],
        ['Undo','Redo'],
        ['Link','Unlink','Image','Table'],
        ['NumberedList', 'BulletedList'],
        ['Source'],
        ['Maximize']
    ];
    config.toolbar = 'TRiGCustom';
    config.forcePasteAsPlainText = true;
    config.forceSimpleAmpersand = true;
    config.resize_enabled = false;
    config.toolbarCanCollapse = false;
    config.scayt_autoStartup = true;
    config.language = 'en';
    config.uiColor = '#76BC49';
    config.width = '97%';
    config.extraPlugins = 'maximize';
    config.allowedContent = true;
};

我在Amixa Blog 上找到了这个解决方案。该博客文章似乎是为名为 ASPMAKER 的特定 CMS 编写的，并且还建议对该 CMS 中的特定 ASP 文件进行调整，但是对 CKEditor 配置的此编辑是通用的，并且适用于任何使用它的 CKEditor。 config.allowedContent = true; 行就是你所需要的。

【讨论】：

TL;DR - 添加 config.allowedContent = true;
如果要禁用高级内容过滤器，请将CKEDITOR.config.allowedContent 设置为true。所有可用的编辑器功能都将被激活，输入数据不会被过滤。请注意，当 ACF 被禁用时，您不能使用 CKEDITOR.config.disallowedContent。如果你只使用CKEDITOR.config.allowedContent = true，你将允许用户做讨厌的事情。

【解决方案4】：

简单的方法是启用“来源”按钮。如果您使用完整的工具栏（不是基本的），它已经存在了。

【讨论】：

感谢您的建议，但最终用户根本不是技术人员，给他源按钮可能是一场灾难。

【解决方案5】：

启用“来源”按钮并不能解决此问题。然后可以粘贴诸如“iframe”之类的嵌入代码，但是如果您再次返回并编辑该字段，CKeditor 将删除它。您首先需要配置 CKeditor 以允许 iframe 嵌入。

【讨论】：

"您首先需要配置 CKeditor 以允许 iframe 嵌入。"怎么样？