如何使用 UndoManager 确定文档是不是有未保存的更改

Posted 2023-05-07

【中文标题】如何使用 UndoManager 确定文档是不是有未保存的更改

【英文标题】：How to use the UndoManager to determine if document has unsaved changes如何使用 UndoManager 确定文档是否有未保存的更改

【发布时间】：2013-11-09 07:31:56

【问题描述】：

我对 ACE 编辑器和一般的 javascript 还是很陌生，但是除了以下内容之外，我已经设法实现了我想要的大部分内容：

我想根据文档是否有未完成的修改来启用或禁用“保存”按钮，并且我已尝试通过“更改”事件来执行此操作：

UndoManager.reset();

$('#save').addClass("disabled");

editor.on('change', function() 

        if (UndoManager.hasUndo()) 
            $('#save').removeClass("disabled");
        
        else 
            $('#save').addClass("disabled");
        

    );

在加载文档时，'disabled' 类会立即被删除。

如果有人能告诉我应该怎么做，在此先多谢了。

【参考方案1】：

加载文档后调用editor.session.getUndoManager().reset() 并在undoManager 上使用isClean、markClean 方法。

var saveButton = document.getElementById("save")
var editor = ace.edit("editor")
// using input event instead of change since it's called with some timeout
editor.on("input", function() 
    saveButton.disabled = editor.session.getUndoManager().isClean()
);

saveButton.addEventListener("click", function() 
    editor.session.getUndoManager().markClean()
    saveButton.disabled = editor.session.getUndoManager().isClean()
)

<script src="http://ajaxorg.github.io/ace-builds/src/ace.js"></script>
<button id="save">save</button>
<div id="editor" style="height:200px"></div>

【讨论】：

谢谢，这很好用（虽然我不得不切换添加和删除类语句 - 我的错）。当用户倒回到撤消缓冲区的开头然后再次添加禁用的类时，是否可以捕获？无论哪种方式，我们都非常感谢您的帮助。

我将 .isClean() 更改为 .hasUndo() （并颠倒了添加/删除语句），现在当用户倒退到撤消缓冲区的开头时，“保存”按钮将被禁用。它还支持重做。很酷。

@Wasim 确保您使用的是最新版本的 ace

我正在将一些事件的新数据加载到编辑器中。撤消管理器在延迟后运行，因此我需要将我的 markClean() 函数调用置于延迟内，如下所示：setTimeout(function() editor.getSession().getUndoManager().reset(); , 700);（在我的情况下，reset() 或 markClean() 都对我有用）

【参考方案2】：

您的解决方案有一个缺点：保存后，您无法撤消。大多数现代编辑器都允许在保存后撤消。

我建议你记录下原文，并在文本发生变化时进行比较。如果文本等于原点，则禁用保存按钮。

【讨论】：

简单高效！