JavaScript文本框撤销重做

Question

我正在制作一个小型JavaScript编辑器（用于Chrome扩展程序），有点类似于SO上的编辑器。

文本区域有一个工具栏，用于操作文本（例如：选中文本并用某个模板包围起来）。

我想知道是否有简单的方法可以实现这一点。目前，在使用系统撤消/重做功能时，它会破坏文本（我认为系统只在编辑之间跟踪差异）。

- brian14708

---

相关链接：https://dev59.com/73HYa4cB1Zd3GeqPKVmK - Timo Huovinen

Answer 1

如果文本区域获得焦点并且插入符号在正确的位置。

document.execCommand("insertText", false, "the text to insert");

将插入文本“the text to insert”，保留浏览器的本地撤销栈。 （请参见正在进行中的HTML Editing API规范。）Chrome 18支持此功能，但我不确定它是在哪个确切的版本中引入的。

- Scott Hughes

---

撤销可行，但重做无效。似乎它忘记了最新的历史项...http://jsfiddle.net/rudiedirkx/k4spa0dv/（仅限Chrome） - Rudie

无法弄清 false 是什么？ - krivar

请注意，HTML编辑API规范虽然很有用，但现在已经过时了（并且在大多数浏览器中不受支持：https://caniuse.com/#feat=ime）。然而，这显然并不意味着`execCommand("insertText", ...)`不受支持！ - LarsH

Answer 2

您可以通过模拟 textInput 事件来操作文本区域的内容。这种方式所做的更改应该会受到撤消/重做的尊重，我认为在Safari中是这样的。

var element = document.getElementById('someTextarea');
var text = 'This text will be inserted in the textarea';
var event = document.createEvent('TextEvent');

event.initTextEvent('textInput', true, true, null, text);
element.dispatchEvent(event); // fire the event on the the textarea

基本上，这段文本的插入方式就像你自己粘贴一样。如果有选中内容，它将被替换为该文本。如果没有选中任何内容，则该文本将插入在光标位置。并且撤销/重做应该正常工作（一次性撤销/重做整个插入的字符串），因为浏览器会将其视为您自己输入/粘贴。

正如我所说，我知道Safari的撤销/重做功能可以完美工作，所以我认为Chrome也是这样。

- Flambino

---

在 Firefox 中，您可以使用 element.value = substring + data + substring; 替换 textarea 的值，并且撤消仍将起作用。 - Timo Huovinen

从 Chrome 53 开始，这个方法不再可用，因为 document.createEvent 创建的事件是不受信任的。参考：https://dev59.com/AJvga4cB1Zd3GeqP2noY - smddzcy