Tui.image-editor: Unable to add or overwrite editor default values, using in angular

[pritamgudekar]

Version

• tui-image-editor.js
• @version 3.4.0

Hi,

I have imported this library in angular successfully. I want to override default values of toolbar of the editor, e.g. change default text 'Double Click' to something else like 'Sample text here...'. I used following code:

const imageEditor = this.imageEditor;
    this.imageEditor.on('addText', function(pos) {
      console.log('Called here...', pos);
      imageEditor.addText('Sample text here...', {
        position: pos.originPosition
      }).then(objectProps => {
        console.log(objectProps.id);
      });
    });

but I am getting this error:
Unhandled promise rejection The executing command state is locked.
However the on event is getting called i.e. console.log('Called here...', pos); but imageEditor.addText('Sample text here...', is not executing.

Please help on this issue.

Thanks in advance!

[junghwan-park]

@pritamgudekar
I think that example code is wrong. ImageEditor can't add text until addText event is done.
I'll edit example code. Thank you to reporting.

[pritamgudekar]

Oh ok.
Is there any way to change default values for tools like

• change default range value for text font. Currently defaultTextRangeValus = 50, want to change to 10
• change default text from 'Double Click' to 'some other text' etc?

There is a provision to change default styles through theme file, but for tools default value, looking similar provision. Please advice.

Thanks

[junghwan-park]

@pritamgudekar
Currently, there is no way to change both default text and fontSize handy.
It'll take some times for adding options for customization whole features like you said. I'll add this to enhancement task list.
Thanks.

[zhaoyuhang1033]

When the 'addtext' method is executed
'Islock' locks all related operations
So we have to wait until he's done.
(This is not a good way to do it.)
(My English is not very good. )

setTimeout(() => {
        this.$refs.tuiImageEditor.invoke(
          'changeText',
          this.$refs.tuiImageEditor.editorInstance.activeObjectId,
          'init'
        )
      }, 0)

@pritamgudekar

[lerit]

you can listen addText events,and execute changeText immediately.because addText command is executing,so changeText event should execute after addText,setTimeout may help you @pritamgudekar

[pritamgudekar]

Sure will try it out. thanks.

Also would like to have the configurations to change the default values for tools.

[zxh2013]

@zhaoyuhang1033 , you are really 🐂

[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!