Автоматически обновлять div с помощью html-разметки в стиле stackoverflow

Question

Кто-нибудь знает, как Stackoverflow создает «окно предварительного просмотра», расположенное ниже текстовой области, в которую вводятся вопросы и ответы? По сути, я полагаю, что можно использовать «.clone ()» с jQuery, но тогда он не будет отображать HTML-разметку (например, <b> или <br /> и т. Д.), Поскольку div не будет перезагружен.

Я знаю, что stackoverflow использует '*' для разметки полужирного текста и т. Д., Но для моего проекта будет использоваться «настоящая» разметка, т. Е. Для полужирного шрифта есть кнопка, которая будет включать <b> вокруг выделенного текста.

Я все еще изучаю этот материал, но, как подсказку, я полагаю, что мне следует взглянуть на что-то похожее на AJAX, но я не смог найти ничего действительно похожего на этот конкретный случай!

Спасибо!

Answer 1

если вам нужно показать HTML, написанный внутри текстовой области, просто возьмите его значение и скопируйте в элемент предварительного просмотра, что-то вроде

$('#preview-div').html($('textarea').val())

если вам нужно показать его, пока пользователь печатает, просто вызовите этот оператор внутри keyup обработчика события textarea

$('textarea').on('keyup', function() {
   $('#preview-div').html($(this).val());
});

в любом случае осведомлен о вводе, введенном пользователем: лучше, если вы всегда очищаете разметку перед отображением в элементе предварительного просмотра.

Пример скрипта: http://jsfiddle.net/YX9Eq/

Answer 2

Если вам интересно, как в Stack Overflow это делается, вы хотите узнать о синтаксисе уценки .

По сути, вы хотите получить значение текстового поля, в которое вы пишете, добавить его в веб-сервис Markdown через AJAX (или что-то подобное), позволить веб-сервису проанализировать его для вас, а затем получить ответ и шлепни его в ожидание DIV.

AFAIK, StackOverflow использует MarkdownSharp для анализа своего текста. Вы можете быстро создать веб-сервис через C #, используя ту же библиотеку.