关注 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

你可能需要使用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/