Vimeo imbed code: iframe content goes missing when editing with TnyMCE

I am having issues with this scenario:

I have a document that includes video files that are hosted on Vimeo. The imbed code that Vimeo produces are held within iframes. Whenever I use the MODx Manager to edit the document (that contains the videos) the iframe imbed code goes missing? It looks like TnyMCE just strips it out? I have tried placing the iframe code inside paragraph tags but the same thing happens.

What I have been doing is copying the page code from the browser page before editing the MODx document. This way I have a code source with all the ifame imbed code intact. This is less than ideal.

Any ideas on what to do here?

Thanks!

Seems like this is a common issue with Vimeo embed code and CMS platforms. Looks like some of the other systems like Wordpress are adding specific plugins to address this iframe issue.

After thing about this for a while I decided to strip out all the video pertinent code from the document and instead place it into a new chunk. This way I can open/edit/save the chunk without losing the embed iframe code that Vimeo generates. Not the best solution but its better than nothing...

This WP looks interesting...

http://wordpress.org/support/topic/google-maps-iframe-deleted-with-tinymce-and-advanced-tinymce

That’s TinyMCE being overly helpful.

You should read in the documentation about valid elements.
You have to add valid elements in your tinymce init, otherwise tinymce will delete those elements:

Add:
extended_valid_elements : "iframe[src|width|height|name|align]",

You can add this in the plugin’s configuration.

The iframe code looks like this (generated by Vimeo after custom embed and privacy settings have been declared):

<iframe src="http://player.vimeo.com/video/videonumber?title=0&amp;byline=0&amp;portrait=0" width="640" height="360" frameborder="0"></iframe>

Quote from: sottwell at Oct 07, 2010, 03:51 PM

That’s TinyMCE being overly helpful.

You should read in the documentation about valid elements.
You have to add valid elements in your tinymce init, otherwise tinymce will delete those elements:

Add:
extended_valid_elements : "iframe[src|width|height|name|align]",

You can add this in the plugin’s configuration.

How would we do that? what’s the syntax or form that MODx would accept in the plug in config?

I could not get it to work from the manager plugin configuration.
But in the /assets/plugins/tinymce/js/xconfig.js file,
I edited the line for mce_extended_valid_elements to this:



It seems to work except that for some reason the video image does not show in the Firefox editor but it shows in the preview.

I had same problem and my way to override it was to create simple snippet in which you provide movie id. Example:
[[vimeo?id=`12345`]]