Javascript Text Editor Basic Functionality

Question

I'm attempting to write my own WYSWG text editor in Javascript, but I'm struggling with what seems to be a rather basic problem.

Given a selection of text inside a contentEditable area such as what is between the pipes '|' here:

<span class="italic">Some text that |I would want</span> to edit or| select

I can figure out what I need to do here to essentially move the closing span tag so that my selection is included in the italic span. However, there are a plethora of other cases that I need to account for such as if I want to remove the span, add another span around an area that already contains an opening or closing span, account for opening/closing other tag types around my selection, etc.

Is there some library that exists anywhere that provides this selection/replace logic for me? Or am I asking too much? Would I be better off using one of the many editors already available on the web?

I would really like to not have to use the last option since most of the ones I've found seem extremely heavy weight since I really only want a few custom editing functions.

@kennis: it's all how its loaded, you can load it barebone without all the extra stuff. tinymce.com/tryit/multiple_configs.php — Control Freak
– Control Freak, Commented Feb 13, 2012 at 1:43
Well I wanted to take this as a kind of learning experience. Also, tinyMCE is really gigantic when I need only a few of the functions it offers and I wanted to add a few functions that it does not offer. I figure if I can get this issue figured out, there won't be too much more difficulty. — kand
– kand, Commented Feb 13, 2012 at 2:08

Morgan T. · Accepted Answer · 2012-02-14 15:40:03Z

2

Check out Rangy and its modules http://code.google.com/p/rangy/ http://code.google.com/p/rangy/#Modules

ContentEditable is a nasty beast with many quirks between browsers. Rangy tries to solve that but it's still difficult to work with. My project has a lot of custom rules so we had to use a lower level library like Rangy. Combined with jQuery it is very powerful.

answered Feb 14, 2012 at 15:40

Morgan T.

1,9371 gold badge17 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kand Over a year ago

I'll have to take a deeper look into it, but at first glance this looks like exactly what I need! Great, thanks!

Collectives™ on Stack Overflow

Javascript Text Editor Basic Functionality

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest