首页 > 解决方案 > Jquery UI 对话框和 Tui “Toast UI 图像编辑器” - 无法在弹出窗口中的图像上键入文本

问题描述

我正在开发一个使用 Jquery UI 1.10.1“对话框”功能的大型遗留项目。现在我实现了 TUI - Toast 图像编辑器https://github.com/nhnent/tui.editor

问题是在图像上写文本时,它不起作用,但只有在加载到 dialog() 弹出窗口时才会起作用。当直接加载到页面上的 div 中时,它会按预期工作。

因此,onKeyDown 笔画不会在对话框弹出窗口中出现在画布中......

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

有任何想法吗?

标签: jqueryjquery-ui-dialogtoast-ui-image-editor

解决方案


问题出在“modal: true”选项中。我不得不把它排除在外,然后可以在画布上再次输入文本。

文档中:

如果设置为 true,则对话框将具有模态行为;页面上的其他项目将被禁用,即无法交互。模态对话框在对话框下方但在其他页面元素上方创建覆盖。

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

推荐阅读