Question

在contenteditable div中，我有一些文字和图像 He✈llo。

但是在js文件中，contenteditable div就像He<img src="plane.gif">llo 当我把光标放在飞机后面并使用window.getSelection.getRangeAt（0）然后它将光标/插入位置显示为3.我需要的是它将插入位置显示为24即将图像作为img标记读取并显示位置在img标签的末尾插入符号。

有没有办法实现这个目标？

我做了这个http://plnkr.co/edit/Qlhzxsqko3coXe9iWl0r?p=preview它没有正常工作，但它会让你知道我想说的是什么

Answer 1

如果我完全理解你想做什么，那么这应该可以解决你的问题（只需在文本中的不同字符之间点击）：

$('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>

在一个令人满意的div

1 个答案: