ContentEditable - 按Enter鍵生成P標籤

目前我正在使用contenteditable編輯器。我有以下幾點：ContentEditable - 按Enter鍵生成P標籤

<div contenteditable="true"> 
<h2>Header</h2> 
<p>Content lorem ipsum</p> 
</div>

當我使用的execCommand創建一個新的，然後擊中後進入，一個< DIV>創建。但是，我想要創建一個< p>。我可以通過使用keyup事件並返回false（使用jQuery）來阻止輸入完全行爲，但是如何強制<>> < div>？（請注意，它已經放置一個< P>正確的時候我已經內一個< p>標籤，但它並沒有當< DIV>內工作）

來源

2011-02-23 Andrew M

我也遇到過這個問題 - 這不是一個很容易解決的問題。你需要通過execcommand顯式的撤銷/重做支持嗎？我擁有的解決方案不是撤消/重做。 – ansiart 2011-03-07 18:20:57

不，不是。 Control-Z仍然工作還是隻是execCommand實現被破壞？ – 2011-03-07 22:46:27

嗨@AndrewM，這個問題有點老，但我想知道你是否找到了解決方案，因爲我處於相同的情況。如果你在這裏發佈它會很好，所以對於同樣情況下的每個人都會有用。 – medBo 2016-02-29 15:49:31

對於WYMeditor的即將到來的版本中，我們已經通過完全覆蓋不同的本機實現（包括輸入密鑰處理程序）來解決此問題。

要強制使用段（或者重新格式化爲段落），可以使用jQuery執行此類操作（其中元素是DOM節點或一個jQuery對象）：

function formatElement (element, tagName) { 
    element = $(element); 
    newElement = $('<'+tagName+'/>').append(element.clone().get(0).childNodes); 
    element.replaceWith(newElement); 
}

這可以通過使用查看當前選擇並調用上述函數的keyup來完成。

在WYMeditor中，我們也確保我們實際上修改了一個塊元素，以便我們維護一個有效的文檔結構。如果不是，我們沿着DOM樹找到一個父塊。

就像DanielH的解決方案一樣，這種方法的缺點是您需要實現自己的撤消/重做堆棧，但據我所知，這是唯一可靠的跨瀏覽器方式。

來源

2011-03-20 13:17:47

您可以提供完整的代碼或向我們顯示代碼完全位於WYMeditor的位置嗎？我非常需要它。謝謝 – medBo 2016-02-29 15:52:00

ContentEditable - 按Enter鍵生成P標籤

回答

相關問題