响应式富编辑器预览答案

【问题标题】：Responsive Rich Editor Preview响应式富编辑器预览
【发布时间】：2011-12-08 16:07:47
【问题描述】：

最重要的是 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，所以脚本的响应速度不是很快（例如，只有在用户松开按键后它才会“运行”）。我希望它的行为更像 StackOverflow 上的编辑器，按下键并立即响应。

我尝试使用keydown 和keypress，但似乎val() 属性在运行时没有更新，所以我无法真正知道更新后的值。

简而言之

如何让它更具响应性，以便当用户按下某个键时，预览会自动更新？？

【问题讨论】：

两个建议：使用<em> 而不是<i>，如果您想添加适当的markdown 支持，请考虑将markdown-python 移植到JavaScript 而不是使用正则表达式。它使用插件、解析树等的方法非常好，而且更清洁 IMO。
@downvoter 你能解释一下-1吗？

标签： javascript jquery

【解决方案1】：

你可以bind()keyup 和keydown 事件：

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

我注意到只有第一次出现有效，将g 标志添加到正则表达式似乎有帮助，并且仅出于 jsfiddle 演示的目的，取消选中“规范化 css”会使粗体文本出现。

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

【讨论】：

还是同样的问题。在释放密钥之前不起作用。
在 Chrome 中对我来说效果很好，而以前却没有。不幸的是，我目前无法测试任何其他浏览器，我的笔记本电脑崩溃了，我在 gf 的电脑上。顺便说一句，可能希望将 word-wrap:break-word; 添加到预览窗格中。
我也在使用 chrome，但它无法按预期工作。
如果我们没有看到相同的东西，我会感到惊讶，也许测试它的方式不同，或者我误解了这个问题。究竟是什么不工作？我怎样才能重现它？我没有看到“在释放密钥之前不起作用”，它在我的一端起作用（例如，如果我持有 s 我在两个窗格中看到 sssssssss，它会在我输入时更新，包括格式） .我要睡觉了，祝你好运。
嗯，我确实注意到现在有点滞后（尤其是在第一个字符上，在实际输入时不是很明显）——但这似乎仍然是一个改进。希望你能得到更好的答案。

【解决方案2】：

Keypress 会在连续按下键时触发，因此您必须将其绑定到 keypress 才能看到结果。就是这样。

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

更新：我明白你的意思。也许你需要一个输入轮询器？查看去混淆的 wmd 代码。这将帮助您实现您所追求的无延迟编辑器：

WMD Download

【讨论】：

尝试按退格键，它似乎不会更新已删除的字符。
阅读问题并测试您自己的代码，绑定按键会导致 val() 不更新（意味着我写 L-o-r-e-m 并查看 L-o-r-e）。如果我按下另一个键（如 shift 或 ctrl），我只会看到最后一个字符。

【解决方案3】：

您可以在大多数浏览器中使用 HTML5 input 事件，在 IE propertychange 事件。这些事件会在 textarea 的值更新后立即触发。

这是使用这些事件的更新演示：

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

我已经在 SO 上的几个地方写过这个。以下是其中两个：

我建议不要在对 textarea 值的每一次更改时更新预览，因为它可能很快变得无响应，这对用户体验来说是一个很大的禁忌。我建议“去抖动”事件，在这种情况下，在更新预览之前等待一段时间的用户不活动（比如半秒）。这是一个答案和一个可能有帮助的链接：

【讨论】：

完美的答案。 16 小时内的赏金：P