Is there any ways to modify "Choose a file" image upload button click event handler?

[opdev1004]

Summary

Good day.

Is there any ways to modify "Choose a file" image upload button click event handler?

I am trying to put my custom event handler for the "Choose a file" button of image uploading.

I know there's "addImageBlobHook" but this one happens after image file has been choosen from the open file dialogue.

Screenshots

None.

Version

3.1.1

Additional context

None.

[js87zz]

@opdev1004 Currently, that functionality is not provided. For what purpose are you adding it?

[opdev1004]

@js87zz Oh, it is my bad. I should have added more information in the additional context section.

My project is using the toast ui editor within webview for the desktop application.

And one of the feedback that I got from my app user was, they want the absolute/relative image file path instead of base64 encoded image.

Then I was thinking to modify the "Choose a file" image upload button event handler.

So the button can call open file dialogue from the file system directly instead of using the one from webview/webbrowser.

[deezaster]

Hey @opdev1004

That's what my customers want, too. For images, allow links only, no encoded images.

It would be enough for me if the "Insert Image" dialog is customizable.

[opdev1004]

@deezaster It is a planned feature since 3 days ago so at some point it will be updated. Otherwise we can contribute some code to make it happen earlier.

If you are in hurry, you can try to remove the image upload button and add the custom button in the menu(Toolbar). That's what I was thinking to do if this feature wasn't going to get updated.

You can have a look at these links for the custom buttons: https://github.com/nhn/toast-ui.vue-editor/issues/15#issuecomment-476140004 <- (Old way to add a custom button. So it might work but this might not be the official way now) https://nhn.github.io/tui.editor/latest/ToastUIEditor#insertToolbarItem

[deezaster]

It would be great if the documentation not only explains how to add a custom button, but also gives an example of how to open a custom dialog (in plain html/javascript) and communicate with the editor.

As example a simple popup with a text input, which is taken over into the editor. So I would have an understanding about the possibilities, which are available to me.

For example, is there an 'onclick' event that i can query?

eleContentEditor.insertToolbarItem({groupIndex: 2, itemIndex: 1}, {
   name: 'link',
   tooltip: 'Link',
   // command: 'bold',
   className: 'link toastui-editor-toolbar-icons',
   onclick: (ev) => { console.log('here')},
});

Update Yeah, I found a way to intercept the click event. In case anyone is interested here is an example:

function createLinkButton() {
    const el = document.createElement('button');

    el.className = 'link toastui-editor-toolbar-icons'
    el.type = 'button'
    el.style = 'margin: 0px 0px 0px 0px;'
    el.onclick = (e) => {
        console.log("clickadooo");
       modalInsertLink = Alpine.store("modalEditFolder");
       modalInsertLink.show(responseModalConfirmInsertLink);
    };
    return el;
}

function responseModalConfirmInsertLink(val) {
    if (val === 'y') {
        modalInsertLink.hide();
        eleContentEditor.insertText('Your Link');
    }
}

eleContentEditor = new toastui.Editor.factory({
    el: document.querySelector('#contentEditor'),
    height: 'auto',
    initialEditType: 'wysiwyg',
    previewStyle: 'tab',
    usageStatistics: false,
    autofocus: false,
    viewer: false,
    toolbarItems: [
        ['heading', 'bold', 'italic', 'strike'],
        ['ul', 'ol', 'indent', 'outdent'],
        ['image', 'link', {
            el: createLinkButton(),
            tooltip: 'Custom Bold'
        }]
    ]
});

[opdev1004]

@deezaster That's good 😃

Just for the people who want other example for the custom button: https://github.com/nhn/tui.editor/issues/1204#issuecomment-931750895

[deezaster]

My dear friend @opdev1004. Why are you only now coming up with this link? Anyway, now I also have a solution.

Thanks for your active help!

Nevertheless, a detailed and clear documentation would be very helpful.

[deezaster]

@opdev1004 Does an event exist when the popup window is loaded? Because I need to access the DOM in the innnerHTML (e.g. fill input select field dynamically in the popup).

[opdev1004]

@deezaster

I don't think this editor provide that feature. So i would put an element that can attach onload event.

https://stackoverflow.com/questions/4057236/how-to-add-onload-event-to-a-div-element#answer-41176554

[RenukaCheripally]

I have a similar issue. I need to restrict the "Choose a file" image button to accept only specific set of files. Do we have a fix in the editor yet?