
jHtmlArea
WYSIWYG HTML szerkesztő
Verzió: | 0.7.5 |
Kiadás dátuma: | 2012/08/03 |
Fejlesztő: | Chris Pietschmann |
Liszensz: | Ms-RL |
- kategória:
- Integráció
- Layout
- Segédeszközök
- Widget
- címkék:
- WYSIWYG
- HTML
- editor
- szerkesztő
- textarea
- 3195
- 10933
- 0
- -
Bevezető
Rengeteg megoldás található a neten arra, hogy weboldalunkba egy WYSIWYG (wikipédia) szerkesztőt integráljunk. A jHtmlArea plugin jQuery nyelven íródott és a társaihoz hasonlóan egy sima textarea-ra húzza rá a felhasználóbarát kezelőfelületet: lehetőségünk lesz ezáltal a szöveget formázni, képet beszúrni/átméretezni, listákat létrehozni, stb. Mindezt mindenféle HTML-kód gépelés és ismerete nélkül.
Implementálás
CSS
<link rel="stylesheet" type="text/css" href="css/jHtmlArea.css" />
JavaScript
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jHtmlArea-0.7.5.js"></script>
Deklaráció
$(document).ready(function(){ $('#pelda').htmlarea(); });
Használat
<textarea id="pelda"></textarea>
Teljes paraméterlista
-
toolbar: segítségével definiálhatjuk az eszköztáron szereplő funkciókat
(gombokat):
$('#pelda').htmlarea({ toolbar: ['bold', 'italic', '|', 'h1']});
A funkciók tetszőleges csoportokba szervezhetők:$('#pelda').htmlarea({ toolbar: ['bold', 'italic'], ['h1', 'h2', 'h3'], ['superscript', 'subscript'] });
-
toolbarText: a paraméter segítségével az alaphelyzetben angolul megjelenő
feliratokat módosíthatjuk tetszés szerint:
$('#pelda').htmlarea({ toolbarText: $.extend({}, jHtmlArea.defaultOptions.toolbarText, { 'bold': 'kövér', 'italic': 'döntött', 'underline': 'aláhúzott' }) });
-
css: egyéni stíluslap használata:
$('#pelda').htmlarea({ css: 'utvonal/sajat.css' });
- loaded: függvény meghívása a plugin betöltődését követően
Metódusok
- bold(): váltás a kiválasztott tartalom vastag/normál állapota között
- copy(): a kiválasztott tartalom vágólapra másolása
- cut(): a kiválasztott tartalom kivágása
- decreaseFontSize(): a betűméret csökkentése
- dispose(): a plugin megszüntetése/eltávolítása
- forecolor(): betűszínének módosítása
- getSelectedHTML(): visszaadja a kiválasztott tartalom HTML kódját
- getSelection(): visszaadja a kiválasztott tartalmat
- h1(): a kiválasztott tartalom beállítása 'címsor 1' stílusúvá
- h2(): a kiválasztott tartalom beállítása 'címsor 2' stílusúvá
- h3(): a kiválasztott tartalom beállítása 'címsor 3' stílusúvá
- h4(): a kiválasztott tartalom beállítása 'címsor 4' stílusúvá
- h5(): a kiválasztott tartalom beállítása 'címsor 5' stílusúvá
- h6(): a kiválasztott tartalom beállítása 'címsor 6' stílusúvá
- hideHTMLView(): váltás WYSIWYG nézetre
- html(htmlString): a paraméterben megadott tartalomra cseréli a szerkesztő aktuális tartalmát
- link(): URL hozzáadása a kiválasztott tartalomhoz
- indent(): behúzás növelése
- image(imageUrl): a paraméterben megadott kép beszúrása az aktuális pozícióba
- increaseFontSize(): a betűméret növelése
- italic(): váltás a kiválasztott tartalom döntött/normál állapota között
- justifyCenter(): a kiválasztott tartalom középre zárása
- justifyLeft(): a kiválasztott tartalom balra zárása
- justifyRight(): a kiválasztott tartalom jobbra zárása
- orderedList(): a kiválasztott tartalom rendezett listává alakítása
- outdent(): behúzás csökkentése
- p(): bekezdés létrehozása
- paste(): tartalom beillesztése a vágólapról
- pasteHTML(htmlString): HTML tartalom beillesztése
- removeFormat(): formázás törlése a kiválasztott tartalomról
- showHTMLView(): váltás HTML nézetre
- strikeThrough(): váltás a kiválasztott tartalom áthúzott/normál állapota között
- subscript(): a kiválasztott tartalom alsóindexbe tétele
- superscript(): a kiválasztott tartalom felsőindexbe tétele
- toggleHTMLView(): váltás a HTML és WYSIWYG nézet között
- toHtmlString(): visszaadja a szerkesztő aktuális HTML tartalmát
- toString(): visszaadja a kiválasztott tartalmat HTML kódok nélkül
- underline(): váltás a kiválasztott tartalom aláhúzott/normál állapota között
- unlink(): URL eltávolítása a kiválasztott tartalomról
- unorderedList(): rendezetlen lista beállítása/eltávolítása
- updateHtmlArea(): a textarea frissítése a szerkesztő aktuális tartalmával
Gombok
- html: váltás a HTML kód és a WYSIWYG nézet között
- bold: kövér betű
- italic: döntött betű
- underline: aláhúzás
- strikethrough: áthúzás
- p: bekezdés
- h1: címsor 1
- h2: címsor 2
- h3: címsor 3
- h4: címsor 4
- h5: címsor 5
- h6: címsor 6
- image: kép beszúrása
- link: link beszúrása
- unlink: link eltávolítása
- orderedList: rendezett lista (<ol>)
- unorderedList: rendezetlen lista (<ul>)
- superscript: felsőindex
- subscript: alsóindex
- indent: behúzás növelése
- outdent: behúzás csökkentése
- justifyleft: balra zárás
- justifycenter: középre zárás
- justifyright: jobbra zárás
- increasefontsize: betűméret növelése
- decreasefontsize: betűméret csökkentése
- forecolor: betűszín
- horizontalrule: vízszintes elválasztó vonal
- |: szeparátor