1

Ace エディターを保存 + 元に戻す/やり直し用のツールバーと統合する Angular アプリケーションを作成したいと考えています。このアプリを実行するための基本的なプランクを作成しました。

plunk からわかるように、ツールバー (保存、元に戻す、やり直しの 3 つのボタン) のレンダリングを担当する「toolbar」ディレクティブと、Ace エディターのレンダリングを担当する「ace」ディレクティブがあります。どちらのディレクティブも「directives.coffee」にあります。

ツールバーは、テキスト エディターのツールバーに期待されるとおりに動作する必要があります。つまり、次のようになります。

  • ドキュメントが最後に保存されてから変更された場合は、保存ボタンを有効にする必要があります
  • 保存ボタンをクリックすると、ドキュメントの状態が元の状態 (汚れていない状態) に変わり、保存ボタンが無効な状態に戻る必要があります。
  • 元に戻すことができる操作が少なくとも 1 つある場合は、元に戻すボタンを有効にする必要があります。
  • 元に戻すボタンをクリックすると、エディターは最後の操作を元に戻すように指示され、元に戻すボタンは上記のポイントに従って更新される必要があります
  • やり直し可能な操作が少なくとも 1 つある場合は、やり直しボタンを有効にする必要があります。
  • やり直しボタンをクリックすると、エディターは最後の操作をやり直すように指示され、やり直しボタンは上記のポイントに従って更新されます。

私の質問は、上記の仕様が満たされるように、Ace エディターとアプリケーション ツールバーの間の Angular バインディングをどのように考案できるかということです。

4

1 に答える 1

1

Angular側で何をする必要があるのか​​ わかりませんが、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 に答える