TinyMCE Insert/edit image source button

Question

I'm using tiny mce and want in the insert image dialog a button to a special page

just behind the source input a simple link to a different page that opens in a new browser window. how can I achieve that?

Answer 1

TinyMCE has an init options called file_browser_callback and file_picker_callback that allow you to add your own file browsing functionality to the insert dialogs:

https://www.tinymce.com/docs/configure/file-image-upload/#file_browser_callback
https://www.tinymce.com/docs/configure/file-image-upload/#file_picker_callback
https://www.tinymce.com/docs/configure/file-image-upload/

So for example, you could do the following in your init:

tinymce.init({
    file_picker_callback: function(callback, value, meta) {
        imageFilePicker(callback, value, meta);
    }
});

Then the imageFilePicker function would just call out to a function that does the real work of opening a window to do the selection:

var imageFilePicker = function (callback, value, meta) {               
    tinymce.activeEditor.windowManager.open({
        title: 'File and Image Picker',
        url: '/myapp/getfilesandimages',
        width: 700,
        height: 600,
        buttons: [{
            text: 'Insert',
            onclick: function () {
                //do some work to select an item and insert it into TinyMCE
                tinymce.activeEditor.windowManager.close();
            }
        }, 
        {
            text: 'Close',
            onclick: 'close'
        }],
    }, 
    {
        oninsert: function (url) {
            callback(url); 
        }
    });
};