CODEWITHSUNDEEP
javascripttexthtmltext-editorcontenteditable
crzter
crzter

Reputation: 33

Adding Un-editable text to the end of each line of a contentEditable div

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:

enter image description here

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

Upvotes: 1

Views: 388

Answers (2)

Lee
Lee

Reputation: 13542

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 aclear: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.

Upvotes: 1

Vivek Viswanathan
Vivek Viswanathan

Reputation: 1963

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.

Upvotes: 0

Related Questions