CKEditor: Allow video embed code

Question

I am using CKEditor and want to allow the insertion of embed code from YouTube, Vimeo etc. CKEditor turns all tags into HTML Chars equivalent, which is good, but I want it to make exceptions for this kind of content. iFrames seem to be how it's done nowadays, so how can I tell CKEditor to leave iFrame tags alone?

Thank you.

Answer 1

Just found your question while searching for the same solution. Here is what I found. Basically, it adds a button to your toolbar like the Image button, but it pops up a box for you to paste the embed code from YouTube, Vimeo etc. into. Seems to work pretty well.

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

Edit: Link to archive.org: http://web.archive.org/web/20110805213357/http://www.fluidbyte.net/index.php?view=embed-youtube-vimeo-etc-into-ckeditor

Answer 2

No. None of these answers are exactly accurate. The plugin is overkill for what you want to do. Do a project wide search for the following text: extraAllowedContent and add 'iframe[!src];' to whatever other allowed content is there. Then add the following: allowedContent: true,

Answer 3

Enabling the "Source" button does not solve this problem. Embed code such as "iframe" can then be pasted, but if you come back and edit the field a second time, CKeditor will have stripped it. You need to configure CKeditor to allow iframe embedding in the first place.

Answer 4

The easy way is enabling the 'Source' button. If you use the full toolbar (not basic) it is already present.

Answer 5

CKEditor comes with a config.js file. In this file, set the paramater config.allowedContent to true.

For example,

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;
};

I found this solution on the Amixa Blog. The blog post seems to be written for a specific CMS called ASPMAKER, and also recommends tweaks to specific ASP files in that CMS, but this edit to CKEditor config is generic, and applies to CKEditor wherever you're using it. The line config.allowedContent = true; is all you need.