Make Upload tab the default in Insert/Edit Image dialog

Question

Using TinyMCE 5.7.0

Is there a way to make the "Upload" tab the default tab displayed in the Insert/Edit Image dialog?

I'm looking for a configuration option or programmatic way to do this so we can continue to easily update TinyMCE when new versions come out.

Answer 1

In TinyMCE (5.7.0 in my case, not the minified version), open plugins/image/plugin.js.

Search for these lines (1462 to 1466):

tabs: flatten([
    [MainTab.makeTab(info)],
    info.hasAdvTab ? [AdvTab.makeTab(info)] : [],
    info.hasUploadTab && (info.hasUploadUrl || info.hasUploadHandler) ? [UploadTab.makeTab(info)] : []
])

Reorder the lines like this:

tabs: flatten([
    info.hasUploadTab && (info.hasUploadUrl || info.hasUploadHandler) ? [UploadTab.makeTab(info)] : [],
    [MainTab.makeTab(info)],
    info.hasAdvTab ? [AdvTab.makeTab(info)] : []
])

Answer 2

We had the same requirement and this is how we did it.

1. Instead of adding the "Upload Image" option to toolbar, create a keyboard shortcut for opening the image upload modal using addShortcut method. Something like this in reactjs:

editor.addShortcut('ctrl+shift+i', 'Open image upload window', function () {
    editor.execCommand('mceImage')
});

2. Now that we have a code block that runs when pressing the shortcut keys, we can add logic inside that block to initiate a click action on the "Upload" button within the modal like this:

setTimeout(() => {
    let element = document.querySelectorAll('.tox-dialog__body-nav-item')[1];
    if (element) { element.click() }
}, 0)

The setTimeout is added to make sure that the modal is added to DOM before run the querySelectorAll method on the document object is executed. Timeout even with 0 will make sure the code block only executes after all the synchronous tasks are done, which includes the DOM update.

In the end, the final codeblock will look like this:

editor.addShortcut('ctrl+shift+i', 'Open image upload window', function () {
    editor.execCommand('mceImage')

    setTimeout(() => {
        let element = document.querySelectorAll('.tox-dialog__body-nav-item')[1];
        if (element) { element.click() }
    }, 0)
    
});

Edit: If you notice other elements in the DOM with the same class as "tox-dialog__body-nav-item", you can change the querySelectorAll method to make it more well defined and make sure it only selects the class within image upload modal if found. I haven't yet ran into this issue, so this was enough for my case.