Как создать редактор HTML/JS WYSIWYG?

Я пробовал много разных поисков Google, но мне не удалось найти текущий учебник (новее чем 2006) о том, как создать WYSIWYG-редактор. Я понимаю, что их уже много, но мне любопытно, как они на самом деле работают. Я просмотрел некоторые из исходного кода, но это много для переваривания. Мне было интересно, может ли кто-нибудь описать, как они работают? То есть, кажется, что форматированный текст не может быть помещен в текстовое поле, и все же они дают иллюзию делать именно это - как?

Ответ 1

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

Скорее всего, есть два свойства, которые используются для создания редактируемой области на веб-странице: designMode, которая применяется ко всему документу или contentEditable, которая применяется к определенному элементу. Оба свойства были первоначально нововведениями Microsoft, но были приняты всеми основными браузерами (contentEditable теперь является частью HTML5).

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

Чтобы передать содержимое из редактируемого элемента на сервер, обычно innerHTML редактируемого элемента загружается в текстовое поле, которое публикуется. Состав создаваемого HTML зависит от браузера.

Ресурсы

Ответ 2

У меня есть хорошая идея взять этот код, чтобы сделать классный редактор WYSIWYG -

Чтобы сделать хороший редактор, я создал код с JavaScript, который откроет новое окно, содержащее результат -

Начнем с тела -

<body> 
<textarea style="height:400px;width:750px;overflow:auto;"onblur="x=this.value"></textarea>
<br />
<button onclick="ShowResult()">see result!</button>
</body>

Теперь мы продолжим работу с JavaScript -

function ShowResult()
{
    my_window = window.open("about:blank", "mywindow1");
//By the above line code we have opened a new window
    my_window.document.write(x);
//Here we have added the value of the textarea to the new window
}

Посмотрите код в целом: -

<html>
<script type="text/javascript">
function ShowResult()
{
    my_window = window.open("about:blank", "mywindow1");
    my_window.document.write(x);
}
</script>
<body>
<textarea style="height:400px;width:750px;overflow:auto;" onblur="x=this.value">
</textarea><br />
<button onclick="ShowResult()">see result!</button>
</body>
</html>

Если я могу помочь вам в любом случае, я очень рад этому.

Спасибо, что задали этот вопрос и увеличили мое любопытство к JavaScript.

Ответ 3

В основном они скрывают ваше текстовое поле и помещают iframe в качестве поля редактора. Они захватывают ваш вход (text + formating) и записывают соответствующий HTML в iframe. Если вы отправляете свою форму, включая исходную текстовую область, они копируют содержимое iframe в текстовое поле и, следовательно, отправляется html-код.
Ну, это довольно упрощено.