Предварительный просмотр ввода текстовой области

Question

Я хочу создать функцию предварительного просмотра для сообщений, которая позволяет людям просматривать вывод того, что они вводят в текстовую область, как это будет выглядеть после отправки.Форум использует bbcode и не допускает использование html в сообщениях. Идентификатор поля textarea: «message»

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

Я действительно должен был предоставить больше информации, я понимаю ... В основном у нас есть форма для публикации в виде

<textarea id=\"message\" name=\"message\" style=\"width:515; height:160; font-family: Verdana; font-size: 8pt; color: #000000\" onKeyDown=\"countit()\"></textarea>

с кнопкой отправки

<input type=\"image\" src=\"newlayout/images/reply.png\" height=\"35\" width=\"109\" border=\"0\" alt=\"Submit\">

При нажатии форма отправляется на другую страницу, откуда она вставляется в базу данных.Мне бы хотелось, чтобы там была кнопка предварительного просмотра, например, в livejournal, где создается новое всплывающее окно, показывающее, как будет выглядеть сообщение.Я посмотрел исходный код на livejournal, и он предоставил jQuery, поэтому я попробовал код, приведенный здесь: http://haacked.com/archive/2009/12/15/live-preview-jquery-plugin.aspx Однако, это не сработало, так как ничего не обнаружилось, а также мне не понравилась идея предварительного просмотра,

Я также попробовал отсюда код javascript: http://www.codingforums.com/showthread.php?t=174810, но, опять же, ничего не получилось ...

Надеюсь, это хорошая информация, если яследует включить что-нибудь еще, пожалуйста, дайте мне знать:)

Answer 1

Этот вопрос близок к "напиши мой код для меня", но если вы просто пытаетесь получить помощь с наилучшим подходом, вот несколько:

Самым чистым будет иметь кнопку, которая (через javascript) изменяет action и target формы и запускает submit () ... это будет отправлять все данные по почте на страницу шаблона, которая может возьмите данные $ _POST и поместите их в шаблон, который имитирует живой шаблон.

В качестве альтернативы, вы можете сделать так, чтобы JavaScript / Jquery захватывал все значения полей и создавал шаблон HTML в javascript, а затем передавал его в div на странице, стили которой выглядели (а) как всплывающее (б) имеет CSS, который имитирует живую страницу.

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

Answer 2

Вы хотите связать событие keyup с текстовой областью. Каждый раз, когда пользователь отпускает ключ, он запускает функцию. Затем ваша функция получает значение текстовой области и анализирует его для BBCode, с которым я не знаком. Затем он возьмет этот вывод и поместит его в качестве содержимого любого элемента.

HTML:

<textarea id="myText"></textarea>

<div id="preview"></div>

JavaScript (jQuery):

$(document).ready(function() {

    var $textarea = $('#myText'),
        $preview = $('#preview');

    $textarea.on('keyup', function() {

        var $this = $(this),
            output = $this.val();

        // Do something with the value of the code to parse out the BBCode stuff.

        $preview.html(output);

    });

});

Answer 3

Почему бы вам не попробовать редактор WYSIWYG, такой как TinyCME или CKEditor ?