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

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

8 голосов
/ 02 февраля 2009

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

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

Ответы [ 6 ]

8 голосов
/ 02 февраля 2009

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

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

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

4 голосов
/ 02 февраля 2009

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

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

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

2 голосов
/ 02 февраля 2009

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

1 голос
/ 02 февраля 2009

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

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

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

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

0 голосов
/ 02 февраля 2009

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

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

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

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

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

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

...