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

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

источник

2010-04-20 LDK

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

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

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

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

Ресурсы:

источник

2010-04-20 20:28:29

на боковой ноте ... Мне бы хотелось увидеть версию WYSWIG с холстом, похожую на [bespin] (https://bespin.mozillalabs.com/) (heres a [видео-презентация] (http : //www.youtube.com/watch? v = Ps6GBLlSGLs)) –

Для тех, кто заинтересован, сделать элемент редактируемый:

– LDK

У меня тот же вопрос. Сейчас в 2014 году и с учетом HTML5, остается ли этот ответ действительным? Нужно ли использовать iFrames даже сегодня? cc @DavidMurdoch – NoobDeveloper

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

источник

2010-04-20 20:16:48

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

Чтобы сделать хороший редактор I сделали код с 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.

источник

2012-06-02 20:33:26 NewUser

-1 для использования
тег, встроенная обработка событий и встроенный дизайн! –

+22

Жаль, что я не смог бы вы проиграть. Это всего лишь пример, и отображение правил стиля inline упрощает понимание, чем необходимость ссылаться на дополнительный блок кода css ... –

@AakashGoel +1, чтобы сбалансировать его. – Ced

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

ответ

Смежные вопросы