如何允许双向编辑 textarea 和实时预览

Question

我正在尝试设置一个简单的“目录”预览器，它由一个文本区域组成，您可以在其中粘贴文章的 HTML，以及一个仅显示标题的“实时预览”容器。

除了通过 textarea 进行编辑之外，我还希望能够编辑标题文本或更改标题的属性（CSS 类和 h 级别 (h1/h2/h3/etc)）并将这些更改反映在文本区域。

您会推荐什么方法？我知道有一些 jQuery 就地编辑插件，但我想知道这是否有点矫枉过正，或者是否有更直接的方法。

我现在拥有的代码如下。你有什么建议吗？ “工作”版本在 http://jsfiddle.net/supertrue/6zeWQ/

// selector for the source textarea
var source = $('textarea#source');
// selector for the destination
var destination = $('#toc');
// interface for changing header level and css class
var gui = '<select><option value="h2">h2</option><option value="h3">h3</option><option value="h4">h4</option></select><input type="checkbox" name="hidden" value="Hide?" /> ';

source.keyup(function() {

   var html = '<div>' + source.val() + '</div>';
   var hs = $(html).find('h1,h2,h3,h4,h5,h6');

   destination.empty().append(hs);
   $('#toc h2,#toc h3,#toc h4,#toc h5').prepend(gui);

});

Answer 1

对于您想要做的事情，您需要使用至少一个 iframe 构建您的编辑器，其中将包含您要编辑的样式文本。只需在 iframe 中设置 document.designmode = "on"。