javascript - 在光标位置的内容可编辑 div 中附加一个图像标签

Question

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

我厌倦了这样做，但这段代码只在 div 的末尾插入图像，这对我来说不是这种情况

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

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

Answer 1

试试这个代码，用任何图片 url 更改“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);
   }