如何允許雙向編輯textarea和實時預覽

我試圖設置一個簡單的「目錄」預覽器，它由一個textarea粘貼文章的HTML和一個「實時預覽」容器組成只顯示標題。如何允許雙向編輯textarea和實時預覽

除了通過textarea進行編輯之外，我還希望能夠編輯標題文本或更改標題的屬性（CSS class和h level（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); 

});

來源

2011-10-27 supertrue

對於這聽起來像你想做的事，你需要使用至少一個iframe來構建你的編輯器，其中將包含要編輯的文本樣式。只需在iframe中設置document.designmode =「on」即可。

來源

2011-10-27 07:16:41

然後我將如何獲得更改以反映在textarea中？ – supertrue

我會嘗試這樣的： document.body.onkeyup = function（event）{parent.keyPressHandler（event）; } –

如何允許雙向編輯textarea和實時預覽

回答

相關問題