javascript 使用execCommand插入后如何获取图像元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12507328/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get the image element after insert using execCommand?
提问by Najib Razak
Is there any way to get the image element after we insert the image using execCommand? for example
使用execCommand插入图像后，有没有办法获取图像元素？例如
e.execCommand('insertimage',0,'ronaldo.png')
回答by Kernel James
Don't use insertimage, use plain old insertHTMLand give the element you are inserting an ID so that you can reference it later.
i.e.,
不要使用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);
};
回答by Tim Down
You can use the fact that browsers place the caret immediately after the inserted image and work back from there. The following requires DOM Range and selection support, which rules out IE <= 8, but if that's important then you can use a library such as my own Rangyto fill that gap.
您可以使用浏览器在插入图像后立即放置插入符号并从那里返回的事实。以下需要 DOM 范围和选择支持，这排除了 IE <= 8，但如果这很重要，那么您可以使用诸如我自己的Rangy 之类的库来填补这一空白。
Demo: http://jsfiddle.net/xJkuj/
演示：http: //jsfiddle.net/xJkuj/
Code:
代码：
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);
}
}
回答by user3076450
This is my way:
这是我的方式：
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
