Contenteditable, :: перед выбором селектора и заданием положения курсора

Question

Использование области contenteditable div, у меня возникают проблемы (в настоящее время они протестированы только в Chrome), где курсор не может быть помещен перед первой буквой встроенного элемента стиля, когда CSS psuedo-selector ::before используется для добавления контента до «тега».

Использование этого метода используется для отображения/стиля пользовательских тегов в редакторе содержимого. Каждый тег индексируется, и этот индекс отображается слева от текста тега.

Standalone пример: http://codepen.io/TheFoot/pen/pydqQb

Заранее спасибо ..

EDIT: Как @Sonny отметил, если встроенный тег display: block проблема уходит, но это нарушает необходимость выделения/встроенного стиля разделы текста.

Answer 1

звучит как маленькие зеленые приводы ошибки вы сумасшедший да? Так или иначе. Я считаю, что вы вставляете TAG через javascript, поэтому у вас должна быть какая-то функция? Одним быстрым и грязным решением может быть объявление невидимого персонажа в этой функции перед открытием тега. Так, например,

<div class="tag" data-idx="6">&#x2063;maturity...</div> 

Или вы можете просто скопировать и вставить фактический характер (вы можете найти между этими стрелками здесь:.

--->⁣<---

Как это невидимое он имитирует именно то, что вам нужно

[EDIT :]

Если вы хотите reappend невидимого символа в случае, если пользователь удаляет его :)

.

http://codepen.io/anon/pen/wddoBN

Answer 2

Я думаю, что проблема здесь в том, что div, который доволен, - inline-block. contenteditable следует применять только к элементам уровня блока (исключая заголовки).

Ориентир несколько людей упоминали, что только блочных элементы должны быть сделаны contenteditable. Однако в Сети разработчиков Mozilla перечислены элементы заголовка h1 - h6 как элементов уровня блока, а создание элемента заголовка contenteditable - , багги в Firefox4 и может привести к сбою страницы в Chrome5.

Вы можете прочитать немного больше информации в этом ответе здесь: Which elements can be safely made contenteditable?