Отзывчивый редактор Rich Editor

Существенным битом является JavaScript:

function encodeInput(editor) {
    theText = editor.val();
    theText = theText.replace(/\*\*\*(.*?)\*\*\*/, '<strong><i>$1</i></strong>', 'g');
    theText = theText.replace(/\*\*(.*?)\*\*/, '<strong>$1</strong>', 'g');
    theText = theText.replace(/\*(.*?)\*/, '<i>$1</i>', 'g');
    console.log(theText);
    $('#preview').html(theText);
}

$(function() {
    $editor = $('#editor');
    $editor.keyup(function() {
        encodeInput($(this));
    });
});

Протестировано и отлично работает (мне нужна часть \*\*\* или она не работает).
В любом случае, на основной курс

Проблема

Поскольку я использую keyup, script не очень отзывчив (например, он только "запускает", как только пользователь отпустил ключ). Я хочу, чтобы он больше походил на редактор здесь, на StackOverflow, где нажата клавиша, и ответ происходит неточно.

Я попытался использовать keydown и keypress, но кажется, что атрибут val() не обновляется при запуске, поэтому я не могу знать обновленное значение.

Короче

Как я могу сделать его более отзывчивым, так что, когда пользователь нажал клавишу, предварительный просмотр будет автоматически обновлен?

Ответы

Ответ 1

Вы можете использовать событие HTML5 input в большинстве браузеров и событие propertychange в IE < 9. Эти события срабатывают сразу после обновления значения textarea.

Здесь обновленная демонстрация, использующая эти события:

http://jsfiddle.net/muWm2/1/

Я написал об этом в нескольких местах на SO. Вот два из них:

Я бы рекомендовал не обновлять предварительный просмотр при каждом изменении значения textarea, потому что он мог быстро получить ответ, что является большим, но не для пользователя. Я бы предложил "debouncing" событие, в этом случае ожидая периода бездействия пользователя (скажем, полсекунды) перед обновлением предварительного просмотра. Вот ответ и ссылка, которая может помочь:

Ответ 2

Вы можете bind() события keyup и keydown:

$editor.bind('keyup keydown', function() {
    encodeInput($(this));
});

Я заметил, что работает только первое вхождение, добавление флага g в регулярное выражение, похоже, помогло, и только для демонстрации jsfiddle снятие "normalize css" привело к получению жирного текста.

http://jsfiddle.net/tuUym/3/

Ответ 3

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

http://jsfiddle.net/tuUym/4/

ОБНОВЛЕНИЕ: Я понимаю, что вы имеете в виду. Может, вам нужен вход? Проверьте код obfuscated wmd. Это поможет вам достичь беззаботного редактора, для которого вы стремитесь:

Загрузка WMD