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.
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.