Question

我需要在发生鼠标单击的文本之间插入图像，以便图像在文本之间插入并且不会与文本重叠，如jsfilddle中所示。

$('#box').click(function(ev){
    $('img.mover').clone()
    .removeClass('mover')
    .appendTo('body')

    .css('left', ev.pageX-20)
    .css('top', ev.pageY-20);
 });

基本改变之后，如果我在B和N之间点击，它应该看起来像mbmnB / img / Nmnbbmn。

Answer 1

您可以将文本转换为节点（span），然后检测节点上的鼠标单击事件。然后从该节点拆分文本并在两者之间插入图像：

要在文本节点中转换：

function wrapCharacters(element) {
            $(element).contents().each(function() {
                if(this.nodeType === 1) {
                    wrapCharacters(this);
                }
                else if(this.nodeType === 3) {
                    $(this).replaceWith($.map(this.nodeValue.split(''), function(c) {
                       return '<span>' + c + '</span>';
                    }).join(''));
                }
            });
        }    


        wrapCharacters($('#box')[0]);

检查这个小提琴希望它有所帮助：

Fiddle

Answer 2

将每个字母放入span，以便您可以检测点击事件发生时鼠标是哪一个。

Answer 3

您应该将文本拆分为两个内联部分。最好是使用 span 元素，因为它们是内联的，不会引入换行符。

稍后你应该得到插入位置。您可以使用此答案来获取它：get caret position。假设你在var pos;

中有自己的位置

然后你可以拆分：

function span(text) {
  return '<span>'+text+'</span>';
}

var content = $('#box').html();
var left  = span(content.substring(0, pos));
var right = span(content.substring(pos, content.length));
var img   = '<img src="your_image.ext"></img>';
$('#box').html(left + img + right);

请注意，此代码未经过测试，只是显示了这些机制。

如何使用javascript在文本之间插入图像节点？

3 个答案: