將不可編輯的文本添加到contentEditable div的每一行的末尾

我有一個可以理解的div，但我想在每行的末尾添加一些不可編輯的，不可選擇的文本字符。我曾經嘲笑了一個例子波紋管，增加了一個音符的全部上線的話是否正確與否拼寫：將不可編輯的文本添加到contentEditable div的每一行的末尾

enter image description here

我的DIV是一個非常簡單的CONTENTEDITABLE格：

<div contentEditable="true" designMode="on" id="edit" style="border: 1px dashed black; width: 700px; height: 400px"></div>

任何想法如何解決這個問題？謝謝

來源

2011-10-19 crzter

也許你可以使用float:right來定位你的好/壞標籤在右邊，並讓內容在他們周圍流動。對齊不會像你的例子，但它可能會工作。

它可能看起來像this example at jsFiddle。

更新

這裏有一個不同的方法，可能工作，根據您的需要：see jsFiddle here。

在這第二種方法，我已經分割每行到自己<div>，並遵循各行的DIV與<span contentEditable=false>(Good!). I've floated everything to the left, with a明確：對的div left`，使自身線上的每個格的土地。這正是你想要的（至少在webkit瀏覽器中） - 只要你可以像這樣分割你的線。

來源

2011-10-19 03:28:27 Lee

太棒了，這正是我嘗試創建的行爲！ :) – crzter

問：如何在每次用戶添加新行或點擊輸入時創建新的div和（良好！）範圍？ – crzter

你必須稍微調整它才能使它更好，但[這是一個更新的jsFiddle]（http://jsfiddle.net/fZabU/3/），它顯示了基本的想法。 – Lee

你應該在文本「Good！」，「Error」等內容的contentEditable div頂部強加一個div（z-index大於content div）。這樣，內容將不可編輯contentEditable div。

您應該能夠根據一行上的字符數和行號來計算div的位置。

來源

2011-10-19 03:25:46

將不可編輯的文本添加到contentEditable div的每一行的末尾

回答

相關問題