48

I'm trying to get The JavaScript code editor ACE to work on a mobile device. 

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

You can find the full code here

The vertical scrolling does not seem to respond at all for any mobile device and it's lagging a lot. How can I make it more responsive?

Matheus Cuba
  • 2,068
  • 1
  • 20
  • 31
DriverBoy
  • 3,047
  • 3
  • 19
  • 21
  • 2
    I have noticed that as well. If I attach a keyboard and mouse to my Nexus 10 via USB OTG, I can scroll with the scroll wheel or arrow keys. A lite/mobile version supporting touch would be nice, but I'm not aware of one. – Mark Aug 25 '13 at 22:51
  • 4
    You should file a bug in [ace's git repository](https://github.com/ajaxorg/ace/) ([click here to file a new bug](https://github.com/ajaxorg/ace/issues/new)) – Adonis K. Kakoulidis Oct 21 '13 at 14:13
  • Khan's editor is based on ACE, don't know if it works better or if Resig&co have created something - if they havent, perhaps they might be also interested. http://khan.github.io/live-editor/demos/simple/ – Tero Tolonen May 13 '15 at 23:09
  • 1
    Which mobile devices have you tried? There's a **wide** variety of devices out there with different capabilities. – Daniel Schilling Jun 12 '18 at 14:07
  • 1
    looks like there've been fixes for these throughout the years, https://github.com/ajaxorg/ace/issues/1629 (2013), https://github.com/ajaxorg/ace/issues/1726 (2015), https://github.com/ajaxorg/ace/issues/3350 (2017) – Atav32 Jul 06 '18 at 18:09

1 Answers1

1

As far as I'm aware, codemirror hasn't had any performance issues for ages, so try to use that. Here's your jsfiddle but with codemirror instead: 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

anothernode
  • 5,100
  • 13
  • 43
  • 62
Joel Ellis
  • 1,332
  • 1
  • 12
  • 31
  • Question is very specific to Ace. Swapping Ace with CodeMirror might have advantages but its not relevant to the ask and also not simple to just swap out one editor with other. – Suhas Deshpande Nov 07 '18 at 23:59