Question

刚开始使用Ace编辑器（http://ace.ajax.org），虽然它在普通编辑器上工作正常，但只要我把它放在一个带有'modal：true'的jquery-ui对话框中选项，我可以做除输入文本以外的所有事情。也就是说，我可以选择，使用ctrl组合，甚至DELETE文本，但我不能插入字母。

知道'modal：true'选项如何干扰常规字符插入？是否有一个'stopPropagation'函数可能会阻止键击到达编辑器？

Answer 1

问题在于jquery-dialogs在允许事件继续之前在目标元素（在本例中为Ace编辑器的textarea）上查找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" +

Answer 2

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

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

Answer 3

您可以在您的 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);

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

3 个答案: