0

我需要在发生鼠标单击的文本之间插入图像，以便图像在文本之间插入自身而不与文本重叠，如在此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。

4

3 回答 3

1

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

要在文本节点中转换：

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]);

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

小提琴

于 2013-11-05T11:42:29.853 回答
0

您应该将文本分成两个内联部分。所以最好使用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);

请注意，此代码未经测试，仅显示机制。

于 2013-11-05T10:36:29.963 回答
0

将每个字母放入 aspan中，以便您可以在单击事件发生时检测鼠标在哪个字母上。

于 2013-11-05T10:32:41.213 回答