1

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

正如您应该能够从 plunk 中看出的那样，有一个“工具栏”指令负责渲染工具栏（带有三个按钮：保存、撤消和重做）和一个“ace”指令负责渲染 Ace 编辑器。这两个指令都位于“directives.coffee”中。

工具栏的行为应该与您对文本编辑器工具栏的期望相同，即：

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

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

4

1 回答 1

1

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

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

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

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

于 2013-09-09T06:41:20.667 回答