CKEditor: enable embed code

Question

I am using CKEditor and want to allow embed code for embedding from YouTube, Vimeo, etc. CKEditor turns all tags into the equivalent of HTML Chars, which is good, but I want it to make exceptions for such content. iFrames looks like it's done these days, so how can I tell CKEditor to leave the iFrame tags alone?

Thanks.

Answer 1

Just found my question while searching for the same solution. Here is what I found. In principle, it adds a button to your toolbar, for example, the "Image" button, but a box appears in it to insert code for embedding from YouTube, Vimeo, etc. It seems to work very 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

Turning on the Source button does not solve this problem. Paste code, such as "iframe", you can paste, but if you go back and edit the field a second time, CKeditor will split it. You need to configure CKeditor to first enable iframe injection.

Answer 3

No. None of these answers are accurate. The plugin is redundant for what you want to do. Do a large-scale project search for the following text: extraAllowedContent and add 'iframe[!src];' to any other permitted content. Then add the following: allowedContent: true,

Answer 4

A simple way is the "Source" button. If you use a full toolbar (not basic), it is already present.

Answer 5

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

For instance,

 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 Amixa Blog . The blog post seems to be written for a specific CMS called ASPMAKER, and also recommends tweaks for specific ASP files in this CMS, but this change in CKEditor configuration is common and applies to CKEditor wherever you use it. String config.allowedContent = true; - that’s all you need.