Альтернатива для execCommand ('подчеркивание');

Question

Хорошо, некоторые ребята знают, что я имею в виду, и редактируют мой Вопрос, но они сделали это неправильно.

Лучшее объяснение:

У вас есть contenteditable div с текстом This is a Test String.. Если вы используете execCommand('underline') на Test String, вы получите This is a <u>Test String</u> если вы используете execCommand('strikethrough') на is a Test, вы получите This <s>is a <u>Test</u></s><u>String</u>, ЭТО правильно.

Итак, в HTML5 <u> и <s> устарели. Для первого execCommand вы можете использовать surroundContents() с <span style="text-decoration:underline;">. Если вы теперь используете surroundContets() для второго execCommand, вы получите BAD_BOUNDARYPOINTS_ERR.

Вещь, которую я хочу, - это функция, которая в этом случае работает как execCommand, но с функциями, в которых я могу определить с помощью HTML-тэга ведьмы строка будет обернута… (Это должно быть разумно в случае, если есть какое-либо перекрытие ...)

Answer 1

У surroundContents() будут проблемы: если выбор включает в себя несколько элементов блока, таких как <div> s или <p> s, окруженное содержимое будет помещено в новый блок, нарушая его исходное положение. Чтобы преодолеть это, вы можете легко адаптировать мой ответ здесь: применить стиль к диапазону текста с помощью JavaScript в uiwebview

Вам нужно будет сделать следующее:

• Создайте класс CSS с правилом «text-ornament: underline;»
• Добавьте intersectsNode метод Range для браузеров, у которых его нет, таких как Firefox (см. Пример MDC: https://developer.mozilla.org/en/DOM/range.intersectsNode)
• Если вам небезразличен IE, вам нужно написать совершенно другое решение.

Answer 2

CSS text-decoration: underline.