Instaliranje i konfiguriranje TINYMCE. Inicijalizacija i parametri

Predstavljamo sjajan i moćan JS uređivač teksta

Kao što već razumete, uređivač je platformski Javascript editor HTML koda, tj. WYSIWYG editor za web stranice i web aplikacije. Programer ovog korisnog proizvoda je Moxiecode Systems AB. Ključne karakteristike programa uključuju: podršku za teme/šablone, jezičku podršku i mogućnost povezivanja dodataka. TinyMCE HTML editor se koristi u mnogim sistemima upravljanja i web mašinama, uključujući sistem upravljanja CMS v 1.01 kompanije BIT. Program možemo primijetiti kao odličan i vrlo funkcionalan alat za uređivanje HTML koda, umetanje video zapisa, tekstualnih i grafičkih informacija, tabela i grafikona. Istina, primjećujemo i oskudnost informacija na ruskom jeziku o metodama i svojstvima JS uređivača TinyMCE (ali imate sreće! Ovdje ćete pronaći odgovore na osnovna pitanja i naučiti kako raditi s TinyMCE editorom).

Kao što možete vidjeti iz naslovne slike iznad, JS editor je vrlo sličan uređivaču teksta u uredskim aplikacijama - princip rada TinyMCE editora je sličan. Za korisnike koji nisu upoznati sa mogućnostima html-a i css-a, postoji interfejs za grafički uređivač. Za korisnike koji poznaju HTML i CSS programski jezik, postoji i napredni HTML editor. Ovaj uređivač vam omogućava da riješite gotovo svaki problem koji se odnosi na dizajn stranice.

Uputstva su u potpunosti primjenjiva za verziju editora 3.5.11. Za kasnije verzije, metodologija za rad s urednikom također bi trebala biti slična.

Instalacija i konfiguracija TinyMCE

1. Preuzmite najnoviju verziju uređivača ovdje i raspakirajte je.

2. Kopirajte sadržaj arhive u direktorij stranice koji vam je potreban.

3. Povežite uređivač na našu stranicu umetanjem koda na željenu stranicu:

<script type="text/javascript" src="/path/to/tiny_mce.js"></script>

4. Inicijalizirajte uređivač koristeći JavaScript kod:

<!-- TinyMCE -->
<script type="text/javascript">
tinyMCE.init({
    mode : "textareas",
    theme : "simple"
 });
</script>
<!-- /TinyMCE -->
<textarea></textarea>

5. Gotovo! Sada ste umetnuli i inicijalizirali najjednostavniji TinyMCE editor.

Kao što ste primijetili, povezivanje i inicijalizacija JS editora odvija se u 3 logična koraka:

• povezivanje biblioteke sa stranicom sajta
• inicijalizacija objekta
• umetanje oznake textarea, koja postaje grafički html editor.

Inicijalizacija uređivača i njegovih parametara

TinyMCE editor se može inicijalizirati različitim parametrima, temama i dodacima. U ovom dijelu ćemo pogledati neke parametre i njihova značenja. Evo primjera inicijalizacije uređivača u sistemu upravljanja CMS V 1.01 kompanije BIT:

<!-- TinyMCE -->
<script type="text/javascript">
    tinyMCE.init({
        // General options
        mode : "exact",
        elements: "content_editor",
        theme : "advanced",
        language:"ru",
        plugins : "autolink,lists,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,precode,uploads_image",
    
        // Theme options
        theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
        theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,preCode,anchor,image,uploads_image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
        theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
        theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom",
        theme_advanced_resizing : true,

        // Skin options
        skin : "o2k7",
        skin_variant : "silver",

        // Drop lists for link/image/media/template dialogs
        template_external_list_url : "js/template_list.js",
        external_link_list_url : "js/link_list.js",
        external_image_list_url : "js/image_list.js",
        media_external_list_url : "js/media_list.js",

        // Replace values for the template plugin
        template_replace_values : {  username : "Some User",  staffid : "991234"  }
    });
    </script>
<!-- /TinyMCE -->

mod [ textareas | tačno | specific_textareas | n one ] - određuje koje će html instance biti konvertovane u TinyMCE grafičke uređivače.

• textareas  - Konvertuje sve oznake <textarea> u prikaz uređivača
• specific_textareas  - konvertuju se samo elementi koji imaju selektor naveden u parametru editor_selector ili nemaju selektor naveden u editor_deselector

<script type="text/javascript">
        tinyMCE.init ({
            mode : "specific_textareas",
            editor_selector : "editme",
            language:"ru",
            theme : "simple"
        });
    </script>
<textarea id="content" class="editme" name="content"></textarea>

• exact  - konvertuju se samo elementi čiji su identifikatori navedeni u parametru elemenata (primjer CMS kompanije BIT).
  
• nijedan  - elementi se ne konvertuju

tema [ jednostavna | napredno ] - definira način inicijalizacije uređivača.

• jednostavan  - način koji uključuje osnovne funkcije i zabranjuje fleksibilnu konfiguraciju
• napredni  - način rada koji omogućava fleksibilnu konfiguraciju dodataka, gumba za uređivanje, tema za uređivanje itd.

jezik  - specificira kod jezičkog paketa za TinyMCE grafički uređivač.

dodaci  — lista dodataka inicijaliziranih uređivačem, odvojenih zarezima.

theme_advanced_buttons<1-n>  - Sadrži listu kontrola za umetanje u traku sa alatkama, gdje je <1-n> linija na traci sa alatkama.

theme_advanced_toolbar_location  - određuje gdje se alatne trake trebaju nalaziti: gore - na vrhu, dolje - na dnu.

theme_advanced_toolbar_align  - omogućava vam da postavite poravnanje alatne trake: lijevo, desno i po sredini.

theme_advanced_statusbar_location  - postavlja poziciju statusne trake (gore - gore, dolje - dno), ili ukazuje na njeno odsustvo - nema.

theme_advanced_resizing  - omogućava - tačno ili onemogućava - netačno mogućnost promjene veličine prozora uređivača. Ne radi ako je theme_advanced_statusbar_location postavljen na none.

skin  - označava koji skin ove teme treba koristiti.

skin_variant  - označava koju varijantu kože treba koristiti.

content_css  - povezuje prilagođeni css fajl (ili skup fajlova odvojenih zarezima) koji će se koristiti u uređivaču.

relativni_urls  - postavlja da li će veze u uređivaču biti relativne (tačne) ili apsolutne (netačne).

template_replace_values ​​- pretvaranje elementa stranice u grafički uređivač html koda s parametrima.

template_replace_values : { username : "Some User", staffid : "991234" }

Tako ćemo rezimirati pitanje povezivanja i inicijalizacije TinyMCE grafičkog uređivača html koda za stranicu. Hvala svima!