Получить Caret positon в contenteditable div

В contenteditable div, у меня есть текст и изображение, подобное He✈llo.Получить Caret positon в contenteditable div

Но в JS файл contenteditable div, как He<img src="plane.gif">llo Когда я поставил курсор после того, как самолет и использовать window.getSelection.getRangeAt (0), то это показывает положение курсора/каре, как 3. То, что мне нужно, что она показывает каретку положение, равное 24, т.е. считывание изображения в качестве метки img и отображение положения каретки в конце тега img.

Есть ли способ достичь этого?

Я сделал это http://plnkr.co/edit/Qlhzxsqko3coXe9iWl0r?p=preview Его не работает правильно, но это даст вам представление о том, что я пытаюсь сказать

источник

2016-03-11 iamsaksham

Можете ли вы предоставить JSFiddle? –

Если я правильно понял, что вы хотите сделать, то это должно решить проблему (нажмите между различными символов из текста):

$('p').bind('click', function(event) { 
 
    finalCount = 0; 
 
    var selection = window.getSelection().getRangeAt(0); 
 
    var count = 0; 
 
    $($(this).contents()).each(function(index, val) { 
 

 
    if ($(val).html() == null) { 
 
     count += selection.startOffset; 
 
    } else { 
 
     count += $(val).get(0).outerHTML.length; 
 
    } 
 
    if ($(val).text() == selection.startContainer.nodeValue) { 
 
     console.log('found!'); 
 
     finalCount = count; 
 
    } 
 
    }); 
 

 
    alert(finalCount); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 
    <p class="text" style="margin-left:5px">He 
 
    <img src="http://www.micronas.com/sites/all/themes/micronas/images/icons/image-x-generic.png">llo</p> 
 
</body>

источник

2016-03-11 11:12:34 mihutz

Да, спасибо большое. Он работает хорошо, но я кодировал угловатым, так что, может быть, я подожду, если кто-то поможет мне использовать угловые вещи. Еще я приму свой ответ. – iamsaksham

Получить Caret positon в contenteditable div

ответ

Смежные вопросы