< JavaScript

Ace szerkesztő

Bevezetés

Az Ace egy JavaScript nyelven írt kódszerkesztő. Megtalálható benne a natív kódszerkesztők minden előnye, eszköze, mint a Sublime, Vim vagy a TextMate szerkesztőben. Könnyen beépíthető egy weboldalba, vagy egy JavaScript alkalmazásba.

Az ace segítségével egy div elemből készíthetünk kódszövegszerkesztőt.

http://ace.c9.io/

https://github.com/ajaxorg/ace

Beszerzés

git clone git://github.com/ajaxorg/ace.git

Összeállítás

Az összeállításhoz szükség van az node parancsra.

npm install
node ./Makefile.dryice.js

Kezdés

<script src="min/ace.js" charset="utf-8"></script> <script> var editor = ace.edit("editordivazonosito"); editor.setTheme("ace/theme/monokai"); editor.getSession().setMode("ace/mode/html"); </script>

Néhány állítási lehetőség

A sortörésjelek beállítása.

editor.getSession().setNewLineMode("unix");

Tartalom beillesztése:

editor.getSession().setValue("<!doctype html>\n<html>\n<head>\n<meta charset=\"utf-8\">\n<head>\n<body>\n\n</body>\n</html>");

A példában egy HTML sablont illesztünk a szerkesztőbe.

Számozás kikapcsolása:

htmleditor.renderer.setShowGutter(false);

Számozás lekérdezése:

htmleditor.renderer.getShowGutter();

Eclipse téma betöltése:

editor.setTheme("ace/theme/eclipse");

JavaScript szintaxis kiemelés:

editor.getSession().setMode("ace/mode/javascript");

Kurzor adott helyre mozgatása:

editor.moveCursorTo(7, 8);

esetleg:

editor.navigateTo(7, 8);

Kurzor pozíciójának lekérdezése:

var curPos = editor.getCursorPosition(); console.log(curPos.row); console.log(curPos.column);

Ha a pozíció egy objektumban van:

editor.moveCursorToPosition(curPos);

Beűtméret:

jseditor.setFontSize(16);

Scrollbar

Vízszintes scrollbar automatikus megjelenítése

.ace_scrollbar { overflow-y: auto !important; }

Színes scrollbar

/* Kezdés */ ::-webkit-scrollbar { width: 0.5em; } /* Sáv */ ::-webkit-scrollbar-track { box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); } /* Kezelés */ ::-webkit-scrollbar-thumb { background: rgba(100, 100, 100, 0.8); } ::-webkit-scrollbar-corner, ::-webkit-scrollbar-thumb:window-inactive { background: rgba(100, 100, 100, 0.4); }
/* Kezdés */ ::-webkit-scrollbar { width: 12px; } /* Sáv */ ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-border-radius: 10px; border-radius: 10px; } /* Kezelés */ ::-webkit-scrollbar-thumb { -webkit-border-radius: 10px; border-radius: 10px; background: rgba(255,0,0,0.8); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); } ::-webkit-scrollbar-thumb:window-inactive { background: rgba(255,0,0,0.4); }

Néhány CSS beállítás

.ace_editor { height:80px } .ace_scrollbar { overflow-y:auto!important; }