Question

我有contentEditable div和emojies张图片列表。我要做的是当用户点击图像时，应该在光标位置插入图像标签。

我厌倦了这样做，但这段代码只在div的末尾插入图片，而不是我的情况

$("#editable").append($(this).id); // $(this) is the image tag

如何解决问题？ jsfiddle：http://jsfiddle.net/7VNTn/

Answer 1

尝试此代码，使用任何图片网址

更改“图片网址”

var image = '<p><img src="IMAGE URL" ></p>';

var sel, range, node;
if (window.getSelection) {
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
range = window.getSelection().getRangeAt(0);
node = range.createContextualFragment(image);
            range.insertNode(node);
          }
   } else if (document.selection && document.selection.createRange) {
               document.selection.createRange().pasteHTML(image);
   }

Answer 2

使用以下代码。

        $("#editable").html($(this).id);

append方法在你的可编辑标签之后添加元素。所以html方法会将图像放在你的行内。这个

Answer 3

试试此代码

$(document).ready(function(){

    $("#image1").click(function(){
    $("#editable").prepend($(this));
    });


});

我使用prepend而不是append，因为你希望图像出现在文本之前。

在光标位置的内容可编辑div中添加图像标记

3 个答案: