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.
git clone git://github.com/ajaxorg/ace.git
Az összeállításhoz szükség van az node parancsra.
npm install node ./Makefile.dryice.js
<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>
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);
.ace_scrollbar { overflow-y: auto !important; }
/* 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); }
.ace_editor { height:80px } .ace_scrollbar { overflow-y:auto!important; }