Ace Editor在Ionic App中失去了焦点

Question

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

问题:

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

您可以在此codepen中看到问题(不是我的codepen,但存在相同的问题)

我所面临的问题似乎是,王牌编辑不断失去焦点,但我似乎无法弄清楚什么可能会偷走焦点.我认为这是问题,因为在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();
});

我尝试删除mousedownace编辑器上的所有事件,看看它是否与之相关,但它没有修复.

我也尝试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/