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

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

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

8
editor fckeditor javascript wysiwyg

6 ответов

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

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

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

8

FCKEditor открытым исходным кодом и исходный код находится в свободном доступе.

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

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

4

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

2

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

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

1

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

это выполняется довольно легко (некоторые части). Например, вы можете использовать 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());
  });
});

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

1

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

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

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

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

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

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

0