web-dev-qa-db-ja.com

contentEditabledivに挿入された要素の直後にキャレット位置を設定します

ContentEditable divに要素を挿入していますが、ブラウザーは挿入された要素の前にカーソルの位置を設定します。挿入された要素の直後にカーソルを設定して、ユーザーがカーソル位置を再調整せずに入力を続けることは可能ですか？

javascriptcontenteditable
27
Elie

次の関数がそれを行います。 DOMレベル2範囲オブジェクトは、ほとんどのブラウザーでこれを簡単にします。 IEでは、挿入するノードの後に​​マーカー要素を挿入し、選択範囲をそのノードに移動してから削除する必要があります。

実例： http://jsfiddle.net/timdown/4N4ZD/

コード：

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);
    }
}

または、my Rangy library を使用することもできます。同等のコードがあります

function insertNodeAtCaret(node) {
    var sel = rangy.getSelection();
    if (sel.rangeCount) {
        var range = sel.getRangeAt(0);
        range.collapse(false);
        range.insertNode(node);
        range.collapseAfter(node);
        sel.setSingleRange(range);
    }
}
29
Tim Down

これが、VueJSコンテキストでRangyを使用して私のために働いたものです。

// When the user clicks the button to open the popup to enter
// the URL, run this function to save the location of the user's
// selection and the selected text.
newSaveSel: function() {
  if (this.savedSel) {
    rangy.removeMarkers(this.savedSel);
  }
  // Save the location of the selected text
  this.savedSel = rangy.saveSelection();
  // Save the selected text
  this.savedSelText = rangy.getSelection().toString();
  this.showLinkPopup = true;
  console.log('newSavedSel', this.savedSel);
},
surroundRange: function() {
  // Restore the user's selected text. This is necessary since
  // the selection is lost when the user stars entering text.
  if (this.savedSel) {
    rangy.restoreSelection(this.savedSel, true);
    this.savedSel = null;
  }
  // Surround the selected text with the anchor element
  var sel = rangy.getSelection();

  var range = sel.rangeCount ? sel.getRangeAt(0) : null;
  if (range) {
    // Create the new anchor element
    var el = document.createElement("a");
    el.style.backgroundColor = "pink";
    el.href = this.anchorHref;
    el.innerHTML = this.savedSelText;
    if (this.checked) {
      el.target = "_blank";
    }
    // Delete the originally selected text
    range.deleteContents();
    // Insert the anchor tag
    range.insertNode(el);
    // Ensure that the caret appears at the end
    sel.removeAllRanges();
    range = range.cloneRange();
    range.selectNode(el);
    range.collapse(false);
    sel.addRange(range);
    this.showLinkPopup = false; 
  }
},
1
David Richied

空のdiv、p、またはspanを挿入する場合、範囲を取得するために、新しく作成された要素内に「何か」が必要であると思います。キャレットをそこに配置するためです。

これがChromeで問題なく動作するように見える私のハックです。アイデアは、要素内に一時的な文字列を配置し、キャレットがそこにあるときにそれを削除することです。

// Get the selection and range
var idoc = document; // (In my case it's an iframe document)
var sel = idoc.getSelection();
var range = sel.getRangeAt(0);

// Create a node to insert
var p = idoc.createElement("p"); // Could be a div, span or whatever

// Add "something" to the node.
var temp = idoc.createTextNode("anything");
p.appendChild(temp);
// -- or --
//p.innerHTML = "anything";

// Do the magic (what rangy showed above)
range.collapse(false);
range.insertNode( p );
range = range.cloneRange();
range.selectNodeContents(p);
range.collapse(false);
sel.removeAllRanges();
sel.addRange(range);

// Clear the non
p.removeChild(p.firstChild);
// -- or --
//p.innerHTML = "";
1
bob