Javascript WYSIWYG Logic

Question

Я искал SO для подобных вопросов, но кажется, что они все завернуты в простое редактирование div, используя contenteditable="true".

Мне интересен наиболее эффективный способ отслеживания всех тегов форматирования, добавленных в документ. Простое обертывание/разворачивание выделенного текста с помощью jQuery, похоже, искажает документ после нескольких изменений из-за разбитых перекрывающихся тегов.

Будет ли правильный подход состоять в том, чтобы отделить все символы от массива, разработать логику для добавления/изменения/удаления тегов в позициях, определяемых window.getSelection(), а затем визуализировать выходную версию для загрузки в редактируемый div? Или есть лучшее решение?

Answer 1

Возможно, нет необходимости обертывать элементы в тегах вручную с помощью javascript/jquery. Я читал около execCommand(), и он, кажется, широко поддерживается. Это позволит использовать большинство вариантов форматирования в редакторах WYSIWYG, цвет, размер шрифта, семью, добавить ссылки и т. Д. Я понимаю, что мой первоначальный вопрос был немного широк, но, возможно, это укажет на кого-то еще в правильном направлении ...

Примеры:

document.execCommand('bold', 0); 
document.execCommand('forecolor', 0, '#ff0000'); 
document.execCommand('fontSize', 0, '7'); 

Работает в хром/Firefox/Safari, не уверен в IE еще. Вышеприведенный жирный пример демонстрирует, как браузер отслеживает существующее форматирование и может включать/выключать стиль.