非IT企業に勤める中年サラリーマンのIT日記

非IT企業でしかもITとは全く関係ない部署にいる中年エンジニア。唯一の趣味がプログラミングという”自称”プログラマー。

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;
});

 

これをもとにプログラミング用のテキストエディターを作っていきたいと思います。

a

 

[ad#ad-1]

スポンサーリンク

 - Electron