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

Question

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

我想启用或禁用“保存”按钮，具体取决于是否对文档进行了未完成的修改，并且我已尝试通过“更改”事件来执行此操作:

UndoManager.reset();

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

editor.on('change', function() {

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

    });

加载文档时，“禁用”类会立即被删除。

如果有人能告诉我应该如何完成，请提前致谢。

Answer 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>