javascript - 如何使 textarea 内容可以设置样式或设置 div 行为(如 textarea 行为)？

Question

我想创建一个基于 jQuery 的非常简单的 html 编辑器(不是所见即所得)。

我的问题是如何制作 textarea或 div可能

• 在上面写一些文字
• 然后样式即标签(例如 <strong>some stuff</strong> 将 <strong> 颜色更改为蓝色)

我不问如何使用正则表达式以及稍后如何操作 DOM，因为这是我自己要解决的问题:D 只是如何为它制作“ Playground ”;)

当我使用 textarea 时，嗯(不可能？)在内部设置样式，但当我使用 div 时...嗯，我可以只在 div 上写 :D 那么如何将 textarea 行为链接到 div 上？

编辑 这是类似的东西:http://codemirror.net/mode/xml/index.html

Answer 1

快速查看 fiddle展示如何做到这一点。

$('#edit').keydown(function(){
   var text = $(this).val();

   $('#preview').html(text); 
});

这是你的html

<textarea id="edit">

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

和你的CSS

#preview{ width:100%; background-color:#eee; padding:20px}

#preview strong{color:blue;}