Ist es möglich, eine Texteingabe mit Javascript zu bearbeiten und zum Undo-Stack hinzuzufügen?

Question

Gibt es eine Möglichkeit, den Inhalt eines input oder textarea mit Javascript zu bearbeiten, und diese Änderung rückgängig zu machen mit dem "Rückgängig" -Befehl des Browsers (zB ctrl-Z)?

Ich versuche, eine Zeichenfolge wie "Foo {0} bar" in den Wert bei der Auswahl einzufügen, und wenn der Benutzer einen Bereich ausgewählt hat, wird der ausgewählte Bereich in die Zeichenfolge anstelle der eingefügt "{0}"

Wenn das Textfeld beispielsweise "Beispiel 1 2 3" enthält und der Cursor auf "Beispiel 1 | 2 3" steht, ändert die Funktion den Wert zu "Beispiel 1Foo blabar 2 3" (valueIfNothingSelected wird "blah " in diesem Fall). Wenn der Bereich "1 2" ausgewählt wurde, ändert die Funktion stattdessen den Wert zu "Beispiel Foo 1 2 bar 3".

In Chrome habe ich diese Funktion ausprobiert, und es tut was es soll, aber ich kann die Änderung nicht mit undo rückgängig machen.

function insertTextAtCursor(text, valueIfNothingSelected) { 
    var field = $('textarea[name="task_log_description"]')[0]; 
    var startPos = field.selectionStart; 
    var endPos = field.selectionEnd; 
    var processedText; 
    if (startPos == endPos) { 
     processedText = text.replace('{0}', valueIfNothingSelected); 
     field.value = field.value.substring(0, startPos) + processedText + field.value.substring(endPos, field.value.length); 
     field.selectionStart = startPos + text.indexOf('{0}'); 
     field.selectionEnd = field.selectionStart + valueIfNothingSelected.length; 
    } else { 
     var selectedText = field.value.substring(startPos, endPos); 
     processedText = text.replace('{0}', selectedText); 
     field.value = field.value.substring(0, startPos) + processedText + field.value.substring(endPos, field.value.length); 
     field.selectionStart = startPos + text.indexOf('{0}'); 
     field.selectionEnd = field.selectionStart + selectedText.length; 
    } 
    field.focus(); 
} 

Answer 1

fand ich eine Lösung, die durch das Ersetzen der "field.value = ..." Linien mit bei https://stackoverflow.com/a/10345596/1021426

funktioniert:

document.execCommand("insertText", false, processedText); 

... und bewegend „field.focus() "Vor dieser Zeile konnte ich die gewünschte Rückgängig/Redo-Funktionalität erreichen.