Question

我正在尝试设置一个简单的“目录”预览器，其中包含粘贴文章HTML的textarea和仅显示标题的“实时预览”容器。

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

您会推荐什么方法？我知道有一些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将包含您要编辑的样式化文本。只需在iframe内设置document.designmode =“on”。

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

1 个答案: