我想编写一个 Angular 应用程序,它将 Ace 编辑器与用于保存 + 撤消/重做的工具条集成在一起。我已经创建了一个基本的 plunk 来开发这个应用程序。
正如您应该能够从 plunk 中看出的那样,有一个负责渲染工具栏的"工具栏"指令(有三个按钮:保存、撤消和重做)和一个负责渲染 Ace 编辑器的"ace"指令。这两个指令都位于"指令.coffee"中。
工具栏的行为方式应与您期望的文本编辑器工具栏相同,即:
- 如果文档自上次保存以来已更改,则应启用保存按钮 单击保存按钮
- 时,文档状态应更改为原始状态(即不脏),保存按钮应恢复为禁用状态
- 如果至少有一个操作可以撤消,则应启用撤消按钮 单击撤消按钮
- 时,应告知编辑器撤消上一个操作,并且应根据上述要点更新撤消按钮
- 如果至少有一个操作可以重做,则应启用重做按钮 单击重做按钮时,应
- 告知编辑器重做上一个操作,并应按照上述要点更新重做按钮
所以我的问题是,如何在 Ace 编辑器和应用程序工具栏之间设计一个 Angular 绑定,以满足上述规范?
我不确定你需要在角度方面做什么,但 ace 为所有这些提供了方法
var undoManager = editor.session.getUndoManager()
undoManager.isClean()
undoManager.markClean()
undoManager.hasUndo()
undoManager.hasRedo()
请注意,isClean
基于撤消堆栈而不是文档值,因此即使值未更改,编写和删除字母也将启用保存按钮。
此外,最好使用 editor.on("input", function(){})
而不是 'change'
,因为输入事件是异步触发的。