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

Question

У меня есть спорный div, но я хочу добавить несколько символов не редактируемого, невыбираемого текста в конце каждой строки. Я смоделировал пример ниже, который добавляет примечание того, были ли все слова в строке написаны правильно или нет:

Мой div - довольно простой contenteditable div:

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

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

Answer 1

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

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

---

Обновление

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

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

Answer 2

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

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