CODEWITHSUNDEEP
javascriptjquerycontenteditable
kand
kand

Reputation: 2338

Javascript Text Editor Basic Functionality

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.

Upvotes: 2

Views: 889

Answers (1)

Morgan T.
Morgan T.

Reputation: 1937

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.

Upvotes: 2

Related Questions