插入可複製的空白區域

我正在渲染html到一個有大量縮進程度的代碼塊，我希望人們可以將其複製到文本編輯器中，同時保留縮進。插入可複製的空白區域

目前我在代碼中有很多個字符，這非常混亂，並且很難維護。我寧願通過css來使用:: before操作符，但我嘗試過的所有解決方案都存在問題。

如果我在使用before之前的元素前插入\ 00a0個字符，則瀏覽器顯示空白，但不會複製到文本編輯器中。

如果我使用'pre'，源代碼中的空格被保留，它使得渲染的html太依賴於源代碼的結構 - 也就是說，如果源代碼中有div，它會在渲染中增加額外的行代碼，再加上我不得不擔心源代碼中的空格和換行等問題，當我在編輯器中對代碼進行重新格式化時，這是一個問題，爲了保持它的清潔（這是相當動態的），我必須經常這樣做。

所以基本上我需要一些css類，它們會給我不同級別的縮進，而不必在源文件中添加或實際的空白，這些空白也會從瀏覽器複製到文本文件中。

來源

2014-09-05 Elliot Sumner

爲什麼不只是讓代碼縮進蝙蝠？ – Nit 2014-09-05 00:15:34

它是動態的，它必然是一個挖空視圖模型，它需要用div，span等來描述。 – 2014-09-05 00:28:01

你會同意jQuery解決方案嗎？ – 2014-09-05 00:28:51

下面的代碼增加了該類指示的許多選項卡，class-4生成4個選項卡，然後將該選項卡的數量預先包含到包含該類的元素中 - jsFiddle Demo它逐行工作。

HTML

<p class="tab-1">1 tab indentations</p> 
<p class="tab-2">2 tab indentations</p> 
<p class="tab-3">3 tab indentations</p> 
<p class="tab-4">4 tab indentations</p>

var indentElements = $('[class*="tab-"]'); 

$.each(indentElements, function(index) { 
    var indentAmount = parseInt(this.className.split('-')[1]); 
    var indentation = new Array(indentAmount + 1).join('&nbsp;&nbsp;&nbsp;&nbsp;'); 
    this.innerHTML = indentation + this.innerHTML 
});

輸出

1 tab indentations 

     2 tab indentations 

      3 tab indentations 

       4 tab indentations

步驟：

選擇上-用含有tab-
遍歷它們
拆分的類名稱的類的所有元素，並得到索引1
與上述創建一個陣列（後面-數）索引數量並加入4個非空格（創建制表符）
將該元素的HTML設置爲其當前HTML內容加上乘以的;nbsp s

參考

我得到了第4步從彼得·貝利在this answer - 酷技巧。

來源

2014-09-05 00:40:26

不錯的想法，使用類名稱，我試圖讓這個靈活，所以你可以無限縮進 – 2014-09-05 01:16:42

不錯的一個布賴恩，這是完美的，謝謝。有點奇怪，我們必須以編程的方式來做，但嘿，whaddyagonnnado。 – 2014-09-05 02:56:09

謝謝，很高興你喜歡它。沒有任何可以選擇的CSS解決方案。那麼爲什麼不以編程方式添加他們:)乾杯。 – 2014-09-05 02:59:41

插入可複製的空白區域

回答

相關問題