How to use the UndoManager to determine if document has unsaved changes
Your solution has a disadvantage: after saving, you are not able to undo. Most modern editors allow undo after saving.
I suggest that you record down the original text and do a comparision whenever text changes. if text equals origin, disable save button.
Call editor.session.getUndoManager().reset()
after loading the document
and use isClean
, markClean
methods on undoManager
.
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>