Клавиши со стрелками и удаление работают в редакторе Ace, но ввод текста не работает

Только что начал использовать редактор Ace (http://ace.ajax.org), и хотя он отлично работает в обычном редакторе, как только я поместил его в диалоговое окно jquery-ui с параметром «modal: true», я может делать все, кроме ввода текста. То есть я могу выделять, использовать комбинации ctrl и даже УДАЛИТЬ текст, но не могу вставлять буквы.

Есть идеи, как эта опция «modal: true» может мешать обычной вставке символов? Есть ли функция «stopPropagation», которая может остановить попадание нажатия клавиши в редактор?


javascript ace-editor
person btelles    schedule 05.11.2011    source источник
comment
Какой диалог вы используете?   -  person polarblau    schedule 05.11.2011

Ответы (3)


arrow_upward
1
arrow_downward

Проблема заключалась в том, что jquery-dialogs ищут z-индекс целевого элемента (в данном случае текстовое поле редактора Ace), прежде чем разрешить продолжение события. На момент написания, вот где они делают эту проверку:

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 );

Есть несколько способов справиться с этим, но я обнаружил, что проще всего установить z-индекс текстовой области Ace на действительно высокое значение. Вот часть CSS, где я это сделал:

ace_uncomplessed.js, начиная со строки 16211.

"\n" +
".ace_editor textarea {\n" +
"    position: fixed;\n" +
"    z-index: 2000;\n" +
person btelles    schedule 07.11.2011

arrow_upward
1
arrow_downward

Мне удалось реализовать это, настроив CSS с помощью jQuery, а не редактируя исходный код Ace.

$('.ace_editor textarea').css('z-index','2000');
person JohntheFish    schedule 22.03.2012

arrow_upward
-1
arrow_downward

Вы можете вставить этот код в свой 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);
person Phani    schedule 30.06.2021