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

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

Источник

3 ответа

Решение

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

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

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

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

Ресурсы:

Источник

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

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

Давайте начнем с Body-

<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.

Источник

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

Источник
Другие вопросы по тегам