我正在尝试设置一个简单的“目录”预览器,该预览器由一个文本区域组成,您可以在其中粘贴文章的 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);
});