无法让document.execCommand('undo')在不同的浏览器上以相同的方式工作

Question

我有一些在文本框上实现上下文菜单的代码，上下文菜单是通过使用document.execCommand('undo')调用浏览器本机方法的Undo和Redo项。

此代码在基于Chromium的浏览器上按我的要求运行，但在FireFox和Opera上的结果并不像预期的那样。

我的期望是undo和redo的功能将类似于输入元素的本机浏览器上下文菜单。结果是，输入元素不会撤消和重做，但是设置了contenteditable属性的div元素可以按预期工作。

所以我想知道这是不是某个浏览器的bug，Chromium或者FireFox/Opera，或者我没有正确地实现代码？

下面的代码给出了我所面临的问题的一个示例。感谢所有的帮助。

<input contenteditable id="input" type="text"></input>
<div contenteditable id="div" class="inputLike" type="text"></div>
<button id="button1" type="button">Undo</button>
<button id="button2" type="button">Redo</button>

var input = document.getElementById("input"),
    button1 = document.getElementById("button1"),
    button2 = document.getElementById("button2"),
    div = document.getElementById("div");

console.log("Undo", document.queryCommandSupported("undo"));
console.log("Redo", document.queryCommandSupported("redo"));

function doUndo() {
    document.execCommand('undo', false, null);
}

function doRedo() {
    document.execCommand('redo', false, null);
}

button1.addEventListener("click", doUndo, false);
button2.addEventListener("click", doRedo, false);

在jsfiddle上

如果您想查看实际的上下文菜单代码，也可以在jsfiddle上找到它。

Answer 1

我认为这在document.execCommand()中是不可能的，至少在火狐中是不可能的。您可以创建自己的撤销堆栈，或者在将来使用新的UndoManager API (implemented in Firefox 20而不是disabled by default)。

下面是一个使用自己的撤销堆栈的示例，该堆栈使用input事件获取值和选择的快照。例如，您可以通过将连续的键入事件合并到单个撤消项中来改进这一点。浏览器与插入符号的位置也有一些不一致，但这只是一个概念证明。

http://jsfiddle.net/FMSsL/

使用新的DOM UndoManager API似乎很简单:如果我理解正确，并且浏览器支持它，那么<input>元素将有一个undoManager属性，该属性是一个具有undo()和redo()方法的对象，因此任务非常简单，如下所示

document.getElementById("input").undoManager.undo();

不幸的是，只有Firefox20和更高版本支持UndoManager应用程序接口，并且默认情况下它是禁用的。即使启用了它，下面的演示也不能工作，尽管我认为它应该工作，所以这个选项离可行还有一段路要走。

http://jsfiddle.net/DULV4/2/

Answer 2

正如我从我问到的question中发现的，火狐中的undoManager应用程序接口确实可以工作。我查看了Tim Down发布的jsFiddle链接(http://jsfiddle.net/DULV4/1/)，发现其中似乎存在一些问题：

• undoScope属性必须设置为true (内联或以编程方式)。这使得您撤消的element.
• Anything的undoManager必须首先由undoManager.transact()函数创建(尽管我想知道是否有任何方法可以将本机撤消堆栈合并到当前undoManager的事务历史记录中)。

我只是这方面的新手，所以请对我所说的持保留态度，有关使用它的所有信息，请查看https://dvcs.w3.org/hg/undomanager/raw-file/tip/undomanager.html。

Answer 3

可以获取撤消和重做的历史记录

​

function check(){
if(document.queryCommandEnabled("undo"))
  {
    $('#undoResult').text("Undo is active");
    }else{
      $('#undoResult').text("Undo is not active");
  }
if(document.queryCommandEnabled("redo"))
  {
    $('#redoResult').text("Redo is active");
    }else{
      $('#redoResult').text("Redo is not active");
  }
  }
  $(document).on('keypress',function(e) {
      if(e.which == 13) {
        document.execCommand("insertLineBreak");
              return false;
      }
      });
  check();

div{
  border:1px solid black;
  height:100px;
}

button{
color:white;
background:black;
height:40px;
width:49%;
padding:1px;
text-align:center;
margin-top:10px;
}

p{
font-size:30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div contenteditable="true">
</div>

<button onclick="document.execCommand('undo',false,null);check()" >Undo</button>

<button onclick="document.execCommand('redo',false,null); check()" >Redo</button>

<p id='undoResult'></p>
<p id='redoResult'></p>

​