TinyMCE insert raw html into active editor

Question

Using WindowManager for TinyMCE I open a window and it writes back raw HTML. But its truncating my links for my images. Whats weird is that it does NOT do it to the anchor tag. Just the image tag.

I have this bit of code

html = '<a title="'+ $('#title').val() +'" href="'+ $('#url').val() +'"><img src="'+ $('#imgURL').val() +'" /></a>';

    var parentEditor = parent.tinyMCE.activeEditor;
    parentEditor.execCommand('mceInsertRawHTML', false, html);
    parentEditor.windowManager.close();

It DOES insert the html into the active Editor. When I log html to the console I get

<a title="Click Action" href="yahoo.com"><img src="http://marketingedu.mychm.co/images/buttons/c2a-button4.png" /></a>

However when I view the Source Code in the tinyMCE editor, it changed the images SRC attribute to

../../images/buttons/c2a-button4.png

Here is my entire javascript init for the TinyMCE editor

tinymce.init({
        selector: ".editor",
        setup: function(ed) {
            ed.on('change', function(e) {
                tinyMCE.triggerSave();

                $('form').trigger('checkform.areYouSure');
            });
            ed.on('init', function(e) {
                autoresize_max_height: 500
            });
            ed.addButton('defaultbtn', {
                title: 'Insert Button',
                icon: 'fa fa-plus-square',
                onclick: function() {
                    // Open window
                    ed.windowManager.open({
                        title: 'Button Selector',
                        url: "<?=$this->url('/webinar/custombuttons') ?>",
                        width: 800,
                        height: 600
                    });
                }
            });
        },
        plugins: [
            "advlist autolink link responsivefilemanager lists charmap print preview hr anchor pagebreak spellchecker",
            "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
            "save table contextmenu directionality template paste textcolor colorpicker responsivefilemanager autoresize"
        ],
        toolbar: "undo redo | styleselect | bold italic | forecolor backcolor | alignleft aligncenter alignright | bullist numlist | outdent indent | table | link responsivefilemanager defaultbtn",
        image_advtab: true ,

        external_filemanager_path:"/filemanager/",
        filemanager_title:"Filemanager" ,
        external_plugins: { "filemanager" : "/filemanager/plugin.min.js"},
    });

revobtz revobtz · Accepted Answer · 2015-08-09T20:31:07

Change this:

var parentEditor = parent.tinyMCE.activeEditor;
parentEditor.execCommand('mceInsertRawHTML', false, html);

To This:

tinymce.activeEditor.setContent(html, {format: 'raw'});

Here is a reference link on how to set content on tinymce in various of ways.

Hope this helps.

TinyMCE insert raw html into active editor

1 Answers