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

Question

我有一个contentEditablediv和一个emojies图像列表.我要做的是当用户点击图像时,应该在光标位置插入图像标签.

我厌倦了这样做,但这段代码只在div的末尾插入图像,这对我来说并非如此

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

我该如何解决我的问题？jsfiddle:http://jsfiddle.net/7VNTn/

Answer 1

尝试此代码,使用任何图像网址更改"IMAGE URL"

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