Embedding YouTube video with new iframe embed code in TinyMCE

问题

I tried the old embed code for adding YouTube videos into TinyMCE and it works fine. Some of the users may not realise they have to click on the old embed code option in YouTube embed code link to add it in.

I want to make it easy for users and allow them to just copy the new embed code directly and paste it on TinyMCE and away they go.

The new embed code looks like the following example:

<iframe title="YouTube video player" width="640" height="390" 
        src="http://www.youtube.com/embed/VvJ037b_kLs" 
        frameborder="0" allowfullscreen></iframe>

How do I get TinyMCE to accept the new version of the YouTube embed code with iframe?

I'm working on a CakePHP site build.

回答1:

I think that the use of "extended_valid_elements" is better than edit the original settings.

See that: TinyMCS - extended_valid_elements

回答2:

By default TinyMCE will filter out iframe tag for security reasons. You can add this tag and its attributes to the allowed list of html elements.

See http://tinymce.moxiecode.com/wiki.php/Configuration:valid_elements

Default rule set:

tinyMCE.init({
        // ... other configurations
        valid_elements : "@[id|class|style|title|dir<ltr?rtl|lang|xml::lang|onclick|ondblclick|"
+ "onmousedown|onmouseup|onmouseover|onmousemove|onmouseout|onkeypress|"
+ "onkeydown|onkeyup],a[rel|rev|charset|hreflang|tabindex|accesskey|type|"
+ "name|href|target|title|class|onfocus|onblur],strong/b,em/i,strike,u,"
+ "#p,-ol[type|compact],-ul[type|compact],-li,br,img[longdesc|usemap|"
+ "src|border|alt=|title|hspace|vspace|width|height|align],-sub,-sup,"
+ "-blockquote,-table[border=0|cellspacing|cellpadding|width|frame|rules|"
+ "height|align|summary|bgcolor|background|bordercolor],-tr[rowspan|width|"
+ "height|align|valign|bgcolor|background|bordercolor],tbody,thead,tfoot,"
+ "#td[colspan|rowspan|width|height|align|valign|bgcolor|background|bordercolor"
+ "|scope],#th[colspan|rowspan|width|height|align|valign|scope],caption,-div,"
+ "-span,-code,-pre,address,-h1,-h2,-h3,-h4,-h5,-h6,hr[size|noshade],-font[face"
+ "|size|color],dd,dl,dt,cite,abbr,acronym,del[datetime|cite],ins[datetime|cite],"
+ "object[classid|width|height|codebase|*],param[name|value|_value],embed[type|width"
+ "|height|src|*],script[src|type],map[name],area[shape|coords|href|alt|target],bdo,"
+ "button,col[align|char|charoff|span|valign|width],colgroup[align|char|charoff|span|"
+ "valign|width],dfn,fieldset,form[action|accept|accept-charset|enctype|method],"
+ "input[accept|alt|checked|disabled|maxlength|name|readonly|size|src|type|value],"
+ "kbd,label[for],legend,noscript,optgroup[label|disabled],option[disabled|label|selected|value],"
+ "q[cite],samp,select[disabled|multiple|name|size],small,"
+ "textarea[cols|rows|disabled|name|readonly],tt,var,big"
});

add the following to the end of the list

,iframe[src|title|width|height|allowfullscreen|frameborder]

I would not recommend to allow users to embed iframe tag in a public website.

来源：https://stackoverflow.com/questions/4989039/embedding-youtube-video-with-new-iframe-embed-code-in-tinymce

标签

php

cakephp

youtube

tinymce