[英]Insert text in Javascript contenteditable div
我有一个问题,我需要在div中插入一个文本(字符串,可能有也可能没有html标签)。 它必须是一个div而不是textarea。
反正有吗? 首先,我需要获取光标位置,然后将文本插入该位置。
它类似于函数insertAdjacentText,但它只能在标记之前或之后插入,并且只能在IE中使用。
请参阅此URL:http: //yart.com.au/test/iframe.aspx 。 注意如何将光标定位在div中,我们需要在光标位置添加文本。
如果你需要做的只是在当前选择/插入点插入HTML,那是可行的。 脱离我的头脑(让你开始):
在IE中,使用document.selection.createRange()。pasteHTML(theNewHTML)。
在其他浏览器中,您应该能够使用document.execCommand(“InsertHTML”,...)。
我只在可编辑的iframe /文档中使用了这些技术,而不是div,但是如果div是聚焦的话,这些调用应该有效,我相信。
另一个答案警告说,如果你想要更细粒度的控制,就像在其他地方插入文字一样,它会变得很难看。
这是一个跨浏览器的示例,根据这个与iframe合作的答案进行了改编。
function pasteHtmlAtCaret(html, selectPastedContent, iframe) {
var sel, range;
var win = iframe ? iframe.contentWindow : window;
var doc = win.document;
if (win.getSelection) {
// IE9 and non-IE
sel = win.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
range = sel.getRangeAt(0);
range.deleteContents();
// Range.createContextualFragment() would be useful here but is
// only relatively recently standardized and is not supported in
// some browsers (IE9, for one)
var el = doc.createElement("div");
el.innerHTML = html;
var frag = doc.createDocumentFragment(), node, lastNode;
while ( (node = el.firstChild) ) {
lastNode = frag.appendChild(node);
}
var firstNode = frag.firstChild;
range.insertNode(frag);
// Preserve the selection
if (lastNode) {
range = range.cloneRange();
range.setStartAfter(lastNode);
if (selectPastedContent) {
range.setStartBefore(firstNode);
} else {
range.collapse(true);
}
sel.removeAllRanges();
sel.addRange(range);
}
}
} else if ( (sel = doc.selection) && sel.type != "Control") {
// IE < 9
var originalRange = sel.createRange();
originalRange.collapse(true);
sel.createRange().pasteHTML(html);
if (selectPastedContent) {
range = sel.createRange();
range.setEndPoint("StartToStart", originalRange);
range.select();
}
}
}
您还可以使用insertImage使用round-about方法。 使用execCommand“insertImage”插入伪图像(或小图像),然后使用Javascript替换innerHTML以添加文本。
例如:
iFrame.focus()
iFrame.document.execCommand("insertImage", "", "fakeimage.jpg")
iFrame.document.body.innerHTML=iFrame.document.body.innerHTML.replace("<img src=\"fakeimage.jpg\">", "MY CUSTOM <b>HTML</b> HERE!")
而iFrame等于预期iFrame的id。 或者,您可以使用document.getElementById(“IDofDIVlayer”)来使用DIV层.internalHTML
在调用execCommand之前一定要集中注意力,否则它可能无法在IE中工作。
此方法也适用于IE。 测试。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.