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

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: apply style to range of text with javascript in uiwebview

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.