![](/img/trans.png)
[英]Strip HTML formatting from contenteditable div but preserve line breaks on paste?
[英]How can I keep the line breaks (formatting) of an element appended to a list via a contenteditable div input?
我有點問題。 我目前正在編寫一個列表,用戶可以在其中輸入一些提示/消息。 這很有效,但我發現了一個問題,我不喜歡它。
為了防止任何 HTML 輸入,我在paste
函數中實現了一些東西,如果有 HTML,它會給我任何純文本。 當我現在復制一些具有多行的代碼時,例如:
$( "button" ).click( function () {
let template = $( "#template" ).clone();
template.removeAttr("id");
template.html( input.html() );
input.empty();
$( "#wrapper" ).append( template );
} );
並將其粘貼到我的contenteditable div
,行格式仍然存在。 如果我現在按下按鈕將其附加到列表中,格式將完全消失,所有內容都在一行中。
我現在正在尋找解決此問題的方法。 有誰知道我如何防止丟失任何換行符和格式?
jQuery(document).ready(function($) { let input = $("#input"); $("button").click(function() { let template = $("#template").clone(); template.removeAttr("id"); template.html(input.html()); input.empty(); $("#wrapper").append(template); }); input.on("paste", function(e) { e.preventDefault(); let clipboardText = e.originalEvent.clipboardData.getData('text'); document.execCommand("insertHTML", false, clipboardText.replace(/\\t/g, " ")); }); });
[contenteditable=true] { border: 1px solid #aaaaaa; padding: 8px; border-radius: 12px; margin-bottom: 20px; white-space: pre-wrap; word-wrap: break-word; } [contenteditable=true]:empty:before { content: attr(placeholder); display: block; color: #aaaaaa; } #wrapper { border: 1px solid; height: 350px; overflow-y: scroll; overflow-x: hidden; margin-bottom: 10px; padding: 15px; } .entry { display: flex; background-color: gray; margin-bottom: 8px; padding: 4px; } #template { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="wrapper"> <span id="template" class="entry"></span> </div> <div id="input" placeholder="Write a message..." contenteditable="true" spellcheck="true"></div> <button>Add to list</button>
編輯
我已經用空格替換制表符來解決這里可能出現的問題。
你可以只添加white-space: pre;
到您的 css .entry
類,如下所示:
jQuery(document).ready(function($) { let input = $("#input"); $("button").click(function() { let template = $("#template").clone(); template.removeAttr("id"); template.html(input.html()); input.empty(); $("#wrapper").append(template); }); input.on("paste", function(e) { e.preventDefault(); let clipboardText = e.originalEvent.clipboardData.getData('text'); document.execCommand("insertHTML", false, clipboardText.replace(/\\t/g, " ")); }); });
[contenteditable=true] { border: 1px solid #aaaaaa; padding: 8px; border-radius: 12px; margin-bottom: 20px; white-space: pre-wrap; word-wrap: break-word; } [contenteditable=true]:empty:before { content: attr(placeholder); display: block; color: #aaaaaa; } #wrapper { border: 1px solid; height: 350px; overflow-y: scroll; overflow-x: hidden; margin-bottom: 10px; padding: 15px; } .entry { display: flex; white-space: pre; background-color: gray; margin-bottom: 8px; padding: 4px; } #template { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="wrapper"> <span id="template" class="entry"></span> </div> <div id="input" placeholder="Write a message..." contenteditable="true" spellcheck="true"></div> <button>Add to list</button>
使用white-space: pre
會告訴瀏覽器保留空白,文本只會在換行符處換行。 就像 HTML 中的<pre>
標簽一樣。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.