1

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

除了通过 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);

});
4

1 回答 1

0

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

于 2011-10-27T07:16:41.973 回答