0

刚开始使用 Ace 编辑器 (http://ace.ajax.org)，虽然它在常规编辑器上运行良好，但只要我把它放在一个带有 'modal: true' 选项的 jquery-ui 对话框中，我可以做任何事情，除了输入文本。也就是说，我可以选择、使用 ctrl 组合，甚至可以删除文本，但我不能插入字母。

知道“modal: true”选项如何干扰常规字符插入吗？是否有一个“stopPropagation”功能可以阻止击键进入编辑器？

4

3 回答 3

1

问题是 jquery-dialogs 在允许事件继续之前在目标元素（在本例中为 Ace 编辑器的文本区域）上查找 z-index。在撰写本文时，这是他们进行此检查的地方：

jquery.ui.dialog.js 从第 685 行开始。

create: function( dialog ) {
  if ( this.instances.length === 0 ) {
    ...
    setTimeout(function() {
      // handle $(el).dialog().dialog('close') (see #4065)
      if ( $.ui.dialog.overlay.instances.length ) {
        $( document ).bind( $.ui.dialog.overlay.events, function( event ) {
          // stop events if the z-index of the target is < the z-index of the overlay
          // we cannot return true when we don't want to cancel the event (#3523)


          // HERE's THE CHECK
          if ( $( event.target ).zIndex() < $.ui.dialog.overlay.maxZ ) {
            return false;
          }
        });
      }
    }, 1 );

有几种方法可以解决这个问题，但我发现最简单的方法是将 Ace 的 textarea 的 z-index 设置为一个非常高的值。这是我执行此操作的 CSS 部分：

ace_uncomplessed.js 从第 16211 行开始。

"\n" +
".ace_editor textarea {\n" +
"    position: fixed;\n" +
"    z-index: 2000;\n" +
于 2011-11-07T06:15:25.473 回答
1

我设法通过使用 jQuery 调整 CSS 而不是编辑 Ace 源来实现这一点。

$('.ace_editor textarea').css('z-index','2000');
于 2012-03-22T16:07:05.090 回答
-1

您可以将此代码插入到您的 JS 文件中：

 $timeout(function () {
                htmlEditor = ace.edit("editor");
                htmlEditor.setTheme("ace/theme/Eclipse");
                htmlEditor.session.setMode("ace/mode/html");

                jsEditor = ace.edit("editor1");
                jsEditor.setTheme("ace/theme/Eclipse");
                jsEditor.session.setMode("ace/mode/javascript");
            }, 1000);
于 2021-06-30T07:45:53.183 回答