jHtmlArea

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