Сосредоточьтесь на следующем абзаце в contenteditable div/Summernote

Question

Я использую Summernote, но реплицирую редактор Medium.

При вставке изображений я разрешаю им вставлять их в свой собственный тег абзаца. Никакой текст не может быть смешан в теги абзаца абзаца с изображением.

Я даю каждому абзацу изображение внутри класса 'has-image'. То, что я сейчас хочу сделать, не позволяет пользователю вводить текст внутри абзаца, если он имеет этот класс.

Если они попытаются щелкнуть внутри тега, он вместо этого сосредоточится на следующем абзаце.

Любая помощь, как это сделать? Я попытался запуска щелчок на следующем абзаце, но не повезло:

$(document).on('click', '.has-image', function() { 
    $(this).next('p').click(); 
}); 

Я могу установить текст следующего абзаца, так что я знаю его выбор хорошо, но не могу придумать, как на самом деле поместить курсор внутрь.

JSFiddle как пример: http://jsfiddle.net/vXnCM/5583/

Answer 1

U, возможно, придется работать с Range

$(document).on('click', '.has-image', function() { 

    r = document.createRange() 
    r.setStart($(this).next('p')[0],0); 
    window.getSelection().removeAllRanges(); 
    window.getSelection().addRange(r); 
}); 

Примечание: Это работает только для большинства современных браузеров, кроме IE.

Для возможности IE, Check https://code.google.com/archive/p/ierange/