Konzentriere dich auf den nächsten Absatz in contenteditable div/Summernote

Question

Ich benutze Summernote aber Replikation der Medium-Editor.

Wenn ich Bilder einfüge, erlaube ich ihnen nur, dass sie in ihr eigenes Absatz-Tag eingefügt werden. Kein Text kann in seitlichen Absatz-Tags mit einem Bild gemischt werden.

Ich gebe jeden Absatz mit einem Bild innerhalb einer Klasse von 'hat-Bild'. Was ich jetzt tun möchte, erlaubt es dem Benutzer nicht, irgendeinen Text innerhalb des Absatzes einzugeben, wenn er diese Klasse hat.

Wenn sie versuchen, innerhalb des Tags zu klicken, wird stattdessen auf den nächsten Absatz fokussiert.

Irgendwelche Hilfe, wie man das macht? Ich habe versucht, ein Klick auf den nächsten Absatz auslösenden aber kein Glück:

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

ich den Text des nächsten Absatzes kann damit ich weiß, seine feine Auswahl kann aber nicht einen Weg finden, um tatsächlich in den Cursor zu platzieren.

JSFiddle als Beispiel: http://jsfiddle.net/vXnCM/5583/

Answer 1

U müssen mit Range

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

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

HINWEIS arbeiten: Es funktioniert nur für die meisten modernen Browsern außer IE.

Für IE Fähigkeit, Check https://code.google.com/archive/p/ierange/