Построение редактора wysiwyg

Question

Мне нужно создать редактор wysiwyg для проекта, над которым я работаю, и мне нужно некоторое руководство. Некоторые из моих ключевых моментов путаницы заключаются в следующем:

iframe docs и contenteditable div: какой мне использовать и почему? Я ненавижу iframes, есть ли явное преимущество использования iframes?

кросс-браузерная стилизация: execCommand, кажется, применяет разные стили в разных браузерах. Есть ли какие-нибудь хитрости, чтобы сделать этот кросс-браузер совместимым? Должен ли я вообще не использовать execCommand и вместо этого применять свои собственные стили?

добавление элементов в цепочку отмены: как запустить мой собственный скрипт, например, вставить изображение, и позволить cntrl+z (отменить) удалить его? Существует ли массив отменяемых / возвращаемых предметов для contenteditable, в которые я могу вставлять предметы?

Сохранение выделения текста: как я могу сохранить выделение текста при выполнении таких операций, как выбор стиля шрифта, при котором фокус останется и удалит мой выбор. Рэнги? Закрытие Google? Есть ли другие библиотеки диапазона / выбора, на которые стоит обратить внимание?

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

Answer 1

Исходя из личного опыта, я рекомендую не делать этого, если только ваша цель - предоставить очень ограниченный набор функций. Огромное количество различий между браузерами и сложность их обходных путей делают эту задачу очень сложной и трудоемкой, если вы хотите сделать это хорошо.

Если это не оттолкнуло вас, вот мои мысли по вашим индивидуальным вопросам:

iframe docs и contenteditable div

Я рекомендую подход iframe по двум основным причинам:

• У вас есть полный контроль над типом документа, CSS и сценарием в iframe. Это очень важно, если вам нужно единообразное поведение и внешний вид и вы хотите использовать свой редактор на разных страницах.
• Firefox в частности довольно глючит с contenteditable элементы, которые они представили сравнительно недавно (версия 3.0), в то время как designMode существует в документах много лет (начиная с версии до 1.0; около 0.6, если память не изменяет) и работает довольно хорошо.

кросс-браузерная стилизация

Если для вас важно иметь одинаковые результаты от применения стилей в разных браузерах, то в общем случае вам нужно будет написать свой собственный код для стиля. Однако, это нарушит встроенный стек отмены, и вам нужно будет внедрить собственную систему отмены / возврата.

добавление элементов в цепочку отмены

Нет никакого программного способа взаимодействия со встроенным стеком отмены браузера. Вам нужно будет написать свой собственный.

Обновление ноябрь 2012

В работах есть спецификация для пользовательской отмены / повтора, так что это, вероятно, будет возможно в конечном итоге. Вот соответствующие ошибки для Mozilla и WebKit.

сохраняя выделение текста

Я должен заявить о своих интересах здесь, так как я написал Rangy. Я не думаю, что есть лучшая библиотека, которая делает подобную работу; У Google Closure есть API диапазона / выбора, но я думаю, что он использует собственный проприетарный интерфейс, а не эмулирует DOM Range и обычные объекты Selection браузера. IERange - это еще одна библиотека, которая по идее похожа на Rangy, но гораздо менее полно реализована и, по-видимому, заброшена сразу после выпуска ее автором.

Answer 2

Не, серьезно, нет.

То, что вы предлагаете, является серьезной задачей. Вы действительно должны смотреть на TinyMCE, http://tinymce.moxiecode.com/ или CKEditor, http://ckeditor.com/. Чтобы получить то, что вам нужно, требуется огромное количество усилий для того, чтобы работать над одной версией одного браузера, чтобы сделать его портативным, потребует человеко-лет инвестиций.

Лучшее решение - взглянуть на такие вещи, как плагины TinyMCE, http://tinymce.moxiecode.com/plugins.php. Вы можете получить основы (и мобильность бесплатно) и сконцентрироваться на добавлении нужных вам дополнительных товаров.