Редактор разметки JavaScript с использованием объекта выделения и диапазона - PullRequest
Новая
       25

Редактор разметки JavaScript с использованием объекта выделения и диапазона

1 голос
/ 12 июля 2011

Я пытаюсь написать редактор разметки на основе JavaScript (WYSIWIG), используя объект выделения и диапазон. Пока у меня нет проблем с доступом к этим объектам.

Мои проблемы начинаются здесь:

Используя объект диапазона, я могу получить доступ к его свойствам startContainer / StartOffset и EndContainer / Endoffset. Это означает, что я получаю информацию об узле, с которого начинается мой выбор, включая внутреннюю позицию и ту же информацию о конце выбора.

Насколько я понял, JavaScript автоматически добавляет начальные или конечные теги в случае, если мой выбор нарушает существующие древовидные структуры.

Если я хочу добавить разметку сейчас, как я могу справиться с этими сломанными структурами?

Пример: 

This <i>is my</i><b>sample</b> text.

Теперь я хотел бы подчеркнуть часть «мой образец»

Это означает, что нечто подобное должно быть построено из выбора «моего образца»: 

This <i>is <u>my</u></i><b><u>sample</u></b> text.

Но так как я не замечаю нарушения существующей древовидной структуры, как я могу это сделать? Как я могу обеспечить правильную разметку?

Я также думал об обработке всей строки, но я не знаю о глобальных позициях букв / текста, а только об их положении в определенных узлах.

Я надеюсь, что этот вопрос ясен, и я прошу прощения за его общую форму. Но я действительно схожу с ума от этого материала ...

1 Ответ

0 голосов
/ 12 июля 2011

Существует встроенный метод document.execCommand() ( MSDN , MDN ), который обрабатывает эти вещи для вас.В случае подчеркивания это будет 

document.execCommand("Underline", false, null);

jsFiddle: http://jsfiddle.net/3NcEP/

Обратите внимание, что это работает только с редактируемым контентом (с использованием contenteditable или designMode) в большинстве браузеров.

Если вам нужно применить какой-либо стиль к выделению, которое не предусмотрено ни одной из встроенных команд, вам нужно будет обработать все узлы в выделении самостоятельно, разделяя их при необходимости на каждомконец выбора.Это нетривиально.Кроме того, IE <9 не поддерживает <a href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html" rel="nofollow"> DOM Range и Selection и делает вещи совершенно по-другому.Если вам нужно работать с этими браузерами, может помочь такая библиотека, как моя Rangy .

...