Wstaw html w contenteditable div
Mam div z ustawionym contenteditable i przechwytywam naciśnięcie klawiszy za pomocą jquery, aby wywołać preventDefault () po naciśnięciu klawisza enter. Podobnie jak to pytanie {[2] } które wstawia tekst przy kursorze, chciałbym bezpośrednio wstawić html, dla zwięzłości powiemy, że jest to znacznik br. Korzystanie z odpowiedzi na powyższe pytanie faktycznie działa w IE, ponieważ używa zakresu.metoda pasteHTML, ale w innych przeglądarkach znacznik br pojawiałby się jako zwykły tekst, a nie html. Jak mogę modyfikować odpowiedź na wstawianie html a nie tekstu ?
4 answers
W większości przeglądarek można użyć metody insertNode()
zakresu uzyskanego z zaznaczenia. W IE pasteHTML(), Jak już wspomniałeś. Poniżej znajduje się funkcja, aby to zrobić we wszystkich głównych przeglądarkach. Jeśli zawartość jest już zaznaczona, jest zastępowana, więc jest to efektywna operacja wklejania. Dodałem również kod, aby umieścić karetkę po końcu wstawionej zawartości.
JsFiddle: http://jsfiddle.net/jwvha/1/
Kod:
function pasteHtmlAtCaret(html) {
var sel, range;
if (window.getSelection) {
// IE9 and non-IE
sel = window.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 = document.createElement("div");
el.innerHTML = html;
var frag = document.createDocumentFragment(), node, lastNode;
while ( (node = el.firstChild) ) {
lastNode = frag.appendChild(node);
}
range.insertNode(frag);
// Preserve the selection
if (lastNode) {
range = range.cloneRange();
range.setStartAfter(lastNode);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
}
}
} else if (document.selection && document.selection.type != "Control") {
// IE < 9
document.selection.createRange().pasteHTML(html);
}
}
AKTUALIZACJA 21 SIERPNIA 2013
Zgodnie z wymaganiami w komentarzach, oto zaktualizowany przykład z dodatkowym parametrem, który określa, czy należy wybrać wstawioną zawartość.
Demo: http://jsfiddle.net/timdown/jwvha/527/
Kod:
function pasteHtmlAtCaret(html, selectPastedContent) {
var sel, range;
if (window.getSelection) {
// IE9 and non-IE
sel = window.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 = document.createElement("div");
el.innerHTML = html;
var frag = document.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 = document.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();
}
}
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-10-28 10:41:44
var doc = document.getElementById("your_iframe").contentWindow.document;
// IE <= 10
if (document.selection){
var range = doc.selection.createRange();
range.pasteHTML("<b>Some bold text</b>");
// IE 11 && Firefox, Opera .....
}else if(document.getSelection){
var range = doc.getSelection().getRangeAt(0);
var nnode = doc.createElement("b");
range.surroundContents(nnode);
nnode.innerHTML = "Some bold text";
};
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-05-25 15:17:03
Czytając szybko i mając nadzieję, że nie będzie off topic, oto ścieżka dla tych, którzy, podobnie jak ja, muszą wstawić kod na poziomie kursora div:
document.getElementById('editeur').contentWindow.document.execCommand('insertHTML', false, '<br />');
'editeur' is iframe:
<iframe id="editeur" src="contenu_editeur_wysiwyg.php">
</iframe>
Contenu_editeur_wysiwyg.php:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div>
</div>
</body>
</html>
Nie zapomnij:
document.getElementById('editeur').contentDocument.designMode = "on";
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-08-18 19:52:17
var r = getSelection().getRangeAt(0);
r.insertNode(r.createContextualFragment('<b>Hello</b>'));
//select this range
getSelection().removeAllRanges();
getSelection().addRange(r);
//collapse to end/start
getSelection().collapseToEnd()
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-04-15 22:11:48