用于移动触摸屏设备的 Ace 文本编辑器上的慢速滚动

Posted 2023-05-07

【中文标题】用于移动触摸屏设备的 Ace 文本编辑器上的慢速滚动

【英文标题】：Slow Scrolling on Ace Text Editor For Mobile Touch Screen Devices

【发布时间】：2012-11-16 17:49:54

【问题描述】：

我正在尝试让 javascript 代码编辑器 ACE 在移动设备上工作。

var editor = ace.edit("editor");
editor.setTheme("ace/theme/twilight");
editor.getSession().setMode("ace/mode/css");

你可以找到完整的代码here

垂直滚动似乎对任何移动设备都没有响应，而且滞后很多。如何让它更具响应性？

【问题讨论】：

我也注意到了这一点。如果我通过 USB OTG 将键盘和鼠标连接到我的 Nexus 10，我可以使用滚轮或箭头键滚动。支持触摸的 lite/mobile 版本会很好，但我不知道有一个。

您应该在ace's git repository (click here to file a new bug) 中提交错误

Khan 的编辑器是基于 ACE 的，不知道它是否更好用，或者 Resig&co 是否创造了一些东西——如果他们没有，也许他们也有兴趣。 khan.github.io/live-editor/demos/simple

您尝试过哪些移动设备？有各种各样具有不同功能的设备。

看起来这些年来已经修复了这些问题，github.com/ajaxorg/ace/issues/1629 (2013)、github.com/ajaxorg/ace/issues/1726 (2015)、github.com/ajaxorg/ace/issues/3350 (2017)

【参考方案1】：

据我所知，codemirror 多年来一直没有出现任何性能问题，因此请尝试使用它。这是您的 jsfiddle，但使用 codemirror：https://jsfiddle.net/DerpMarine/j54gfecL/16/

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.39.2/codemirror.js"></script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.39.2/codemirror.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.39.2/mode/css/css.js"></script>
</body>
<script>

var myCodeMirror = CodeMirror(function(elt) 
  document.getElementById('editor').parentNode.replaceChild(elt, document.getElementById('editor'));
,
  mode:  "css",
  theme: "custom", // https://codemirror.net/doc/manual.html#option_theme and https://codemirror.net/theme/
  value: document.getElementById('editor').value
);
</script>

https://codemirror.net/doc/manual.html

【讨论】：

问题是针对 Ace 的。用 CodeMirror 交换 Ace 可能有优势，但它与问题无关，而且将一个编辑器换成另一个也不简单。