ACE编辑器更改事件

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()加载文档后以及使用时isClean,markClean上的方法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>

Answer 2

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

我建议您记录原始文本,并在文本发生变化时进行比较.如果text等于origin,则禁用save按钮.