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

Question

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

документы iframe и 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

В работах есть спецификация *1029* для пользовательской отмены / повтора, так что это, вероятно, будет возможно в конечном итоге. Вот соответствующие ошибки для 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. Вы можете получить базовые знания (и бесплатную переносимость) и сконцентрироваться на добавлении нужных элементов с добавленной стоимостью.