使用 execCommand 插入图像后,有什么方法可以获取图像元素?例如
e.execCommand('insertimage',0,'ronaldo.png')
使用 execCommand 插入图像后,有什么方法可以获取图像元素?例如
e.execCommand('insertimage',0,'ronaldo.png')
不要使用insertimage
,使用普通的 oldinsertHTML
并为您插入的元素提供一个 ID,以便您以后可以引用它。IE,
function insertHTML(img) {
var id = "rand" + Math.random();
var doc = document.getElementById("editor");
doc = doc.document ? doc.document : doc.contentWindow.document;
img = "<img src='" + img + "' id=" + id + ">";
if(document.all) {
var range = doc.selection.createRange();
range.pasteHTML(img);
range.collapse(false);
range.select();
} else {
doc.execCommand("insertHTML", false, img);
}
return doc.getElementById(id);
};
您可以使用浏览器在插入图像之后立即放置插入符号并从那里返回的事实。以下需要 DOM 范围和选择支持,这排除了 IE <= 8,但如果这很重要,那么您可以使用我自己的Rangy 之类的库来填补这一空白。
演示:http: //jsfiddle.net/xJkuj/
代码:
function previousNode(node) {
var previous = node.previousSibling;
if (previous) {
node = previous;
while (node.hasChildNodes()) {
node = node.lastChild;
}
return node;
}
var parent = node.parentNode;
if (parent && parent.nodeType.hasChildNodes()) {
return parent;
}
return null;
}
document.execCommand("InsertImage", false, "http://placekitten.com/200/300");
// Get the current selection
var sel = window.getSelection();
if (sel.rangeCount > 0) {
var range = sel.getRangeAt(0);
var node = range.startContainer;
if (node.hasChildNodes() && range.startOffset > 0) {
node = node.childNodes[range.startOffset - 1];
}
// Walk backwards through the DOM until we find an image
while (node) {
if (node.nodeType == 1 && node.tagName.toLowerCase() == "img") {
alert("Found inserted image with src " + node.src);
break;
}
node = previousNode(node);
}
}
这是我的方式:
e.execCommand('insertimage', 0, URI) // image's URI
image=$('img[src="'+URI+'"]').not('.handled').addClass('.handled');
//.not('.handled').addClass('.handled') is needed if there are many images with the same URI