Alternative for execCommand('underline');

Question

Okay, some Guys will know what i mean and edit my Question but they did it wrong.

A better explanation:

You have a contenteditable div with the text This is a Test String.. If you use now the execCommand('underline') on Test String you get This is a <u>Test String</u> if you use now the execCommand('strikethrough') on is a Test you get This <s>is a <u>Test</u></s><u>String</u>, THIS is correct.

So, in HTML5 <u> and <s> are obsolete. For the first execCommand you can use the surroundContents() with a <span style="text-decoration:underline;">. If you now use the surroundContets() for the second execCommand you receive the BAD_BOUNDARYPOINTS_ERR.

The Thing i want is a Function which works like the execCommand in this case but with functions where i can define with witch HTML-Tag the String will wrapped… (It should be intelligent in the case if there is any overlapping…)

Answer 1

CSS text-decoration: underline.

Answer 2

The surroundContents() will have problems: if the selection encompasses multiple block elements, such as <div>s or <p>s, the surrounded contents will be placed in a new block, breaking it out of its original position. To overcome this, you could easily adapt my answer here: http://stackoverflow.com/questions/2887101/apply-style-to-range-of-text-with-javascript-in-uiwebview/2888969#2888969

You'll need to do the following:

• Create a CSS class with the rule "text-decoration: underline;"
• Add an intersectsNode method of Range for browsers that don't have it, such as Firefox (see MDC for an example: https://developer.mozilla.org/en/DOM/range.intersectsNode)
• If you care about IE, you'll need to write a completely different solution.