Jquery UI dialog and Tui "Toast UI image editor" - can't type text on image in popup

Question

I am working on a big legacy project that uses Jquery UI 1.10.1 "dialog" functionality. Now I implemented the TUI - Toast image editor https://github.com/nhnent/tui.editor

Problem is that when writing text on images, it doesn't work but only when loaded into a dialog() popup. When loaded directly in a div on the page, it just works as expected.

So the onKeyDown strokes just won't' come through in the canvas in a dialog popup...

$('.image-editor-modal').dialog({
    height: 800,
    width: '90%',
    modal: true,
    autoOpen: false
});

Any ideas?

Answer 1

The problem was in the option "modal: true". I had to leave that out and could type text again in the canvas.

From the documentation:

If set to true, the dialog will have modal behavior; other items on the page will be disabled, i.e., cannot be interacted with. Modal dialogs create an overlay below the dialog but above other page elements.

$('.image-editor-modal').dialog({
    height: 800,
    width: '90%',
    autoOpen: false
});