Tui.image-editor: How to add custom menu buttons

[GEMI]

Version

3.4.0

Development Environment

Windows 10

Current Behavior

All menu buttons are predefined menu: ['crop', 'flip', 'rotate', 'draw', 'shape', 'text', 'filter'],

Question

How can I add custom menu buttons? For example 'save'?

[junghwan-park]

@GEMI
Currently adding menu button or something functional into TOAST UI Image-Editor UI via Image-Editor constructor's options parameter or certain API is not available.

If you have to create save button and add that button among TOAST UI Image-Editor's menu buttons, you should extend TOAST UI Image-Editor src/ui/template/controls.js or just add a button into after Image-Editor rendered.

[arifhussain353]

@GEMI
This is not a proper solution but you can do with JQuery or Javascript by replacing HTML on load. For example:

 $('.tui-image-editor-header-buttons .tui-image-editor-download-btn').
replaceWith('<button class="tui-image-editor-save-btn" >Save</button>')

Replace Download button into Save and then attach event with addEventListener

document.querySelector('.tui-image-editor-header-buttons .tui-image-editor-save-btn').
addEventListener('click', this.prcoessSaveImage)

fucntion prcoessSaveImage(){
//your code
}

[xiezm]

@arifhussain353

虽然你这种侵入性的方法很龊，更新以后的新版本，可能就不兼容了。
但是目前要想解决问题，还不得不这么做。
看不懂，你自己去翻译吧。

[sergeizhukov]

Yeah It should be able at least to rename standard buttons. Add a new one.

[KunalBurangi]

The download button opes a new tab . i don't want that new tab how to stop that ?

[ravizeewee]

@GEMI
Currently adding menu button or something functional into TOAST UI Image-Editor UI via Image-Editor constructor's options parameter or certain API is not available.

If you have to create save button and add that button among TOAST UI Image-Editor's menu buttons, you should extend TOAST UI Image-Editor src/ui/template/controls.js or just add a button into after Image-Editor rendered.

Can you show the example?

[stale[bot]]

This issue has been automatically marked as inactive because there hasn’t been much going on it lately. It is going to be closed after 7 days. Thanks!

[stale[bot]]

This issue will be closed due to inactivity. Thanks for your contribution!

[IrtazaHussain1]

Hi! I want to use the custom function on the download button is it possible and how can I do that

[praveenrsg]

I want to remove "Load" and "Download" Button and the header text
Please have a look on the marked area of the below image

[LemuelKL]

I want to remove "Load" and "Download" Button and the header text
Please have a look on the marked area of the below image

I removed the header all together by overriding the following CSS properties in my Vue project:
.tui-image-editor-header { display: none; } .tui-image-editor-container .tui-image-editor-main { top: 0; }

[vladsovetov]

I want to remove "Load" and "Download" Button and the header text
Please have a look on the marked area of the below image

Seems slightly cleaner solution

const myTheme = {
    "header.display": "none"
};
var instance = new ImageEditor(document.querySelector('#tui-image-editor'), {
     includeUI: {
         ...
         theme: myTheme,
         ...
     },
    ...
});

[singhkirtii]

Hi. I want to save the edited image (without downloading it to the local system) in a storage system (maybe S3) and then save the image URL in database. How can I do that?

[azakero]

Hi. I want to save the edited image (without downloading it to the local system) in a storage system (maybe S3) and then save the image URL in database. How can I do that?

@singhkirtii I'm looking for this solution as well. Could you figure it out?

[singhkirtii]

Yes. You can fetch the image data using the editor's toDataURL() function. This data can also be converted into blob, if needed. Once you have the image data, you can send it to the server and then upload the dataURI/blob directly to S3.

[azakero]

Thanks mate. Understood

[eriksetiadi-pro]

how do i can add 1 or more menu?