在Angular应用程序中，如何将Ace编辑器与工具栏集成？

Question

我希望编写一个Angular应用程序，它将Ace editor与用于保存+撤消/重做的工具栏集成在一起。我已经创建了一个基本plunk来制作这个应用程序。

正如你应该能够从插件中看到的那样，有一个'toolbar'指令负责渲染工具栏（有三个按钮：Save，Undo和Redo）和一个负责渲染Ace编辑器的'ace'指令。这两个指令都位于'directives.coffee'。

工具栏应该按照文本编辑器工具栏的方式运行，即：

• 如果文档自上次保存以来已更改，则应启用保存按钮
• 单击保存按钮时，文档状态应更改为原始状态（即非脏），保存按钮应返回禁用状态
• 如果至少有一个可撤消的操作
，则应启用撤消按钮
• 单击撤消按钮时，应告知编辑器撤消上一次操作，并按照上述要点更新撤消按钮
• 如果至少有一个可以重做的操作
，则应启用重做按钮
• 点击重做按钮时，应告知编辑器重做上一次操作，并按照上述要点更新重做按钮

所以我的问题是，如何设计Ace编辑器和应用程序工具栏之间的Angular绑定，以便满足上述规范？

Answer 1

我不确定你在角度方面需要做什么，但是ace提供了所有这些方法

var undoManager = editor.session.getUndoManager()
undoManager.isClean()
undoManager.markClean()
undoManager.hasUndo()
undoManager.hasRedo()

请注意isClean基于撤消堆栈而不是文档值，因此即使值未更改，写入和删除字母也会启用保存按钮。

最好使用editor.on("input", function(){})而不是'change'，因为输入事件是异步触发的。