Henk Henk - 1 year ago 101
CSS Question

stubborn underline won't work

I am making a text editor, however the remove underline functionality won't work.
working code example: jsfiddle

Here is the code that gives the problem

else if (tag == "u") {
sell = window.getSelection().getRangeAt(0);

if (selectionIsUnderlined()) {
node = range.createContextualFragment("<font style='text-decoration: none !important'>" + sell + "</font>");
} else {
node = range.createContextualFragment("<u>" + sell + "</u>");


any ideas?

Answer Source

Well the issues with removing underline was that the selection did not take into account the wrapping <u> element. The content inside <u> was removed and new content with <font> tag inserted inside <u> tag.

I tried to go up one node and check if it is <u> and then remove the node:

if (selectionIsUnderlined()) {
    node = range.createContextualFragment(
           "<font style='text-decoration: none !important'>" + sell + "</font>");
    var nd = sel.anchorNode;
        nd = nd.parentNode;

    if (nd) {

The updated fiddle is here

PS:- this is just an experiment. please consider performance/browser compatibility and other pros/cons before using it.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download