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?

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?

• javascript
• mobile
• ace-editor

• 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 Commented Aug 25, 2013 at 22:51
• 4 You should file a bug in ace's git repository (click here to file a new bug) – Adonis K. Kakoulidis Commented Oct 21, 2013 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. khan.github.io/live-editor/demos/simple – Tero Tolonen Commented May 13, 2015 at 23:09
• 1 Which mobile devices have you tried? There's a wide variety of devices out there with different capabilities. – Daniel Schilling Commented Jun 12, 2018 at 14:07
• 1 looks like there've been fixes for these throughout the years, github./ajaxorg/ace/issues/1629 (2013), github./ajaxorg/ace/issues/1726 (2015), github./ajaxorg/ace/issues/3350 (2017) – Atav32 Commented Jul 6, 2018 at 18:09

1 Answer 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/DerpMarine/j54gfecL/16/

<script src="https://cdnjs.cloudflare./ajax/libs/codemirror/5.39.2/codemirror.js"></script><link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/codemirror/5.39.2/codemirror.min.css">
<script src="https://cdnjs.cloudflare./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/doc/manual.html#option_theme and https://codemirror/theme/
  value: document.getElementById('editor').value
});
</script>

https://codemirror/doc/manual.html