Jump to content

iframes are being stripped from CKEditor field, even when explicitly allowed

Recommended Posts

Having some issue with getting an iframe to save on a CKeditor text field (2.5.3). Things I've done to explicity allow it:

- added "iframe[*]" to extraAllowedContent

- added "IFrame" to the CKEditor toolbar

- turned off CKEditor ACF

- switched the field's "Content Type" from "Markup/HTML" to "Unknown" 

When pasting in my iframe code (it's a Vimeo embed code), CKEditor shows the iframe placeholder, but after saving the page, it's stripped out. For testing, I tried adding a simpler iframe using CKEditor's iframe toolbar button, but that also gets stripped out after saving.

Anyone experiencing this, or have iframes working with their field?

Share this post

Link to post
Share on other sites

Thanks, Adrian. I'll be sure to try that out. I'm assuming it'll work with 2.5 even though it's not listed in supported versions.

Share this post

Link to post
Share on other sites

Yeah - it definitely works fine it 2.5 - hopefully Ryan will get around to updating the supported versions for it shortly.

Share this post

Link to post
Share on other sites

I'm having this problem as well, and I need iframes for other kinds of content (not just video), so the Video Embed module isn't a solution for me.  

  • Like 1

Share this post

Link to post
Share on other sites

It is definitely possible to allow iframes through CKEditor with the right settings, but I would suggest that the easiest option might be to set up a Hanna Code (http://modules.processwire.com/modules/process-hanna-code/) tag for inserting iframes. I have to head out, but hopefully someone else can give you an example if you can't figure it out.

Share this post

Link to post
Share on other sites

Here's how it worked for me in CKEditor (in case you persist on this route :-) - but I would go for Hanna Code as Adrian suggested. As usual, the "culprit" is our friend HTML Purifier (read from here up to and including Ryan's comment here about its pros and cons before deciding whether to implement #5 below!) 

  • For iframes, the Extra allowed content seems to have no effect - btw, the correct syntax here is for example, div(*) not div[*]
  • Add 'Iframe' (note the spelling) to your CKEditor Toolbar
  • Leave ACF on
  • No need to switch the field's "Content Type" from "Markup/HTML" to "Unknown" 
  • Turn HTML Purifier off (gasp! :undecided:  :-X  :-) )
  • Enjoy your embedded video :D
  • Like 12

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Guy Incognito
      Hi all,
      Having a strange problem with my CKeditor custom styles.
      Trying to add standard bootstrap classes to the image alignment options. But for some reason if I add multiple classes to the centred image option it disappears from the editor drop down. But with only one class it works.
      So this works:
      { name: 'Left Aligned Photo', element: 'img', attributes: { 'class': 'float-md-left img-fluid' } }, { name: 'Right Aligned Photo', element: 'img', attributes: { 'class': 'float-md-right img-fluid' } }, { name: 'Centered Photo', element: 'img', attributes: { 'class': 'img-fluid' } }, But this doesn't:
      { name: 'Left Aligned Photo', element: 'img', attributes: { 'class': 'float-md-left img-fluid' } }, { name: 'Right Aligned Photo', element: 'img', attributes: { 'class': 'float-md-right img-fluid' } }, { name: 'Centered Photo', element: 'img', attributes: { 'class': 'w-100 img-fluid' } }, Note the slight difference to the last line.
      I've tried escaping the hyphens in case it was that but doesn't help.
      Any ideas.... #puzzled!
    • By iipa
      I have a CKEditor Textarea in a page template. Some users like to add text in them by pasting from Word document. This leads to internal server error when saving page. When using paste without formatting (cmd + shift + V), page is saved normally, so I assume error has something to do with Word's hidden characters that cause issues in many other programs as well. (I don't have Word myself, so I debugged this with video chat with user. I forgot to ask to check code view, so I'm not sure if they are visible there.)
      Is there a way in ProcessWire/PHP to sanitize Textarea input from these hidden characters, or can I prevent this by changing editor settings (listed below, if it helps)? I don't like leaving error handling rely to user action - somebody always forgets to do things specific way and it weakens user experience.
      Textarea formatting: none (htmlspecialchars off) field type: CKEditor content type: markup/html experimental markup/html settings: all on acf: on html purifier: on additional purify settings: all on extra allowed content: none add-ons: pwimage, pwlink, sourcedialog sourcedialog settings: none disabled add-ons: image, magicline  
    • By Gadgetto
      is it possible to configure CKEditor to have syntax highlighting enabled in Source and/or Sourcedialog? Coming from MODX i had this feature enabled and now I'm trying to find a solution for PW too.
      I'd like to have both the WysiWyg Editor and the Source editor with syntax highlighting enabled in on field.
      Andy plugins to achieve this?
    • By Smirftsch
      I've got some odd problem adding additional styles to mystyles.js. After reading some and following the article here: https://github.com/ryancramerdesign/ProcessWire/blob/dev/wire/modules/Inputfield/InputfieldCKEditor/README.md#custom-editor-js-styles-set
      I was able to add a custom style. So far so good 😉
      It is displayed in the Styles menu and can be selected there. Now the odd thing starts, if I add a custom style like this:
      ... { name: 'Box Top', element: 'span',attributes: { 'class': 'box_top' } }, { name: 'Box Bottom', element: 'span', attributes: { 'class': 'box_bottom' } }  
      it works and can be selected just fine.
      However, if I add this:
      { name: 'Box Top', element: 'div',attributes: { 'class': 'box_top' } }, { name: 'Box Bottom', element: 'div', attributes: { 'class': 'box_bottom' } } It is also displayed, can be selected - BUT - once the edit is saved, it is gone, won't be displayed in the page and won't be shown anymore in the editor as selected style, it goes back to "normal".
      Can anyone give me a hint what I missed?
    • By Guy Incognito
      I added some custom styles to the CKeditor menu bar using the example mystyles.js and the PW tutorial. This worked fine for fields when editing on the frontend. But none of our custom styles showed in the backend editor dropdown unless we edited the core copy of mystyles.js in wire/modules.
      Is this correct behaviour, a bug or a mistake on my part? Tried clearing cache, logging in/out etc but the backend ignores our custom styles in the site/modules path.
  • Create New...