Question

我当前的Chrome扩展程序应该以编程方式在用户输入中插入文本。这很好用，但是，它破坏了到目前为止我尝试过的所有文本编辑器的撤消/重做行为。因此，下面的例程：

输入一些文字
以编程方式插入一些文本
输入更多文字
按ctrl-z三次

并不总是恢复为空白状态。很多时候，它会卡在中间的某个地方。其行为大多不一致。

这是内容脚本的MCVE：

function init() {
  var $input = document.getElementsByTagName("textarea")[0];
  if (!$input) {
    console.log("No input element found.");
    return true;
  }
  var $btn = document.createElement("button");
  $btn.innerHTML = "Click";
  $btn.addEventListener("click", function() {
    var caretPos = $input.selectionStart;
    $input.value = $input.value.substring(0, caretPos) + " test string " + $input.value.substring(caretPos);
  });

  $input.parentElement.insertBefore($btn, $input);

  return true;
}
window.addEventListener("load", init);

<div><textarea></textarea></div>

（如果您愿意，我也将其捆绑为Chrome extension。）

我希望撤消/重做在textarea以及contenteditable节点中都能正常运行。我还在document.execCommand和insertText模式下尝试了insertHTML，但没有成功。我看了另外两个相关的问题，但它们没有回答我的查询。（q1，q2）

还有什么可以解决此问题的方法？

Answer 1

由于上面的有用评论，我的问题是对execCommand进行了预编程的奇怪编辑器，例如Facebook Messenger，tinymce等。它们可能会干扰自己的自定义。

在常规文本编辑器中，document.execCommand应该可以正常工作，并支持撤消/重做。像这样使用它：

document.execCommand('insertText', false, "text");
document.execCommand('insertHTML', false, "html");

如何执行同时支持撤消和重做的程序化文本输入？

1 个答案: