javascript - 在contenteditable div/Summernote中专注于下一段

我正在使用Summernote，但复制了Medium编辑器。

插入图像时，我只允许将它们插入自己的段落标签中。文字不能在侧面段落标签中与图像混合。

我在“具有图像”类中给每个段落添加图像。我现在想做的是，如果有该类，则不允许用户在段落内输入任何文本。

如果他们尝试在标签内单击，它将改为关注下一段。

有什么帮助吗？我尝试触发下一段的点击，但没有运气：

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

我可以设置下一段的文本，因此我知道它的选择很好，但是无法想到一种将光标实际放置在其中的方法。

以JSFiddle为例：http://jsfiddle.net/vXnCM/5583/

最佳答案

您可能需要使用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功能，请检查https://code.google.com/archive/p/ierange/