How do I configure Tinymce to allow embed tags when editing html?

15
votes

I would like users to be able to copy and paste embed tags for videos (youtube, vimeo, etc) into the html editor of tinymce. I've tried every solution I can find on the internet - however tinymce always strips out any embed tags in the video embed code when I press update in the html editor.

Here is my current tinymce init script:

tinyMCE.init({
    mode: "textareas",
    valid_elements: "*[*]",
    extended_valid_elements: "embed[width|height|name|flashvars|src|bgcolor|align|play|loop|quality|allowscriptaccess|type|pluginspage]",
    theme: "advanced",
    theme_advanced_buttons1: "code",
    media_strict: false
});

If I turn off tinymce's "cleanup" functionality (cleanup : false)...which I don't want to do...then everything works as desired

I've tried many versions of extended_valid_elements and other options but found nothing that works. What am I doing wrong?

Thanks in advance, Shane

3
tinymceembed

3 Answers

18
votes

For what it's worth - after much trail and error I learned that you must include the media plugin to get media_strict to work. If this is documented somewhere I must have missed it. Here is an updated init script that allowed me to insert embed tags via the html editor in tinymce:

tinyMCE.init({ 
    mode: "textareas",      
    plugins: "media",
    theme: "advanced", 
    theme_advanced_buttons1: "code", 
    media_strict: false 
});

This is known to work with tinymce ver 3.2.5 & 3.3.8 - but as noted below might have issues with tinymce ver 3.3.5

3
votes

If you're trying to achieve this from a tinymce plugin then the following code can do the trick in the plugins init section.

ed.onPreInit.add(function() {
              // Allow video elements
              ed.schema.addValidElements('object[id|style|width|height|classid|codebase|*],param[name|value],embed[id|style|width|height|type|src|*],video[*],audio[*],source[*]');
            });

This is taken from the media plugin.

1
votes

FYI, I also have the iFrame fix if you plan in including GOOGLE MAPS for example.

extended_valid_elements: "iframe[src|width|height|name|align], embed[width|height|name|flashvars|src|bgcolor|align|play|loop|quality|allowscriptaccess|type|pluginspage]",