ionic-framework - Ace 编辑器在 Ionic 应用程序中失去焦点

Question

我正在使用 Ionic 框架开发一个应用程序，并希望在 <ion-view> 中包含一个 ace 编辑器组件。 .

问题:

当我在 ace 编辑器中单击时，我可以看到它选择了该行，但未显示光标。

您可以在 this codepen 中查看该问题(不是我的代码笔，但存在同样的问题)

我遇到的问题似乎是 ace 编辑器不断失去焦点，但我似乎无法弄清楚什么可能会窃取焦点。我认为这是问题所在，因为在 chrome 的元素面板中，我可以看到以下类被分配给了 div。
ace_layer ace_cursor-layer ace_hidden-cursors
有趣的是，如果我按住鼠标点击一会儿，它将获得焦点并显示光标。短鼠标点击不起作用。

我的编辑器 html 模板:

<ion-view view-title="Editor">
  <ion-content>
    <div>
      <pre id="ace-editor">this is a test</pre>
    </div>  
  </ion-content>
</ion-view>

还有我的角度 controller我在哪里设置 ace editor :

.controller('EditorCtrl', function ($scope, $stateParams) {
  var init = function () {
    editor = ace.edit('ace-editor');
    editor.setTheme('ace/theme/monokai');
    editor.setOption("dragEnabled", false);
    editor.removeAllListeners("mousedown");
    editor.getSession().setMode("ace/mode/javascript");    
  };

  init();
});

我尝试删除所有 mousedown ace 编辑器上的事件，看看它是否相关，但没有修复。

我也试过删除 sidemenu drag从 ionic 侧菜单，但这也没有解决。

Answer 1

使用 data-tap-disabled="true"像这样:
<pre id="ace-editor" data-tap-disabled="true">this is a test</pre>
我在这里找到它:http://www.ionicframework.com/docs/api/page/tap/