JS-библиотеки для тяжелой обработки HTML DOM

Question

Я создаю небольшое приложение для заметок с html, css и Javascript. Содержание этих липких заметок - это не просто текст. Они могут иметь внутренние теги, такие как <p>, <span>, <img> и т. Д.

Итак, когда пользователь выбирает какой-либо контент в DIV записки (который установлен в contenteditable = true) и нажимает на кнопку, произнесите «Сделать текст полужирным» ', Выбранный контент должен быть изменен на Полужирный текст.

Я использую объект диапазона JavaScript для выбора. Но проблема заключается в замене существующих узлов и контента на недавно отформатированные, очень сложные. Скажем scneraio ...

Образец HTML:

<p> 
This is some paragraph <b> in bold </b> 
<span>This is some span</span> 
</p> 

И позволяет сказать, что пользователь выбирает из

<p> 
This is <SELECTION-START>some paragraph <b> in bold </b> 
<span>This is some<SELECTION-END> span</span> 
</p> 

Так выбор старта начинается с половины <p> тега, его имеет тег <b>. И заканчивается на полпути в теге <span>. Использование объекта JS Range и манипулирование узлами в DOM кажется довольно сложным для достижения этого.

Мой вопрос,

• Есть ли существующие библиотеки, которые применяются formatings и другие вещи для Dóm выбора HTML?
• Если нет, укажите код, который выполняет эту функцию.

Спасибо ..

Примечание: Я не хочу никаких HTML редакторы или плагины. Просто «DOM editing lib» или «код для простой обработки DOM»

Answer 1

Моя библиотека Rangy делает некоторые из этого. См. Например, class applier module.

Существует также встроенная поддержка браузера для таких стилей, как смелость, хотя у вас нет полного контроля над разметкой, которую она производит. Необходимый метод: document.execCommand(). Для переключения смелости используйте

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