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



我想编写一个 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',因为输入事件是异步触发的。

相关内容

  • 没有找到相关文章

最新更新