Search code examples
javascripthtmliframetinymcetinymce-4

TinyMCE iframe doesn't be shown

I have a problems with tinyMCE editor.

I want to embed a youtube Video as Iframe, But the video isn't shown in edit mode, edit mode looks like this:

enter image description here

And in live mode there is only the iframe code shown. What can I do to solve this?

enter image description here

Problem is that in the view the code looks like this:

<iframe src="https://www.youtube.com/embed/jkMUwoIQ2wI" width="560" height="315"></iframe>

UPDATE: tinyMCE init js code:

var tinyMCEOptions = {
    mode : "exact",
    elements: "tinyMCE",
    plugins : 'advlist autolink link image lists charmap textcolor print preview media code',
    menubar: "edit insert format view",
    toolbar: [ "undo redo bold italic underline strikethrough forecolor backcolor aligncenter alignright alignjustify | cut copy paste bullist numlist outdent indent blockquote removeformat subscript superscript",
    " styleselect formatselect fontselect fontsizeselect | image media | code"],
    entity_encoding : "raw",
    extended_valid_elements:"iframe[src|title|width|height|allowfullscreen|frameborder|class|id]"
}

extended_valid_elements:"iframe[src|title|width|height|allowfullscreen|frameborder|class|id]",

Solution

  • I think it's because there is an iframe filter for TinyMCE.

    You have to change the filter so iframes not filtered.

    Look here: https://wordpress.stackexchange.com/questions/62729/when-switching-from-html-to-visual-editor-the-iframe-tag-gets-corrupted

    edit

    Open file: tinymce/plugins/media/plugin.min.js

    Find: a.parser.addNodeFilter("iframe,video,audio,object,emb

    Replace with: a.parser.addNodeFilter("video,audio,object,emb

    Save and try again.