Как написать WYSIWYG редактор. Для чайников

Эта запись предназначается только для начинающих javascript-еров или для тех, кто не очень знаком с технологией WYSIWYG.
Итак, если нам нужно написать WYSIWYG редактор, то следуем инструкции:

1. Идем к человеку, который поставил задачу “написать WYSIWYG редактор” и выясняем, действительно ли ему нужен этот самый WYSIWYG, или можно обойтись BB-тегами. Если точно нужен, и он все обдумал, то: 
2. Определяем, сколько времени мы имеем для написание этого самого редактора.

• если у нас есть на это больше 2-х месяцев по 8 часов сразу и потом еще по 1-2 недели в год ежегодно и есть очень веские основания не использовать готовые редакторы, то изучаем предмет: небольшая статья , еще одна, и и вот без этого не обойтись. А главное, изучайте код готовых редакторов на предмет особенностей браузеров и подводных камней
• иначе смотрим в сторону готовых редакторов, например tinymce. Интегрировать хороший готовый редактор будет во много раз быстрее.

 Ненаучное обоснование:

В первых месяцах моей работы программистом мне поставили задачу: переделать форум и внутреннюю почту сайта проекта Encounter.
- Ок, без проблем, – сказал я
- Да, а давай сделаем, чтобы вот это поле ввода работало так: [дальше шло описание WYSIWYG-технологии], я видел такое на разных сайтах, очень удобно.
- Хорошо, сделаем – сказал я, вообще не разбираясь в предмете.
- Ты лучше посмотри уже готовые, чем самому писать – посоветовал техдиректор.
И я полез смотреть готовые редакторы. К слову, на тот момент я знал ровно одну команду на JS – это была document.getElementById(). Покопавшись пару часов на всяких сайтах, я нашел какое-то страшилище, которое на сегодняшний день успешно загнулось. Почему я не взял tinymce? Просто во-первых, мне кто-то сказал тогда, что LGPL – это плохая лицензия, и ей нельзя пользоваться (сегодня мы ей пользуемся), а во-вторых, я посмотрел код и ничего не понял.
А в том страшилище, которое я нашел, код просто был короче раз в 5.
Дальнейшая интеграция этого чуда программистской мысли превратилась в 90% его переписывание по мере изучения новых команд JS. Поэтому можно сказать, что редактор я стал писать самостоятельно, о чем сегодня очень жалею.
Вскоре после начала создания собственного редактора я нарвался на первый подводный камень, убил на него 3 дня, и нашел решение в исходном коде TinyMCE. Потом на второй, решение нашлось там же. Потом на третий, на четвертый.
Со временем я начал понимать, почему код хороших редакторов такой сложный.
Всего я убил на написание редактора месяца 2-3, и до сих пор дописываю кусочки. А выход нового браузера – это всегда праздник, т.к. то, что работает во всех актуальных браузерах, совсем не обязательно будет работать в новом.
В первой из статей, ссылку на которую я привел выше есть такая строчка:

“Для написания простого ВИСИВИГа не нужно изобретать велосипед, все средства уже встроены и успешно работают.”

Не верьте! В рамках статьи эта фраза верна, т.к. там учат делать только операции жирный, курсив и подчеркивание. И все. На этом успешно работающие средства технологии WYSIWYG практически заканчиваются, и начинаются хаки, баги, подводные камни, вообще хрень какая-то непонятная и нигде не документированные особенности каждой команды в каждом браузере.
В каждом браузере технология WYSIWYG реализована по-своему. Более того, в каждом браузере она реализована криво, и особых улучшений ситуации не предвидится.
Если кто-либо не согласен со мной, расскажите мне, как красиво и удобно сделать в WYSIWYG-редакторе вставку курсора до, после и между двумя блочными элементами. Т.е. у нас есть div с “border: solid 1px red;”, который стоит, например, в начале поля ввода. Как сделать, чтобы пользователь во всех актуальных браузерах мог вставить курсор перед блоком? Мне реально нужно решение этой проблемы, пока использую решение грязное и некрасивое.

Резюме

Для написания WYSIWYG редактора не стоит изобретать велосипед, возьмите готовый.
Исключения — только если писать с целью самообразования.