Home Ask Login Register

Developers Planet

Your answer is one click away!

user1145643 February 2016

Javascript WYSIWYG Logic

I've searched SO for similar questions, but it seems that they are all wrapped up in just making a div editable using contenteditable="true".

I am curious about the most efficient way to keep track of all the formatting tags added to a document. Just wrapping / unwrapping selected text with jQuery seems to corrupt the document after a few edits because of broken overlapping tags.

Would the correct approach be to separate all characters into an array, work out a logic to add / modify / remove tags at positions defined by window.getSelection(), and then render an output version to load into the editable div? Or is there a better solution?


user1145643 February 2016

It may be unnecessary to wrap elements in tags manually with javascript / jquery. I've been reading about execCommand() and it seems to be widely supported. This would allow for most formatting options found in WYSIWYG editors, color, font size, family, adding links, etc... I realize that my initial question was a little broad, but perhaps this will point someone else in the right direction as well...


document.execCommand('bold', 0);
document.execCommand('forecolor', 0, '#ff0000');
document.execCommand('fontSize', 0, '7');

Works in chrome / firefox / safari, not sure about IE yet. The above bold example demonstrates how the browser keeps track of the existing formatting and can toggle the style on/off.

Post Status

Asked in February 2016
Viewed 2,460 times
Voted 13
Answered 1 times


Leave an answer

Quote of the day: live life