Add div container around an iFrame TinyMCE

Question

I am allowing my users to add YouTube embedded videos via the TinyMCE editor. I know that the content of the WYSIWYG is going into a responsive website, I want to automatically wrap the in the fluid width video wrapper (https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php).

So anywhere we have an Iframe inserted I want to wrap that in a div class=videoWrapper. I can't seem to find how I can wrap around existing content. Thanks in advance.

could you show me how did you use media_url_resolver function? — Mohammed Noureldin

Michael Fromin Michael Fromin · Accepted Answer · 2017-01-10T20:25:55

There are two questions here that will change how you can do this...

At what point do you have to have this <div> in place?
- Does it have to happen when content is inserted?
- Can you do this work when you go to save the content?
What are the ways people can insert this video data?
- Do you have a custom UI to do this?
- Are you relying on the TinyMCE Insert Media dialog?
- Other?

To address item #1 above:

If you don't need to add this at the moment the content is added you can always add this when the content is posted to the server for storage. You can walk the DOM and look for the releavant <iframe> tags and wrap them in the <div>. This is likely the simplest approach as you only do this on content save and its done on the server which is a more controlled environment. This would also catch people using code view and removing your wrapper <div> in a subsequent editing session.

If you have to add things on the fly then item #2 becomes important...

If you have only one way to add the <iframe> then you can look at how they are doing that and see if that approach fires any event(s) that you can use to be notified (e.g. there are events for paste, keyup, etc). If there are multiple ways to add this data (Insert Media, copy/paste, code view, etc) then it will be pretty hard to find events that work for all of these possible approaches.

Note: Not all TinyMCE plugins fire events for everything they are doing so you may not find an event that you can catch right when the content is entered regardless of how its added.

If that is the case you can use one of TinyMCE's generic events (e.g. 'change') and look for unwrapped <iframe> tags at that time:

tinymce.init({
  selector: '#myTextarea', 
  setup: function (editor) {
    editor.on('change', function () {
      //Update the DOM here
    }); 
  }  
})

The built in editor events are documented here: https://www.tinymce.com/docs/advanced/events/

Add div container around an iFrame TinyMCE

1 Answers