How to build a lightweight online text editor?

Question

I want to build a lightweight online text editor like google doc, but quite quite lighter than that.

What I mean is, I only want to realize the following three functions:

input/delete characters
create/delete a new line
indent

But I'm not quite sure how to build it.

Here is my idea:

Treat every line as a single div. Monitor the keyboard event, when user hit enter, create a new div

According to my method, I need to set the div's contentEditable=true However, after that, whenever I hit enter, a newline is created inside the div.

So, how to stop that? (can it only be solved by using javascript?) Or, is there any other way to achieve my goal?

You might want to have a look at [CK Editor](http://ckeditor.com/), Even though it gives lots of function It also allows you to configure these options and lets you display only those whic you need... About the lightness (I'll leave that to you) have a look at it and see if its light enough.. — Sangeet Menon, Mar 01 '12 at 11:14

score 2 · Answer 1 · answered Mar 01 '12 at 11:12

2

Just use event.preventDefault(); like so:

$(document).bind("keydown keypress", function(event) {
  if ( event.which == 13 ) {
    event.preventDefault();
    // Your code here
  }
});

answered Mar 01 '12 at 11:12

Alex

8,875
2
27
44

score 0 · Answer 2 · answered Mar 01 '12 at 11:13

0

I think you mean text editors like tinymce or CKEditor. You can make them as lighter as you want.

answered Mar 01 '12 at 11:13

Samidjo

2,315
30
37

score 0 · Answer 3 · edited May 23 '17 at 12:33

I would read the keyboard events and just modify the DOM to reflect those keyboard changes. The biggest problem you will have is to position the 'caret' (vertical line').View this SO question to do this correctly -> calculate-text-width-with-javascript

Another alternativ, and one that I prefer, is to use the tag. Its a more lightweight solution and comes with text measurement built-in. Google Closure library has a lot of support for this built in -> Closure Library, and example with text selection -> Canvas Text

score 0 · Answer 4 · answered Mar 01 '12 at 12:40

Be careful about letting people do this on your webpage -- if you're not properly escaping/monitoring input, they can wreak havoc on the page itself preventing them from being able to save things, etc.

Most of these editors implement their editor as an embedded iframe. Since it's being served from the same port, protocol and host, you have full script access to it.

So you make a tag in the iframe editable, and leave all the controls outside the iframe. When they click on a control, you make that happen in the iframe.

When they save, you just grab the contents of the iframe's div.

How to build a lightweight online text editor?

4 Answers4