Add iframes via TinyMCE

As far as I can see, TinyMCE does not support IFRAMEs in the editor content natively. So all you can achieve is to direct the editor to not strip the markup.

However, your code adds an entire new editor button, which should actually break the editor in certain browsers, because the plugin/button you are referencing does not exist.

A more appropriate way:

    'iframe' => array(
      'extensions' => array('iframe' => t('Iframe')),
      'extended_valid_elements' => array('iframe[src|width|height|frameborder|scrolling]'),
      'load' => FALSE,
      'internal' => TRUE,
    ),

I have been playing around with this and am having a bit of difficulty.

Would either of you mind explaining where exactly to place this code? Dropping it on the .inc file seemed to break everything all together. Is this the correct place?

I am using Wysiwyg with TinyMCE on a Drupal 6.13 build. I am trying to drop in iframe tags and am TinyMCE keeps stripping out the tags.

I do understand that this post is for 5.x but I can't seem to find any help elsewhere. Is this something that can be resolved on 6.x or is it out of the question?

Any help would be greatly appreciated!

kvoltz, I'm not sure, but according to the original post, the OP put that code in the version 5.2, rather than 6.xx So you may have issues there based on the drupal version..

(I'm not a contributor or anything to this module, just thought I noticed something that would help.)

Right, As I said I figured that was part of the problem... but I can't seem to find any help elsewhere so I was hoping a post here might gain some ground.

Thanks for the quick response though!

Right, As I said I figured that was part of the problem... but I can't seem to find any help elsewhere so I was hoping a post here might gain some ground.

Thanks for the quick response though!

The code snippet (use the one in #1) creates a plugin for the editor, or rather makes the editor think there's a plugin, called "iframe" which extends the allowed HTML tags to include the <iframe> tag and all its attributes/properties.

The plugin works as an extension and does not create any new buttons (hence the switch from the "buttons" to the "extensions" key between the original post and #1).
The plugin does not need to be explicitly loaded by TinyMCE itself, so 'load' => FALSE ('extended_valid_elements' is always merged into the editor settings when the plugin is enabled).
It is included in TinyMCE by default, or we don't need to include any external scripts, so 'internal' => TRUE.

This should work the same for both 5.x-2.x and 6.x-2.x.

The code from #1 could be injected into wysiwyg/editors/tinymce.inc somewhere into wysiwyg_tinymce_plugins($editor) as that's where all the plugins included in an editor package/release is hardcoded. All these show up in the profile configuration under Buttons and Plugins. Just make sure you get the syntax right with all those commas etc or PHP will report a fatal error. (No worries, just make a backup of the file first.) The downside is you must do this again each time you update Wyswyg.module.

The better alternative is to put this in a new module and use Wysiwyg's native plugin hook (see API docs). Also see IMCE Wysiwyg bridge, Wysiwyg Template and Wysiwyg Spellcheck.

If we'll put this into Wysiwyg? Maybe, we'll have to discuss that. Maybe the TinyMCE devs specifically excluded iframes for some reason?

Subscribing

Thanks for the solutions presented here, they work for me in 6.x-2.x. Is there a way to have that fix applied permanently? Now I need to add the code everytime I update the module.

Like I said in my previous post, this plugin could be implemented in a separate module, just follow the example of the modules I mentioned. Specifically look for implementations of hook_wysiwyg_include_directory() and then hook_wysiwyg_plugin() in the folder pointed to by the previous hook.

While this solution works, it still results in sites running a patched version of WYSIWYG. Any chance in getting this applied?

Here's a patch.

Each time we hardcode a plugin name which is not included in the editor library, we risk breaking/locking out third party additions like the TinyMCE iFrame plugin.

Since this issue is really about extending the default editor configuration, I suggest it would be part of fixing #313497: Allow configuration of advanced editor settings.

The code mentioned earlier could also be changed to use the above plugin (which also provides a button and dialog).

If you don't want to run a patched Wysiwyg module, put that code in a custom module implementing hook_wysiwyg_plugin. If you don't know how to create a module, it is a good way to learn as you need only two files and one function. ;)

Confirmed that it's super easy to make your own module. I used the wysiwyg_spellchecker module as a template.
1. Just change the pertinent data in the .info and put the code below in the .module
2. call them "wysiwyg_iframe" and put them in a folder with the same name.
3. Install & enable it like any other module.
4. You must also enable the plugin through the wysiwyg admin interface (Buttons & Plugins)
5. Now IFrames don't get stripped and work as expected

I should point out that this was my first attempt at a module and if anyone wants to publish this go ahead. It was so comically easy to do though that I don't see the point.

Tested and working with Drupal 6.14 and wysiwyg 6.x-2.0

module (some documentation removed for clarity):

/*  Implementation of hook_help().  */
function wysiwyg_iframe_help($path, $arg) {
  if ($path == 'admin/modules#description') {
    return t('Enables iframe implementation in TinyMCE editor for Wysiwyg module.');
  }
}

/* Implementation of hook_wysiwyg_plugin(). */
function wysiwyg_iframe_wysiwyg_plugin($editor) {
  switch ($editor) {
    case 'tinymce':
      $path = drupal_get_path('module', 'wysiwyg_iframe');
      return array(
//vvvvvvv Here is the code from #1 
		'iframe' => array(
			'extensions' => array('iframe' => t('Iframe')),
			'extended_valid_elements' => array('iframe[src|width|height|frameborder|scrolling]'),
			'load' => FALSE,
			'internal' => TRUE,
		),
//^^^^^^^^
      );
  }
}

/* Implementation of hook_init(). */
function wysiwyg_iframe_init() {
  $path = drupal_get_path('module', 'wysiwyg_iframe');
}

Snap! Have done pretty much the same thing, tested against D6.15 and Wysiwyg 6.x-2.x-dev and TinyMCE 3.2.5. Having said that the above solution should work for considerably older versions, too.

There's more info here:
http://www.toodlepip.co.uk/blog/2009/12/using-iframes-drupals-wysiwyg-mo...

and I've attached the modulised version of the file, for those less confident with creating modules from scratch. Check the README.txt for instructions on how to install.

One thing I would highlight, is that this is potentially a security blackhole, so be dead careful about which profiles this plugin is enabled on.

@toodlepip, this works great, thanks!

toodlepip's module in #15 worked for my needs.

toodlepip's module in #15 worked for my needs.

Thanks for this, Toodletip. Worked for me too.

The way I understand it, this is the only module that provides the plugin functionality to tinymce to embed a google map when you have tinymce turned on. Am I correct in saying that this is the *only* way to embed a gmap when you have *any* of the editors in the wysigwg module without getting into code? If so, this really should be an official contrib.

Vimeo has switched to using an iframe to embed videos, and I'm sure a few other places use iframes as well. This should be in the core plugin settings, imo, and maybe even enabled by default, as it's a major head-scratcher when you paste in the code then it disappears...

After I enabled the module from #15, my site gave a WSOD.

Always remember to back up your DB before installing new modules...

@Herkimer - sorry to hear that, any clues as to why? Was there anything in the Recent log entries?

@toodlepip, the module is working perfectly for me! You saved the day!

@toodlepip, worked like a charm. Thanks bro

WSOD as well. Hrm.

I'm skeptical as to the possibility of #313497: Allow configuration of advanced editor settings ever getting completed, and I've had more than a few clients ask why they are unable to embed videos from popular sites such as Vimeo (which use iframes)... is it within the realm of possibility that we might get at least a stopgap solution in place?

Or, if not, will @toodlepip be amenable to the idea of creating an actual project on drupal.org (I'll be comaintainer if you'd like...), so we can have an official solution to this problem? (Facebook is also using iframes for some of its social features now, and I can see other sites starting to use iframes as well).

...is it within the realm of possibility that we might get at least a stopgap solution in place?
This is why hook_wysiwyg_editor_settings_alter() was added in 2.1 (in addition to the plugin hooks which could already override/append some settings as seen above). It's not ideal, but allows us to inject/modify pretty much any setting the editors need via code.

#313497: Allow configuration of advanced editor settings is one of the release blockers for 3.0 and part of the 3.x foundation that needs to get in there before other editor/plugin-specific GUI controls can be added. We can't be sure when we'll get there though because we (maintainers) are busy with other things and there's not been many other contributers bringing in code for issues dealing with the new major features yet. We've asked for help or at least donations before but I suppose work on Core has had the highest priority most of the time.

I suppose work on Core has had the highest priority most of the time.

Yeah. Though that is going to change as soon as D7 is released. Still busy with fixing the last remaining problems.

Subscribing and voting for a more permanent fix

I just ran into the Vimeo iframe issue myself. Told the client (for now) to just skip using the WYSIWYG editor all together for this one page. Would be great to see a permanent fix.

@jfine: another solution is to use Embedded Media Field's online media filter, so a user can simply paste in a URL to the vim/whatever video.

The module of #15 doesn't work for me anymore.
I've got WYSIWYG API 6.x 2.3 and TinyMCE 3.4b3

Did something in the API change?

Greets,
Simon

(subscribing) Yeah, this is needed for Google Maps embedding as noted in #19.

Youtube switched to iframes as well...

Subscribing

#15 worked for me!

Heres a Drupal 7 version of #15. Just changed 6.x to 7.x in the .info file.

sub

I'm going to leave this marked as version 6.x-2.0, but I've just made an addition to #37, the D7 version of #15. I simply added "style" as one of the valid elements, so that you can now add stuff like style="float: left; margin: 10px;" to your iframe in order to right-align, left-align, etc.

I added the 7.x version to a sandbox project: http://drupal.org/sandbox/ldweeks/1141230

great work... would hope it could get out of the sandbox to an alpha :(

I'm hoping that the following adds to the discussion while also fixing a problem I'm having. I just did a bunch of work to get iframes activated through Thomas Andersen's embed plugin for TinyMCE. Creating this hook_wysiwyg_plugin just about gets me there:

function modulename_wysiwyg_plugin($editor, $version) {
  switch($editor) {
    case 'tinymce':
      return array(
        'embed' => array(
          'title' => t('Embed'),
          'url' => 'https://github.com/thomasandersen/tinymce-embed-plugin',
          'path' =>  'sites/all/libraries/tinymce/jscripts/tiny_mce/plugins/embed',  //wysiwyg_get_path('tinymce_plugins') . '/embed',
          'filename' => 'editor_plugin.js',
          'buttons' => array('embed' => t('Embed')),
          'extensions' => array('embed' => t('Embed')),
          'extended_valid_elements' => array('iframe[src|width|height|frameborder|scrolling|webkitAllowFullScreen|allowFullScreen]'),
          'load' => TRUE,
          'internal' => FALSE,
          ),
      );
  }
}

(Yeah, I know--should set up that embed plugin in its own sites/all/libraries directory. I'll get to that once all else is working...)

The problem here is odd: when I set "load" to TRUE, everything works fine, except that Tiny strips out my iframe. If I set load to FALSE, the code isn't stripped, but of course the "embed" button is no longer shown in the Tiny toolbar. Any ideas?

Have you tried commenting out the extended_valid_elements option?
There's an issue with how it's being merged with other existing elements. That in combination with an element declared twice in extended_valid_elements not being interpreted correctly by TinyMCE could cause iframes to be stripped out.
You can verify that it's being merged correctly by looking at Drupal.settings.wysiwyg.configs.tinymce.formatFORMATID.extended_valid_elements.
I put the extended_valid_elements value from your hook implementation into one of my own and it worked well.
But TinyMCE also kept iframe tags I entered manually both when I had it there and when I didn't.
Is the iframe tag completely gone when you click "Disable rich-text"?
If the iframe is still intact while editing the node, but not when viewing it, your Drupal formats/filters are not set to allow iframes.

Btw, you can remove the 'extensions' key. It's only there to let plugins without buttons add their checkbox to the "Buttons and Plugins" list and I don't actually know what happens if both it and 'buttons' are defined. The worst case would be TinyMCE thinking there are two 'embed' plugins to be loaded.

That is odd. I tried commenting out extended_valid_elements and looking at Drupal.settings.wysiwyg.configs.tinymce.formatfull_html.extended_valid_elements, and got:
font[face|size|color|style],span[class|align|style]
Uncommented the line, and got:
font[face|size|color|style],span[class|align|style],iframe[src|width|height|frameborder|scrolling|webkitAllowFullScreen|allowFullScreen]

In both cases, though, the iframe gets stripped out. This is definitely happeing through TinyMCE, not content filters; if I disable rich-text and paste the HTML straight into the textarea, then save without re-enabling TinyMCE, the video displays fine.

Just to be clear about what I'm trying to paste in, here's the HTML:

<iframe src="http://player.vimeo.com/video/23986237?title=0&amp;byline=0&amp;portrait=0" width="400" height="225" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe><p><a href="http://vimeo.com/23986237">Kalle Mattson - Thick As Thieves (Official Video)</a> from <a href="http://vimeo.com/kevinbparry">Kevin Parry</a> on <a href="http://vimeo.com">Vimeo</a>.</p>

In case it was affecting anything, I did comment out the 'extensions' key, but no dice. Any other ideas?

By the way, I really appreciate your help with this. Thank you!

By the way, if it helps, here's the whole formatfull_html object:

apply_source_formatting: 0
button_tile_map: true
content_css: "/themes/seven/reset.css,/themes/seven/style.css"
convert_fonts_to_spans: 1
convert_urls: false
document_base_url: "/"
entities: "160,nbsp,173,shy,8194,ensp,8195,emsp,8201,thinsp,8204,zwnj,8205,zwj,8206,lrm,8207,rlm"
extended_valid_elements: "font[face|size|color|style],span[class|align|style],iframe[src|width|height|frameborder|scrolling|webkitAllowFullScreen|allowFullScreen]"
file_browser_callback: "imceImageBrowser"
inline_styles: true
language: "en"
mode: "none"
paste_auto_cleanup_on_paste: 1
plugins: "paste,table,media,wordcount,-embed,-break"
preformatted: 0
remove_linebreaks: 1
strict_loading_mode: true
theme: "advanced"
theme_advanced_blockformats: "p,address,pre,h2,h3,h4,h5,h6,div"
theme_advanced_buttons1: "bold,italic,bullist,numlist,outdent,indent,link,unlink,image,blockquote,hr,removeformat,charmap,formatselect,styleselect,pastetext,pasteword,tablecontrols,media,embed,break"
theme_advanced_buttons2: ""
theme_advanced_buttons3: ""
theme_advanced_path_location: "bottom"
theme_advanced_resize_horizontal: false
theme_advanced_resizing: 1
theme_advanced_resizing_use_cookie: false
theme_advanced_styles: "Intro Text=intro;Quote Citation=citation;Button=tinyButton;View All=viewAllLink"
theme_advanced_toolbar_align: "left"
theme_advanced_toolbar_location: "top"
verify_html: 1
width: "100%"

Update: Since the stripping problem only occurs when this plugin is enabled, I guessed that the issue is somewhere in the plugin. I tried another solution instead, and that works fine, without my needing to specify extended valid elements. In case it helps anyone else trying to solve this problem, here's my hook_wysiwyg_plugin:

function modulename_wysiwyg_plugin($editor, $version) {
  switch($editor) {
    case 'tinymce':
      return array(
        'rfvideo' => array(
          'title' => t('RF Video'),
          'url' => 'http://sourceforge.net/tracker/index.php?func=detail&aid=3368582&group_id=103281&atid=738747',
          'path' =>  'sites/all/libraries/tinymce/jscripts/tiny_mce/plugins/rfvideo',
          'filename' => 'editor_plugin.js',
          'buttons' => array('rfvideo' => t('Video')),
          'load' => TRUE,
          'internal' => FALSE,
        ),
      );
  }
}

TwoD, thanks again for your help with this.

UPDATE: I see that my questions are in the wrong issue queue. This issue is for the Drupal 6 version. Sorry about that.

Thanks a lot for your work on this. I need consistent behavior with Iframes, like everyone else here, so I'm thankful that you've shared your work.

I've been working on a test drupal 7 and was going to test out your code from #45, but then a strange thing happened: I couldn't get tinymce to strip out the Iframes like it had been doing before! In other words, it seems like its working correctly *without* your additional module.

The most obvious answer is that I'm just doing something dumb, but I can't figure it out. I did upgrade to the latest version of tinymce (3.4.7), though, so perhaps that did it? Here are the versions that I'm using:

Drupal 7.9
Wysiwyg 2.1
Tinymce 3.4.7

What versions are you using?

Cheers,

Lucas

@ldweeks, Don't worry about the version field, Wysiwyg's API is the same for D6 and D7 so that does not matter for this particular question. If it had been a bug report we'd still only use one issue to target the latest version in which it occurs, and then backport any patches in the same issue.
I'm using the same version of TinyMCE and it also leaves iframes alone without changes. That is why i suggested commenting out the extended_valid_elements option above, to see if it was interfering with a tag definition in the 'valid_elements' setting. The rest of the code is for integrating the embed plugin. You don't need the module if you don't use that plugin.

@bdimaggio, maybe there was a problem in the other plugin? Either way, good thing you got it working.

Closing this issue again since it seems we have working solutions for those that need it.

Hey ldweeks--yeah, I also found that Tiny wasn't stripping iframes in most cases. The only time it *did* strip them was when I enabled that first plugins...whose whole purpose was to allow users to easily paste in embeds and iframes. Go figure. Anyway, the second plugin took me back to the original non-stripping behavior, and also avoided the need for users to work with a big chunk of embed code, so it works better in all ways. (I'm trying to provide an easy way for non-technical folks to drop Vimeo videos into their pages, and all they need to do with this plugin is paste in the ID assigned by Vimeo. No fuss, no muss.)

Oh yeah--my versions: TinyMCE 3.4.1, Drupal 7.2, WYSIWYG 2.0. Hope all this helps...

This seems to me like the shortest and easiest way to do this atm.
Add this to your custom module:

/**
 * Implements hook_wysiwyg_editor_settings_alter().
 */
function custom_module_wysiwyg_editor_settings_alter(&$settings, $context) {
  $settings['extended_valid_elements'] .= ',iframe[src|width|height|frameborder|scrolling|name]';
}

Disregard; working fine for me without any plugins/modifications.
Drupal 7.16 / WYSIWYG 7.2.2 / TinyMCE 3.5.5