TinyMCE Insert / Edit Image Source Button

Question

I use tiny mce and want the button on a special page to appear in the insert dialog

right behind the original input, a simple link to another page that opens in a new browser window. how can i achieve this

Answer 1

TinyMCE has init parameters called file_browser_callbackand file_picker_callback, which allow you to add your own file browsing functions 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 can do the following in your init:

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

Then the imageFilePicker function will simply call a function that does the real job of opening a window for 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); 
        }
    });
};

Answer 2

, tinymce DOM .