TinyMCE svojstva i metode. Umetanje oznaka, izlaz vrijednosti

U ovom članku ćemo pogledati glavna svojstva i metode TinyMCE uređivača teksta. Naučimo kako umetnuti oznake u odabrani fragment teksta, umetnuti oznake umjesto selektora u tekst i koristiti JS za dobivanje HTML koda uređenog teksta i teksta bez HTML entiteta. Unaprijed se izvinjavam zbog pretjerane tautologije u primjerima. Mislio sam da bi nepotrebno ponavljanje bilo prikladno i da bi članak lišio sumnje i potcenjivanja.

Nabavite vrijednosti uređivača teksta

U ovom dijelu ćemo pogledati primjere izlaza sadržaja uređivača teksta, odabranih fragmenata u različitim izlaznim opcijama: tekst, HTML. Primjeri će se, po pravilu, dati u različitim verzijama: aktivni TinyMCE editor, odabir uređivača po ID-u. Sve funkcije vraćaju vrijednost niza.

Primjeri pozivanja metode koja vraća cijeli sadržaj TinyMCE uređivača teksta kao HTML kod

Prvi primjer pokazuje funkciju pomoću koje možemo dobiti HTML sadržaj aktivnog TinyMCE uređivača teksta:

tinyMCE.activeEditor.getContent();

Drugi primjer također vraća sadržaj uređivača TinyMCE, gdje je id sadržaja id oznake textarea uređivača teksta:

tinyMCE.get('content id').getContent();

jQuery verzija dobijanja HTML sadržaja, gdje  je ID sadržaja id oznake textarea uređivača teksta:

$('#content id').html();

Primjeri pozivanja metode koja vraća cijeli sadržaj TinyMCE uređivača teksta kao tekst

Prvi primjer pokazuje funkciju pomoću koje možemo dobiti sadržaj aktivnog TinyMCE uređivača teksta kao tekst:

tinyMCE.activeEditor.getContent({format : 'text'});

Drugi primjer također vraća sadržaj TinyMCE uređivača kao tekst, gdje  je id sadržaja id oznake textarea uređivača teksta:

tinyMCE.get('content id').getContent({format : 'text'});

Primjeri pozivanja metode koja vraća sadržaj odabranog teksta u uređivaču teksta TinyMCE kao HTML kod

Aktivni TinyMCE editor:

tinyMCE.activeEditor.selection.getContent();

TinyMCE editor, gdje  je ID sadržaja  id oznake textarea uređivača teksta:

tinyMCE.get('content id').selection.getContent();

Primjeri pozivanja metode koja vraća sadržaj odabranog teksta u uređivaču teksta TinyMCE kao tekst

Aktivni TinyMCE editor:

tinyMCE.activeEditor.selection.getContent({format : 'text'});

TinyMCE editor, gdje  je ID sadržaja  id oznake textarea uređivača teksta:

tinyMCE.get('content id').selection.getContent({format : 'text'});

Ostale funkcije i metode TinyMCE uređivača teksta

Primjer pozivanja metode editora koja vraća ID aktivnog uređivača teksta:

tinyMCE.activeEditor.id;

Primjer pozivanja metode aktivnog uređivača TinyMCE, vraćanja imena odabrane oznake u uređivaču:

tinyMCE.activeEditor.selection.getNode().nodeName;

Primjer pozivanja metode TinyMCE editora, vraćanja imena odabrane oznake u uređivaču, gdje  je ID sadržaja ID oznake textarea uređivača teksta:

tinyMCE.get('content id').selection.getNode().nodeName;

Umetnite ili zamijenite HTML oznake u TinyMCE uređivaču teksta

Ovaj dio članka će razmotriti primjere pristupa metodama i funkcijama TinyMCE uređivača teksta koji olakšavaju uređivanje i umetanje oznaka i teksta u željeni fragment html koda ili teksta.

Metoda koja vam omogućava da umetnete oznaku u aktivni uređivač teksta TinyMCE:

tinyMCE.activeEditor.execCommand("mceInsertContent", false, '<b>Hello world!</b>');

Metoda koja vam omogućava da umetnete oznaku u TinyMCE uređivač teksta, gdje   je ID sadržaja ID oznake textarea uređivača teksta:

tinyMCE.get('content id').execCommand("mceInsertContent", false, '<b>Hello world!</b>');

Metoda koja vam omogućava da zamijenite odabrani tekst aktivnog uređivača teksta TinyMCE, gdje  je {$selection} odabrani tekst aktivnog uređivača teksta:

tinyMCE.activeEditor.execCommand('mceReplaceContent',false,'<b>{$selection}</b>');

Metoda koja vam omogućava da zamijenite odabrani tekst TinyMCE uređivača teksta, gdje  je {$selection} odabrani tekst aktivnog uređivača teksta; content id — id oznake textarea uređivača teksta :

tinyMCE.get('content id').execCommand('mceReplaceContent',false,'<b>{$selection}</b>');

Metoda koja vam omogućava da zamijenite odabrani HTML kod aktivnog uređivača teksta TinyMCE, gdje  je {$selection} odabrani tekst aktivnog uređivača teksta:

tinyMCE.activeEditor.execCommand('mceReplaceContent',false,'<i>'+tinyMCE.activeEditor.selection.getContent({format : 'html'})+'</i>');

Metoda koja vam omogućava da zamijenite odabrani HTML kod TinyMCE uređivača teksta,  gdje  je {$selection}  odabrani tekst aktivnog uređivača teksta;  content id — id oznake textarea uređivača teksta :

tinyMCE.get('content id').execCommand('mceReplaceContent',false,'<i>'+tinyMCE.activeEditor.selection.getContent({format : 'html'})+'</i>');

Prebacivanje TinyMCE modova

Tekst i grafički uređivač TinyMCE pruža načine za uređivanje teksta. U ovom odeljku ćemo pogledati metode za prebacivanje režima uređivača teksta.

Metoda koja vam omogućava da prebacite aktivni TinyMCE uređivač teksta u način rada grafičkog uređivača:

tinyMCE.activeEditor.show();

Metoda koja vam omogućava da prebacite aktivni TinyMCE uređivač teksta u način rada grafičkog uređivača, gdje je ID sadržaja id oznake textarea uređivača teksta : 

tinyMCE.get('content id').show();

Metoda koja vam omogućava da prebacite aktivni uređivač teksta TinyMCE u mod uređivača teksta:

tinyMCE.activeEditor.hide();

Metoda koja vam omogućava da prebacite aktivni TinyMCE uređivač teksta u mod uređivača teksta, gdje  je ID sadržaja ID oznake textarea uređivača teksta: 

tinyMCE.get('content id').hide();

Zaključak

Kao što ste već primijetili, uređivač teksta TinyMCE ima mnogo metoda i funkcija koje pojednostavljuju rad s uređivačem i omogućavaju fleksibilnu konfiguraciju i prilagođavanje uređivača prema vašim potrebama i zadacima. Metode, funkcije i primjeri dati u ovom članku nisu iscrpni. Članak opisuje osnovne metode rada s urednikom, koji će vam pomoći da riješite mnoge probleme.

Pogledajte kompletan API na službenoj web stranici TinyMCE editora.

Hvala svima na pažnji!