Ace 编辑器在 Ionic App 中失去焦点

Question

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

问题：

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

您可以在 this codepen 中看到问题（不是我的 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>

还有我设置ace editor的角度controller：

.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();
});

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

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

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/