箭头键和删除在Ace编辑器中工作，但键入文本不起作用

Arrow keys, and delete work in Ace editor, but typing text doesn't work

本文关键字：工作 文本 不起作用 编辑器 删除 Ace      更新时间：2023-09-26

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

你知道'modal: true'选项可能会干扰常规字符插入吗?是否有一个"stopPropagation"函数，可能会阻止按键进入编辑器?

问题在于，在允许事件继续进行之前，查询对话框会在目标元素(在本例中是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_uncompleted .js从第16211行开始。

"'n" +
".ace_editor textarea {'n" +
"    position: fixed;'n" +
"    z-index: 2000;'n" +

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

$('.ace_editor textarea').css('z-index','2000');

你可以把这段代码插入到你的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);
相关文章：