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

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

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

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

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

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

Приветствуются любые советы по этим вопросам или что-то еще, связанное с построением богатого текстового редактора!

Ответы

Ответ 1

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

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

iframe docs и contenteditable divs

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

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

кросс-браузерный стиль

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

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

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

Обновить ноябрь 2012

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

сохранение выбора текста

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

Ответ 2

Не серьезно, не делайте.

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

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