jQuery plugins - jHtmlArea
okt 05

jHtmlArea

WYSIWYG HTML szerkesztő

Verzió: 0.7.5
Kiadás dátuma: 2012/08/03
Fejlesztő: Chris Pietschmann
Liszensz: Ms-RL

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