1

記事の HTML を貼り付けるテキストエリアと、ヘッダーのみを表示する「ライブ プレビュー」コンテナで構成される単純な「目次」プレビューアを設定しようとしています。

テキストエリアでの編集だけでなく、ヘッダーのテキストを編集したり、ヘッダーの属性(CSSクラスやhレベル(h1/h2/h3/etc))を変更してテキストエリアに反映させたりしたいです。

どのようなアプローチをお勧めしますか? いくつかの jQuery edit in place プラグインがあることは知っていますが、それはやり過ぎなのか、それとももっと直接的な方法があるのか​​ 疑問に思っています。

私が今持っているコードは以下です。提案はありますか？「作業」バージョンは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

あなたがやりたいと思われることのために、少なくとも 1 つの iframe を使用してエディターを構築する必要があります。この iframe には、編集したいスタイル付きテキストが含まれます。iframe 内で document.designmode = "on" を設定するだけです。

于 2011-10-27T07:16:41.973 に答える