将不可编辑的文本添加到contentEditable div的每一行的末尾

Question

I have a contenteditable div, but I want to add a few characters of uneditable, unselectable text to the end of each line. I have mocked up an example bellow, which adds a note of whether all the words on the line were spelled correctly or not:

My div is a pretty simple contenteditable div:

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

Any idea how to tackle this? Thanks

Answer 1

Maybe you can use float:right to position your good/bad labels on the right, and have the content flow around them. The alignment wouldn't be exactly like your example, but it might be made to work.

It might look something like this example at jsFiddle .

---

Update

Here's a different approach that might work, depending on your needs: see jsFiddle here .

In this second approach, I've split each line into its own <div> , and followed each line's div with a <span contentEditable=false>(Good!) . I've floated everything to the left, with a . I've floated everything to the left, with a clear:left` on the divs, so that each div lands on its own line. This does exactly what you want (at least, in webkit browsers) -- as long as you can split your lines up like that.

Answer 2

you should be super imposing a div (z-index greater than content div) on top of the contentEditable div with text "Good!","Error" etc.. This way, the content would not be editable through the contentEditable div.

You should be able to calculate the position of the div based on the number of characters on a line and the line number.