Electron: エディタライブラリACEの基本機能まとめ
2016/06/14
[ad#top-1]
Electronでプログラミング用のテキストエディターを製作中ですが、ACEを使って前回まででテキストの読み込みと書き込み機能は抑えました。今後細かい機能を実装していくわけですが、ACEの基本的な機能(プロパティ、メソッド)をまとめておきたいと思います。
基本機能は以下の通り。
項目 | コード |
テキスト入力 | editor.setValue(“text”); |
テキスト取得 | editor.getValue(); |
選択範囲 | var range = editor.getSelectionRange(); |
指定範囲の文字列取得 | var text = editor.session.getTextRange(range); |
選択範囲の行位置 | var startLine = range.start.row; var endLine = range.end.row; |
選択範囲の列位置 | var startColmn = range.start.column; var endColmn = range.end.column; |
現在のカーソル位置に挿入 | editor.insert(string); |
現在のカーソル位置を取得 | var cursor = editor.selection.getCursor(); cursor.row cursor.column |
指定位置にカーソル移動 | editor.gotoLine(row , column); //1行列目が1 |
総行数取得 | var count = editor.session.getLength(); |
タブ数設定 | editor.session.setTabSize(size); |
読取専用にする | editor.setReadOnly(true); |
縦スクロール量取得 | editor.session.getScrollTop(); |
例えば、現在のカーソル位置はカーソルを移動するごとに行数や文字位置を表示するために使います。この場合、カーソル移動のイベントをキャッチする必要がありますが、ACEでは様々なイベント処理が用意されています。
例えば、以下だとカーソルが移動するごとにr変数に行数が入ります。
editor.session.selection.on(“changeCursor” , function(e){ |
var cursor = editor.selection.getCursor(); |
var r = cursor.row; |
}); |
これをもとにプログラミング用のテキストエディターを作っていきたいと思います。
[ad#ad-1]
スポンサーリンク