Question

在下面的示例中，拆分按钮应删除所有分号，并使用以下文本创建一个新的编辑器，直到下一个分号为止。

但是，存在一个奇怪的错误，即除第一个编辑器外，所有编辑器的光标都在行尾闪烁，但实际上只有最后一个字段具有光标（例如，在按split键后键入将在最后一个文本中输入文字）领域）。我该如何预防？

$(function() {
  function aceinit() {
    var e = ace.edit(this),
      t = $(this);
    e.setTheme("ace/theme/sqlserver");
    e.setOptions({
      maxLines: Infinity,
      highlightActiveLine: false,
      tabSize: 8,
      useSoftTabs: false,
      fixedWidthGutter: true
    });
    e.getSession().setMode("ace/mode/sql");
    e.getSession().on('change', function() {
      $('.output').css('opacity', '0.3');
      $('.markdown-toggle').hide();
    });
    e.commands.bindKey("Tab", null);
    e.commands.bindKey("Shift-Tab", null);
    e.setAutoScrollEditorIntoView(true);
    return e;
  }
  $('.ace').each(function() {
    aceinit.call(this);
  });
  $('body').on('click', '.plus', function() {
    $('main').children().slice(0, 3).clone().insertBefore($(this));
    $('.ace').each(function() {
      aceinit.call(this);
    });
    var b = $(this).prev().prev('.batch');
    var e = aceinit.call(b.find('.ace').get(0));
    e.setValue("");
    e.resize();
    e.focus();
    b.find('.results').html('');
  });
  $('body').on('click', '.split', function() {
    var b = $(this).prev('.batch');
    e = ace.edit(b.find('.ace').get(0));
    s = ';';
    b.find('.results').html('');
    setTimeout(function() {
      var split = e.getValue().split((new RegExp(s, 'im')));
      $.each(split, function(i, v) {
        if (v.trim()) {
          if (i > 0) {
            if (!b.find('.ace').filter(function() {
                return ace.edit(this).getValue() === '';
              }).length) {
              b.next().next('.plus').click();
            }
            b = b.nextAll().eq(2);
            e = ace.edit(b.find('.ace').get(0));
          }
          e.setValue(split[i].replace(/\s+$/, '').replace(/^\s+/, ''), 1);
        }
      });
    }, 0);
  });
});

.batch {
  flex-direction: column;
  min-width: 0;
  overflow-x: hidden;
  margin-left: 0.5em;
}

.query.ace {
  border: 1px solid #aaa;
  height: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://dbfiddle.uk/ace/ace.js"></script>
<main>
  <a href="#" class="plus" onclick="return false;" style="display: block;">add batch</a>
  <div class="batch" style="display: flex;">
    <div class="ace query">text1
; 
text2
; 
text3
; 
text4
; 
text5
;</div>
  </div>
  <a href="#" class="split" onclick="return false;" style="display: block;">split</a>
  <a href="#" class="plus" onclick="return false;" style="display: block;">add batch</a>
</main>

Answer 1

发生这种情况是因为您在打电话

e.focus();

在创建每个编辑器后，仅对要聚焦的编辑器进行调用。

Ace编辑器中的多个光标

1 个答案: