Search code examples
csshtmlfirefox-os

How to create a text editor in with line numbers in a web app


I'm trying to create a text editor with line numbers, which increments with the lines increase. Well, my focus is to make the UI that will do good in Firefox OS as a privilege app. But in UI what css and html need to be used to create a text-field where line numbers must not be editable by the user. And few other thing say like, text-field is fixed height height: 100px; now if text overflows and if the user scroll then line numbers must scroll together with respective lines. (I'm trying to create with textarea and div with contenteditable="true"). I'm not able to scroll the text-field if I try this. Please provide some help or any other way to do this.


Solution

  • As someone who has worked on this problem for over a year at a previous company. Just use one of the existing source code editors like Ace or CodeMirror. They'll work in a Firefox OS app as well (f.e. Cloud9 IDE uses Ace and works on FFOS).