Блог

Я использую contenteditable div для создания расширенного редактора. Моя проблема сейчас в том, что я не могу расположить курсор <p> сразу после встраивания рамки Instagram. Что я пытался, так это создать новое <p> и сосредоточиться на нем после того, как я вставлю фрейм Instagram. Но это не работает.

Кто-нибудь знает решение этой проблемы?

Я использую JSFiddle в качестве примера (я помещаю один из встроенных кодов в блок CSS)

Хотя в спецификации contenteditable указано, что должно быть возможно поместить курсор внутри пустого тега p следующим образом:

 <div>aaa<p>|</p>bbb</div>
  

Webkit (Safari) и Blink (Chrome) в настоящее время не поддерживают его. Больше информации здесь.

К счастью, существует относительно простой обходной путь. Нам просто нужно получить некоторое содержимое внутри тега p, что позволит нам разместить здесь курсор. Одним из вариантов может быть добавление textnode, который содержит пробел нулевой ширины. Этот подход иногда полезен в ситуациях, связанных со встроенными тегами.

В вашем случае наиболее эффективным решением было бы просто добавить разрыв строки к абзацу. Реализации Contenteditable обычно обрабатывают разрывы строк внутри тегов блоков как «временные удерживающие узлы», и обработка по умолчанию одинакова во всех основных браузерах. Начальный результат должен выглядеть так:

 <div>aaa<p>|<br></p>bbb</div>
  

И как только вы начнете печатать, BR будет заменен (браузер делает это автоматически):

 <div>aaa<p>inner text|</p>bbb</div>
  

Даже когда вы удаляете внутренний текст, браузер должен автоматически повторно вставить разрыв строки, чтобы вы всегда могли вернуть курсор внутрь.

Я разветвил и обновил ваш jsfiddle с помощью примера здесь.