[[oktatas:web:javascript|< 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 [[oktatas:web:javascript:nodejs|node]] parancsra.


npm install
node ./Makefile.dryice.js

===== Kezdés =====

===== 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("\n\n\n\n\n\n\n\n");

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