stubborn underline не работает

Question

Я создаю текстовый редактор, однако функция подчеркивания удаления не будет работать. рабочий код Пример: jsfiddle

Вот код, который дает проблему

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>"); 
    } 

    range.deleteContents(); 
} 

какие-нибудь идеи?

Answer 1

Ну проблемы с удалением подчеркивания, что выбор не принимать во внимание оберточной <u> элемента. Содержимое внутри <u> было удалено, и новый контент с тегом <font> был вставлен внутри метки <u>.

Я попытался подняться на один узел и проверить, если он <u>, а затем удалить узел:

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

    if (nd) { 
     nd.remove(); 
    } 

Обновленный скрипку here

PS: - это просто эксперимент. рассмотрите совместимость с производительностью/браузером и другие плюсы и минусы перед ее использованием.

Answer 2

попробовать что-то вроде этого:

var node=""; 
var divs=0; 

if (selectionIsUnderlined()) { 
    node+="<div class=underline>"; 
    divs++; 
} 

if(selectionIsBold()){ 
    node+="<div class=bold>"; 
    divs++; 
} 

node+=sell; 

Затем закройте дивы.

.underline{ 
    text-decoration: underline; 
} 

и т.д ..