在可連接的元素內創建一個不可編輯的塊

我想將一個不可編輯的元素放入TinyMCE中，該元素本身可以被選中，剪切，粘貼和拖動，就像<img>但其內容不可編輯。在可連接的元素內創建一個不可編輯的塊

我試過< div contenteditable =「false」>與Chrome。它不可編輯。但它不能被選擇或拖動。

有沒有什麼辦法可以在contenteditable區域製作一個複合元素（如<div>）原子，就像一個字符或圖像一樣。

2013-10-30 Sherwood Wang

一個技巧是使用input[type="button"]，因爲即使在contenteditable區域這些也是不可編輯的。

<textarea> 
    <p>This is editible content.</p> 
    <input value="This is uneditable content." type="button" draggable="true" style="border: 0; background: transparent; padding: 0; margin: 0; font-family: inherit" /> 
</textarea> 

<script> 
    tinyMCE.init({ mode: 'textareas' }); 
</script>

TinyMCE Fiddle

因爲投入不能有子元素它並不完美。

如果需要顯示動態HTML，可以渲染（使用html2canvas或等同物）的HTML到畫布元件，然後將input[type="button"]的背景圖像設定爲從畫布上調用getDataURL獲得的字符串。（您還需要計算呈現的HTML的高度和寬度，並設置input[type="button"]的高度和寬度以匹配。）

來源

2013-11-15 07:16:41 Adam

我發現Wikipedia的新WYSIWYG編輯器已經實現了這個功能。頁面按鈕處的相關主題的參考數字和表格是可拖動的。它們都是複合元素。

當鼠標懸停在一個整體設計爲可拖動的元素上時，它將一個不可編輯的不可編輯的<div>作爲一個保護器。點擊保護器後，將其替換爲透明的<img>。所以用戶實際上在拖動的是<img>。在用戶放棄<img>後，它將最初在<img>下的元素移動到新位置。

來源

2013-11-21 05:18:20

在可連接的元素內創建一個不可編輯的塊

回答

相關問題