szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[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 =====

<code>
git clone git://github.com/ajaxorg/ace.git
</code>

===== Összeállítás =====

Az összeállításhoz szükség van az [[oktatas:web:javascript:nodejs|node]] parancsra.

<code>
npm install
node ./Makefile.dryice.js
</code>

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

<code javascript>
<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>
</code>

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


A sortörésjelek beállítása.
<code javascript>
editor.getSession().setNewLineMode("unix");
</code>

Tartalom beillesztése:
<code javascript>
editor.getSession().setValue("<!doctype html>\n<html>\n<head>\n<meta charset=\"utf-8\">\n<head>\n<body>\n\n</body>\n</html>");
</code>

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


Számozás kikapcsolása:
<code javascript>
htmleditor.renderer.setShowGutter(false);
</code>

Számozás lekérdezése:
<code javascript>
htmleditor.renderer.getShowGutter();
</code>



Eclipse téma betöltése:
<code javascript>
editor.setTheme("ace/theme/eclipse");
</code>

JavaScript szintaxis kiemelés:
<code javascript>
editor.getSession().setMode("ace/mode/javascript");
</code>


Kurzor adott helyre mozgatása:
<code javascript>
editor.moveCursorTo(7, 8);
</code>

esetleg:
<code javascript>
editor.navigateTo(7, 8);
</code>


Kurzor pozíciójának lekérdezése:
<code javascript>
var curPos = editor.getCursorPosition();
console.log(curPos.row);
console.log(curPos.column);
</code>

Ha a pozíció egy objektumban van:
<code javascript>
editor.moveCursorToPosition(curPos);
</code>


Beűtméret:
<code css>
jseditor.setFontSize(16);
</code>

===== Scrollbar =====

==== Vízszintes scrollbar automatikus megjelenítése ====

<code css>
.ace_scrollbar {
	overflow-y: auto !important;
}
</code>

==== Színes scrollbar ====

<code css>
/* 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);
}
</code>


<code css>
/* 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); 
}
</code>

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

<code css>
.ace_editor { 
    height:80px
}

.ace_scrollbar {
    overflow-y:auto!important;
}
</code>