如何在插入节点后插入 space
How to insert a space after insert node
我想在插入a
节点之后插入一个space,问题是我插入的space是在a
节点里面,而不是在[=之后12=]节点.
我有其他的解决办法,就是在span
节点上插入一个span
,然后放一个space,不过我觉得应该有更好的解决办法。
var $preload = $('<a href="url">test.txt</a>');
editor.insertNodeAtCaret($preload.get(0));
insertTextAtCursor('\u00A0', true);
function insertNodeAtCaret(node) {
if (typeof window.getSelection != "undefined") {
var sel = window.getSelection();
if (sel.rangeCount) {
var range = sel.getRangeAt(0);
range.collapse(false);
range.insertNode(node);
range = range.cloneRange();
range.selectNodeContents(node);
range.collapse(false);
sel.removeAllRanges();
sel.addRange(range);
}
} else if (typeof document.selection != "undefined" && document.selection.type != "Control") {
var html = (node.nodeType == 1) ? node.outerHTML : node.data;
var id = "marker_" + ("" + Math.random()).slice(2);
html += '<span id="' + id + '"></span>';
var textRange = document.selection.createRange();
textRange.collapse(false);
textRange.pasteHTML(html);
var markerSpan = document.getElementById(id);
textRange.moveToElementText(markerSpan);
textRange.select();
markerSpan.parentNode.removeChild(markerSpan);
}
};
function insertTextAtCursor(text, moveTheCursor) {
var sel, range, html;
if (window.getSelection) {
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
range = sel.getRangeAt(0);
range.deleteContents();
var textNode = document.createTextNode(text);
range.insertNode(textNode);
if(moveTheCursor){
range.setStartAfter(textNode);
sel.removeAllRanges();
sel.addRange(range);
}
}
} else if (document.selection && document.selection.createRange) {
document.selection.createRange().text = text;
}
};
我建议调整insertNodeAtCaret
插入多个节点:
function insertNodesAtCaret() {
var i, len, node, sel, range, html, id;
var escapeHtml = function(text) {
var div = document.createElement("div");
div.appendChild( document.createTextNode(text) );
return div.innerHTML;
};
if (typeof window.getSelection != "undefined") {
sel = window.getSelection();
if (sel.rangeCount) {
range = sel.getRangeAt(0);
range.collapse(false);
for (i = 0, len = arguments.length, node; i < len; ++i) {
node = arguments[i];
if (typeof node == "string") {
node = document.createTextNode(node);
}
range.insertNode(node);
range.setStartAfter(node);
range.collapse(true);
}
range = range.cloneRange();
range.selectNodeContents(node);
range.collapse(false);
sel.removeAllRanges();
sel.addRange(range);
}
} else if (typeof document.selection != "undefined" && document.selection.type != "Control") {
html = "";
for (i = 0, len = arguments.length, node; i < len; ++i) {
node = arguments[i];
if (typeof node == "string") {
html += escapeHtml(node);
} else if (node.nodeType == 1) {
html += node.outerHTML;
} else if (node.nodeType == 3) {
html += escapeHtml(node.data);
}
}
id = "marker_" + ("" + Math.random()).slice(2);
html += '<span id="' + id + '"></span>';
var textRange = document.selection.createRange();
textRange.collapse(false);
textRange.pasteHTML(html);
var markerSpan = document.getElementById(id);
textRange.moveToElementText(markerSpan);
textRange.select();
markerSpan.parentNode.removeChild(markerSpan);
}
}
function insertElementAndSpace() {
var aEl = document.createElement("a");
aEl.href = "http://whosebug.com?";
aEl.appendChild( document.createTextNode("LINK TEXT") );
insertNodesAtCaret(aEl, "\u00a0");
}
<input type="button" onmousedown="insertElementAndSpace(); return false;" value="Insert">
<div contenteditable="true">
This is some editable text. Put the caret somewhere in here and press the button.
</div>
我想在插入a
节点之后插入一个space,问题是我插入的space是在a
节点里面,而不是在[=之后12=]节点.
我有其他的解决办法,就是在span
节点上插入一个span
,然后放一个space,不过我觉得应该有更好的解决办法。
var $preload = $('<a href="url">test.txt</a>');
editor.insertNodeAtCaret($preload.get(0));
insertTextAtCursor('\u00A0', true);
function insertNodeAtCaret(node) {
if (typeof window.getSelection != "undefined") {
var sel = window.getSelection();
if (sel.rangeCount) {
var range = sel.getRangeAt(0);
range.collapse(false);
range.insertNode(node);
range = range.cloneRange();
range.selectNodeContents(node);
range.collapse(false);
sel.removeAllRanges();
sel.addRange(range);
}
} else if (typeof document.selection != "undefined" && document.selection.type != "Control") {
var html = (node.nodeType == 1) ? node.outerHTML : node.data;
var id = "marker_" + ("" + Math.random()).slice(2);
html += '<span id="' + id + '"></span>';
var textRange = document.selection.createRange();
textRange.collapse(false);
textRange.pasteHTML(html);
var markerSpan = document.getElementById(id);
textRange.moveToElementText(markerSpan);
textRange.select();
markerSpan.parentNode.removeChild(markerSpan);
}
};
function insertTextAtCursor(text, moveTheCursor) {
var sel, range, html;
if (window.getSelection) {
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
range = sel.getRangeAt(0);
range.deleteContents();
var textNode = document.createTextNode(text);
range.insertNode(textNode);
if(moveTheCursor){
range.setStartAfter(textNode);
sel.removeAllRanges();
sel.addRange(range);
}
}
} else if (document.selection && document.selection.createRange) {
document.selection.createRange().text = text;
}
};
我建议调整insertNodeAtCaret
插入多个节点:
function insertNodesAtCaret() {
var i, len, node, sel, range, html, id;
var escapeHtml = function(text) {
var div = document.createElement("div");
div.appendChild( document.createTextNode(text) );
return div.innerHTML;
};
if (typeof window.getSelection != "undefined") {
sel = window.getSelection();
if (sel.rangeCount) {
range = sel.getRangeAt(0);
range.collapse(false);
for (i = 0, len = arguments.length, node; i < len; ++i) {
node = arguments[i];
if (typeof node == "string") {
node = document.createTextNode(node);
}
range.insertNode(node);
range.setStartAfter(node);
range.collapse(true);
}
range = range.cloneRange();
range.selectNodeContents(node);
range.collapse(false);
sel.removeAllRanges();
sel.addRange(range);
}
} else if (typeof document.selection != "undefined" && document.selection.type != "Control") {
html = "";
for (i = 0, len = arguments.length, node; i < len; ++i) {
node = arguments[i];
if (typeof node == "string") {
html += escapeHtml(node);
} else if (node.nodeType == 1) {
html += node.outerHTML;
} else if (node.nodeType == 3) {
html += escapeHtml(node.data);
}
}
id = "marker_" + ("" + Math.random()).slice(2);
html += '<span id="' + id + '"></span>';
var textRange = document.selection.createRange();
textRange.collapse(false);
textRange.pasteHTML(html);
var markerSpan = document.getElementById(id);
textRange.moveToElementText(markerSpan);
textRange.select();
markerSpan.parentNode.removeChild(markerSpan);
}
}
function insertElementAndSpace() {
var aEl = document.createElement("a");
aEl.href = "http://whosebug.com?";
aEl.appendChild( document.createTextNode("LINK TEXT") );
insertNodesAtCaret(aEl, "\u00a0");
}
<input type="button" onmousedown="insertElementAndSpace(); return false;" value="Insert">
<div contenteditable="true">
This is some editable text. Put the caret somewhere in here and press the button.
</div>