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

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

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

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

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

именно так это сделано.

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

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

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