Support for iframes

[hpivanov]

📝 Provide detailed reproduction steps (if any)

Paste the following code in ckeditor:

✔️ Expected result

To render the iframe.

❌ Actual result

Iframe disappears.

📃 Other details

I know that there is a plugin called Media, but the point is that I want to allow the iframe tag not only for twitter and youtube.

• Browser: All
• OS: All
• CKEditor version: Latest
• Installed CKEditor plugins: Does't matter

---

If you'd like to see this feature implemented, add a 👍 reaction to this post.

[DenitsaGencheva]

I'm also interested in how can I make the iframe allowed element. Some of our clients have already put iframes in the editor (for integration with other components) and after the migration to v5 they are no longer able to use them.

[Mgsy]

Hi, thanks for the report. Currently, CKEditor 5 doesn't support iframes, so I'll confirm this issue as a feature request. 

Also, you can try to implement it on your own, defining a proper schema and conversion.

[hpivanov]

Could you show an example of allowing specific element, because for sure there are a lot of people that would like to understand it more clearly with simple example. I didn't find any example in the documentation.

[dzpt]

@MrManojSingh modelWriter.createElement is undefined.

[hpivanov]

@dzpt Try modelWriter.writer.createElement.

[dzpt]

@hpivanov you saved my day, man! <3

[dzpt]

@hpivanov works on youtube but this plugin would freeze the editor after pasting html that contains googe adsense code. anyway to check the iframe src from youtube only?

[bagaskarala]

it still not available to support <iframe /> content officially?

[Ajez24]

Hi guys, You can allow iframe rending in the editor just simply by copy past below code in the config

                                extraPlugins: [
				function ( editor ) {
					// Allow <iframe> elements in the model.               
					editor.model.schema.register( 'iframe', {
						allowWhere: '$text',
						allowContentOf: '$block'
					} );
					// Allow <iframe> elements in the model to have all attributes.
					editor.model.schema.addAttributeCheck( context => {
						if ( context.endsWith( 'iframe' ) ) {
							return true;
						}
					} );						
                                       // View-to-model converter converting a view <iframe> with all its attributes to the model.
					editor.conversion.for( 'upcast' ).elementToElement( {
						view: 'iframe',
						model: ( viewElement, modelWriter ) => {
							return modelWriter.createElement( 'iframe', viewElement.getAttributes() );
						}
					} );
				
					// Model-to-view converter for the <iframe> element (attributes are converted separately).
					editor.conversion.for( 'downcast' ).elementToElement( {
						model: 'iframe',
						view: 'iframe'
					} );
				
					// Model-to-view converter for <iframe> attributes.
					// Note that a lower-level, event-based API is used here.
					editor.conversion.for( 'downcast' ).add( dispatcher => {
						dispatcher.on( 'attribute', ( evt, data, conversionApi ) => {
							// Convert <iframe> attributes only.
							if ( data.item.name != 'iframe' ) {
								return;
							}
				
							const viewWriter = conversionApi.writer;
							const viewIframe = conversionApi.mapper.toViewElement( data.item );
				
							// In the model-to-view conversion we convert changes.
							// An attribute can be added or removed or changed.
							// The below code handles all 3 cases.
							if ( data.attributeNewValue ) {
								viewWriter.setAttribute( data.attributeKey, data.attributeNewValue, viewIframe );
							} else {
								viewWriter.removeAttribute( data.attributeKey, viewIframe );
							}
						} );
					} );
					},
			], 

This works when there is additional content along with iframe inside ckeditor.

When there is only iframe inside the ckeditor, if we click source the iframe html code disappears.

Anyone facing the same issue?

[sangnguyenplus]

When there is only iframe inside the ckeditor, if we click source the iframe html code disappears. @Ajez24 I got the same issue. Did you find the solution?

[Ajez24]

When there is only iframe inside the ckeditor, if we click source the iframe html code disappears. @Ajez24 I got the same issue. Did you find the solution?

Hi @sangnguyenplus ,

Yeah, after some research found out a way for iframe support. You can remove the piece of code inside extra plugin completely (only what we did for iframe). And add General HTML support to your CK editor. https://ckeditor.com/docs/ckeditor5/latest/features/general-html-support.html Once you add this, in your CK editor initialization, add the below piece of code

htmlSupport: { allow: [ { name: 'iframe', attributes: true, classes: true, styles: true } ] }

Note: Still I am facing the same issue for script tags, but iframe is working after this change.

[sangnguyenplus]

@Ajez24 Thank you so much 👍

[CKEditorBot]

There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may still be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.

[a-lam]

I am still having trouble implementing iframe with CKEditor 5. I am using General HTML Support and trying to configure it to allow iframe.

htmlSupport: {
  allow: [
    {
      name: 'iframe',
      attributes: {
        src: /.*/,
        style: /.*/,
        width: /.*/,
        height: /.*/,
        frameborder: /.*/,
        webkitallowfullscreen: true,
        mozallowfullscreen: true,
        allowfullscreen: true,
      },
    },
  ]
}

And when I try to compile I get the following error.

      TS2417: Class static side 'typeof Editor' incorrectly extends base class static side 'typeof ClassicEditor'.
  The types of 'defaultConfig.htmlSupport.allow' are incompatible between these types.
    Type '{ name: string; attributes: { src: RegExp; style: RegExp; width: RegExp; height: RegExp; frameborder: RegExp; webkitallowfullscreen: boolean; mozallowfullscreen: boolean; allowfullscreen: boolean; }; }[]' is not assignable to type 'MatcherObjectPattern[]'.
      Type '{ name: string; attributes: { src: RegExp; style: RegExp; width: RegExp; height: RegExp; frameborder: RegExp; webkitallowfullscreen: boolean; mozallowfullscreen: boolean; allowfullscreen: boolean; }; }' is not assignable to type 'MatcherObjectPattern'.
        Types of property 'attributes' are incompatible.
          Type '{ src: RegExp; style: RegExp; width: RegExp; height: RegExp; frameborder: RegExp; webkitallowfullscreen: boolean; mozallowfullscreen: boolean; allowfullscreen: boolean; }' is not assignable to type 'AttributePatterns | undefined'.
            Type '{ src: RegExp; style: RegExp; width: RegExp; height: RegExp; frameborder: RegExp; webkitallowfullscreen: boolean; mozallowfullscreen: boolean; allowfullscreen: boolean; }' is not assignable to type 'Record<string, string | true | RegExp>'.
              Property 'webkitallowfullscreen' is incompatible with index signature.
                Type 'boolean' is not assignable to type 'string | true | RegExp'.
ts-loader-default_e3b0c44298fc1c14

webpack 5.88.2 compiled with 1 error in 12377 ms

I can kind of work around this by setting webkitallowfullscreen, mozallowfullscreen and allowfullscreen to /.*/ However, it appends ="" to these attributes in source when it saves.

[Witoso]

Rel: #15355

[acroundtree]

Check that your code is not adding the sandbox="" attribute. Since ck4, it's being added and causing the issue.