TinyMCE 4 Custom Browser Popup Window MVC

Question

Is it possible to add a custom button which will open a new browser window to a specific URL?

There is currently a Preview button, which opens a window but shows the content used with in the WYSIWYG Editor, however I need the user to see the WYSIWYG content as it is actually rendered with the respective View.

Edit.cshtml

<script type="text/javascript" src="/Scripts/tinymce/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
    selector: "textarea",
    theme: "modern",
    height: 300,
    language: 'en_GB',
    browser_spellcheck: true,
    verify_html: false,
    plugins: [
    "advlist autolink lists link image charmap print preview hr anchor pagebreak",
    "searchreplace wordcount visualblocks visualchars code fullscreen",
    "insertdatetime media nonbreaking save table contextmenu directionality",
    "emoticons template paste textcolor colorpicker textpattern moxiemanager imagetools"],
    toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media | forecolor backcolor emoticons | preview2",
    image_advtab: true,
    file_browser_callback: function (fieldName, url, type)
    {
        var w = window,
            d = document,
            e = d.documentElement,
            g = d.getElementsByTagName('body')[0],
            x = w.innerWidth || e.clientWidth || g.clientWidth,
            y = w.innerHeight || e.clientHeight || g.clientHeight;

        var cmsUrl = '/Scripts/FileManager/Index.html?&field_name=' + fieldName + '&langCode=' + tinymce.settings.language;

        if (type == 'image')
        {
            cmsUrl = cmsUrl + "&type=images";
        }

        tinyMCE.activeEditor.windowManager.open({
            file: cmsUrl,
            title: 'FileManager',
            width: x * 0.8,
            height: y * 0.8,
            resizable: "yes",
            close_previous: "no"
        });
    },
    setup: function (ed) {
        ed.addButton('preview2', {
            title: 'Preview',
            image: './/',
            onclick: function () {
                tinyMCE.execCommand('mceInsertContent', false, 'Hello!!');
            }
        });
    }
});

I have added a custom button, but I need the current 'tinyMCE.execCommand' to initiate a new browser window with specific URL, currently it does nothing more than insert content.

Any help would be much appreciated :-)

Answer 1

By using window.open(url,'_blank'); in javascript you can do this, see this simple example:

$("#mybutton").on("click", function(){
    window.open("http://stackoverflow.com",'_blank');
});

Here's the working example on jsfiddle

You just have to replace the current code inside onclick by

window.open(" http://stackoverflow.com ",'_blank');

Answer 2

您需要使用

window.open(url,'_blank');