I am working on a WYSIWYG editor. As it has to include just some basic functions I want to do it myself and avoid problems. Now it is working perfectly but I want to add a functionality in order to unbold, unitalic…
I know that with execCommand it is an automatic thing, but it does not work in the same way in all browsers so… my idea was the next: When pressing BOLD button, check the environment of the string, and…
- If the selection is Between the open and close
<b>tags, like<b>ab||selected||cd</b>replaceselectedwith</b>selected<b>. - If the selection starts or finishes with the
<b>tag, like<b>ab||selected||</b>replace it by</b>selected<b>(and then strip out all<b></b>groups.) - If the selection starts and finishes with the
<b>tag, like<b>||selected||</b>replace it by</b>selected<b>(and then strip out all<b></b>groups.)
But… how can I get into a var the <b>content</b> string when just having the caret/selection IN content? It might be possible…
UPDATE
It is curious that the replacement is always the same. So, should I really get what I am asking for, or just replace it in this way, always?
Do not write your own WYSIWYG editor.
Do you really want to “avoid problems”? Then use one of existing good editors (there’re only 2… maybe 3 in fact). Creating editor is extremely hard task for which you need a lot of time (I mean… few years), a lot of knowledge and patience (a lot of too :P).
I can myself write that “I am working on a WYSIWYG editor”. For more than half of the year I’m a core developer of one of these “good editors”. And during this period I implemented only one feature – very important and very complex, but one of tens/hundreds of them.
That problem you have… I don’t even want to start answering. It sounds like a piece of cake, but it isn’t. It’s a piece of brick that can kill you when fall on your head :). I’ll only start enumerating important parts of the impl: Selection + range implementations, because native differ and are buggy (~5k LOC + min Nk LOC for tests). Then you need the proper styles handling (applying and removing) impl (min 1k LOC + tests), because you have to take care about styles spanning on many blocks (like entire table bolded) and different selections containing parts or entire styles etc. And you have to avoid native execCommand, because they will break your content. Then you should also think about updating toolbar buttons states and, to make your impl bullet proof, handling different style tags (e.g. pasted). And that’s only the tip of an iceberg – you’ll have styles handling, but hundreds of other things broken. Things that big editors have fixed.
Anyway – learn config options for one of main editors and customize it as you want. This will take you a few hours, not a few years.