Если вы посмотрите на инспектор dom вашего браузера, вы увидите, что при удалении содержимого и добавлении изображения у вас остается один элемент, обертывающий изображение и заголовок, и, следовательно, больше нет места для установки фокуса, чтобы продолжить печатать. Функция быстрой вставки также не отображается, поскольку нет границ блока для ее запуска.
Froala Editor предлагает API достойных событий, и есть обходной путь через событие image.inserted , которое срабатывает при добавлении элемента изображения в редактор. Код ниже прослушивает это событие и вставляет новый элемент para сразу после обтекания Froala вокруг изображения. При вводе текст подписи является частью обертки Froala вокруг изображения, поэтому этот новый пункт готов принять фокус и позволяет вам вводить текст.
$('#yourselector').on('froalaEditor.image.inserted', function (e, editor, $img, response) {
$img.after("<p>Type something here</p>"); // insert a new para or div here
});
Обратите внимание, что недостатком простого обходного пути является то, что вы вводите дополнительный контент, но, надеюсь, выгода перевесит это для вашего варианта использования.
Это простое решение JS, которое, надеюсь, вы сможете адаптировать к вашей среде.
Ранее мне не удавалось добавить фрагменты JS для Froala в SO, поэтому предоставьте этот рабочий пример codepen .
