Как работают онлайн-текстовые редакторы?

StackOverflow https://stackoverflow.com/questions/503381

Вопрос

Я пытаюсь разработать онлайн-редактор (например, FCKeditor / etc), Но я понятия не имею, как они работают.Я знаю, что в WYSIWYG есть Javascript и IFrames, но как они на самом деле работают?

Мне особенно любопытно иметь предварительный просмотр в режиме реального времени того, что вводится в редактор.

Это было полезно?

Решение

RTE обычно (всегда?) реализуются с использованием iframe.Объект document, который доступен внутри этого iframe, должен обладать свойством Режим проектирования установлен в положение вкл.После этого все, что вам нужно сделать, чтобы реализовать базовые функции, такие как жирный шрифт, курсив, цвет, фон и т.д.выполняются с использованием метода execCommand объекта document.

Основная причина использования iframe заключается в том, что вы не потеряете фокус выделения при нажатии кнопок стилизации (Firefox позволяет устанавливать это свойство только для iframes).Более того, атрибут contentEditable недоступен в версиях Firefox, предшествующих 3.

Все становится немного сложнее, когда вы хотите делать необычные вещи с этим RTE.В этот момент вы должны использовать Объекты диапазона (которые по-разному реализованы в разных браузерах).

Другие советы

FCKeditor - Редактор является открытым исходным кодом, и исходный код находится в свободном доступе.

Код для редактор используется в Stackoverflow также доступен

Возможно, стоит потратить некоторое время на чтение исходного кода.Люди здесь были бы рады помочь объяснить любые фрагменты кода, которые были неясны.

Я считаю, что ключом к редакторам WYSIWYG является удовлетворяемый атрибут (который может применяться к любому HTML-тегу, но, предположительно, что-то вроде div в данном случае).Остальная функциональность обычно обеспечивается Javascript, обращающимся к DOM и манипулирующим HTML.Что касается функции предварительного просмотра, то, вероятно, это просто вопрос подключения события, которое возникает при редактировании элемента пользователем, а затем извлечения его HTML-кода и отображения его в другом месте страницы с использованием некоторого относительно простого Javascript.

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

вот как это делается.

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

Это достигается довольно легко (некоторые части).Например, вы могли бы использовать jQuery для быстрого запуска.

div.theScreen {
  width:320px;
  height:75px;
  border:1px solid #CCCCCC;
  background-color:#f1f1f1;
}

<div class="theScreen"></div>
<div><textarea class="typePad"></textarea></div>

Теперь, когда у нас есть разметка и стили, мы можем добавить несколько простых Javascript для запуска предварительного просмотра в реальном времени.

$(document).ready(function(){
  $(".typePad").keyup(function(){
    $(".theScreen").html($(".typePad").val());
  });
});

Это очень грубый и простой пример, но он поможет вам начать.

Я запустил проект "sourceforge" с открытым исходным кодом для создания расширенного текстового редактора около полутора лет назад.Я так и не понял, как вставить туда свой код, однако для его разработки мне пришлось исследовать, как работает "режим редактирования контента" в IE и Firefox.Мое исследование включало в себя в основном веб-сайт Firefox и веб-сайт Microsoft.

Код, который я видел для этого, был уродливым и не очень дружественным к OO (извините, я фанатик объектов, ничего не могу с этим поделать), поэтому потребовалось много переделок, чтобы получить форму, из которой я мог бы разрабатывать и расширять.

К сожалению, даже если вы будете следовать функциональности, предоставляемой браузером в "режиме редактирования содержимого", вы все равно получите редактор, полный ошибок.Причина этого в том, что "режим редактирования содержимого" не работает согласованно при вставке из MS Word (все пробуют это) или создании нумерованных списков, а создаваемая им разметка будет непоследовательной и плохо сформированной.

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

Я не могу порекомендовать ничего другого, потому что я действительно не пробовал альтернативы.

Хотя TinyMCE кажется лучшим вариантом, для меня это все еще головная боль, потому что вставка документов Word по-прежнему непредсказуема, обещание WYSIWYG на самом деле невозможно в HTML, но клиент ожидает этого, и возникает много проблем, которые возникают, как только вы начинаете разрешать пользователям помещать необработанный HTML в вашу базу данных.(особенно если в вашей кодовой базе есть части, которые последний раз обновлялись в 1993 году ...)

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top