Javascript查看HTML切換

我正在開發一個wysiwyg編輯器，因爲我發現的大部分編輯器都不按我希望的方式工作。Javascript查看HTML切換

我大部分都做過「粗體，斜體，前景色，背景色等」但我現在遇到的問題是製作視圖代碼按鈕。

我想要發生的是，當用戶點擊按鈕，他們看到的代碼，如果他們再次擊中它切換回到HTML。

我已經試過

$('#wysiwyg').text($('#wysiwyg').html());

這也正是我想要的，但它並沒有保持換行符，所以所有的<p>標籤將會在一行內運行起來。有沒有人有一個更好的解決方案，可以保持換行，所以如果你在瀏覽html時有<p>這樣的換行符。

來源

2013-02-05 Robert E. McIntosh

之間進行切換，你試圖把CSS樣式的白色空間：前;當你切換到查看代碼模式？（更改爲正確的css屬性名稱） –

您的意思是代替上面或之後的代碼片段。我曾嘗試在之前包裝HTML，但不會有任何不同的結果。因爲一旦你這樣的文字似乎刪除換行符。 –

這只是一個CSS屬性，它強制元素顯示換行符「原樣」。沒有它，換行符（'\ r \ n'）在HTML中被忽略。 –

當您切換到查看碼模式時，您可以添加white-space:pre。這應該很好地工作： http://jsfiddle.net/rNPJA/

解決方案的代碼展示瞭如何在兩個

if ($(this).data('wysiwyg-action') == "changeview") 
    if ($('#wysiwyg').css('white-space') != "pre") 
    $('#wysiwyg').text($('#wysihtml-content').html()).css({ 'white-space':'pre' }) 
    else 
    $('#wysiwyg').html($('#wysihtml-content').text()).css({ 'white-space':'normal' })

來源

2013-02-05 14:49:10

只是想向人們展示如何在未來遇到此線索時如何做到這一點。 –

Javascript查看HTML切換

回答

相關問題