Каретка в ContentEditable Div игнорирует границы диапазона - PullRequest
Новая
       39

Каретка в ContentEditable Div игнорирует границы диапазона

0 голосов
/ 06 мая 2020

Не связано, но определенно вдохновлено этим (я украл и слегка изменил JSFiddle): Почему мой контентный курсор переходит в конец в Chrome?

Fiddle: http://jsfiddle.net/mcgettrm/ns4q3ejz/1/

Я использую div с установленным атрибутом contenteditable. У меня несколько проблем. Два, которые имеют отношение к этому вопросу:

  1. Когда я вставляю диапазон (используя js / jquery), каретка (указывающая местоположение курсора в элементе contentEditable) игнорирует набор отступов на элементах пролета. Я бы хотел, чтобы каретка уважала границы диапазона.
  2. При нажатии Backspace текст удаляется с одним обратным пространством, а затем с промежутком со вторым. Я бы сделал один пробел, чтобы удалить диапазон и его содержимое.

Из того, что я нашел через Google, это кажется разумным поведением, потому что элемент contenteditable заботится о текстовых узлах (а span не является). Однако это не очень помогает мне в моем проекте (мне нужно показать несколько китайских иероглифов как отдельные единицы с некоторым стилем).

Есть ли способ разрешить 1 и 2?

HTML: 

<div id="main" class="main"contenteditable="true">
    <span contenteditable="false">&nbsp;item&nbsp;</span>
    <span contenteditable="false">&nbsp;item&nbsp;</span>
    <span contenteditable="false">&nbsp;item&nbsp;</span>
    <span contenteditable="false">&nbsp;item&nbsp;</span>
</div>

CSS: 

div.main {
    width: 400px;
    height: 250px;
    border: solid 1px black;
}

div.main span {
    width:40px;
    background-color: red;
    border-radius: 5px;
    color: white;
    cursor: pointer;
    padding: 0.5em 1em 0.5em 1em;
}

Примечание: Я приму ответ, который использует текстовое поле в качестве обходного пути, при условии, что такой ответ объясняет, как включить элементы html со стилем в текстовое поле, а также позволяет избежать двух проблем, описанных выше.

Примечание 2: я стараюсь избегать написания целого китайского IME с нуля, но чем больше я работаю с contenteditable элементами, тем больше я думаю, что будет легче не использовать какие-либо встроенные html. Имея это в виду, я буду поддерживать любые ответы, которые предоставляют интересный контекст или пищу для размышлений (даже если я в конечном итоге не приму ответ).

...