Как разрешить двустороннее редактирование textarea и предварительный просмотр в реальном времени - PullRequest
Новая
       28

Как разрешить двустороннее редактирование textarea и предварительный просмотр в реальном времени

1 голос
/ 27 октября 2011

Я пытаюсь настроить простой предварительный просмотр «оглавления», который состоит из текстовой области, куда вы вставляете HTML-код статьи, и контейнера «живого предварительного просмотра», показывающего только заголовки.

В дополнение к редактированию через textarea, я также хотел бы иметь возможность редактировать текст заголовка или изменять атрибуты заголовка (класс CSS и уровень h (h1 / h2 / h3 / etc)) и отражать эти изменения в текстовая область.

Какой подход вы бы порекомендовали? Я знаю, что есть несколько плагинов для редактирования на месте, но мне интересно, если это излишне или есть более прямой способ сделать это.

Код, который у меня сейчас есть, ниже. Есть ли у вас предложения? «Рабочая» версия на http://jsfiddle.net/supertrue/6zeWQ/

// selector for the source textarea
var source = $('textarea#source');
// selector for the destination
var destination = $('#toc');
// interface for changing header level and css class
var gui = '<select><option value="h2">h2</option><option value="h3">h3</option><option value="h4">h4</option></select><input type="checkbox" name="hidden" value="Hide?" /> ';

source.keyup(function() {

   var html = '<div>' + source.val() + '</div>';
   var hs = $(html).find('h1,h2,h3,h4,h5,h6');

   destination.empty().append(hs);
   $('#toc h2,#toc h3,#toc h4,#toc h5').prepend(gui);

});

1 Ответ

0 голосов
/ 27 октября 2011

Для того, что вы хотите сделать, вам нужно создать свой редактор, используя хотя бы один iframe, который будет содержать стилизованный текст, который вы хотите редактировать. Просто установите document.designmode = "on" внутри iframe.

...