Добавление редактируемого текста в конец каждой строки contentEditable div

Question

У меня есть contenteditable div, но я хочу добавить несколько символов uneditable, unselectable text в конец каждой строки. я издевался до пример сильфон, который добавляет к сведению, были ли написаны правильно или нет все слова на линии:

Мой ДИВ является довольно простой contenteditable ДИВ:

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

Любая идея, как справиться с этим? Спасибо

Answer 1

Возможно, вы можете использовать float:right, чтобы позиционировать ваши хорошие/плохие метки справа и иметь поток содержимого вокруг них. Выравнивание будет не таким, как ваш пример, но его можно заставить работать.

Это может выглядеть примерно как this example at jsFiddle.

---

Update

Вот другой подход, который может работать, в зависимости от ваших потребностей: see jsFiddle here.

Во втором подходе, я разделить каждую строку в свой собственный <div>, и последовал за DIV каждой линии с <span contentEditable=false>(Good!). I've floated everything to the left, with a ясно: left` на дивы, так что каждый DIV приземляется на своей собственной линии. Это делает именно то, что вы хотите (по крайней мере, в браузерах webkit) - пока вы можете разделить свои строки так.

Answer 2

Вы должны быть супер наложение div (z-index больше, чем содержимое div) поверх contentEditable div с текстом «Хорошо!», «Ошибка» и т. Д. Таким образом, контент не будет доступен для редактирования через contentEditable div.

Вы должны иметь возможность рассчитать позицию div на основе количества символов на линии и номера строки.