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 기능의 경우 확인 : https://code.google.com/archive/p/ierange/