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.

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