Zauważyłem, że moje wcześniejsze notki dotyczące instalacji i polonizacji TinyMCE jednak się przydały. Chciałbym dzisiaj napisać parę słów na temat najczęściej zadawanych pytań, które zadaliście w komentarzach oraz na Forum PHP.pl.

(pytania zbliżone do oryginałów)

1. A na jakiej licencji jest ten edytor? Mozna go wykorzystywac w celach komercyjnych?

   Oczywiście, że tak pod warunkiem, iż zachowujesz postanowienia LGPL. Więcej na stronie producenta.

2. Co zrobic, by w obszarze objętym TinyMCE (w textarea) wykonywać operacje JavaScript, np. alert po naciśnięciu klawisza?

   Na forum TinyMCE zostało już zadane podobne pytanie. Wszystko sprowadza się do dodania zdarzeń nie dla zwykłego <textarea/>, a do sekcji inicjującej edytor:

   1. span class="st0">"Editor-ID: "+ed.id+"\nEvent: "+evt);
   2.                 // Do some great things here...
   3.             }
   4.         );
   5.     },
   6.     ...
   7. });

   Nazwy zdarzeń są identyczne jak w implementacjach JavaScript z tą różnicą, że zapisywane w składni „wielbłąda” (wielka litera co wyraz). Opis funkcji setup w wiki producenta.

3. Witam. Jak można zmusić ten edytor aby akceptował możliwość przekreślenia i podkreślania tekstu…

   Do sekcji inicjującej dodaj własność extended_valid_elements i podaj w niej interesujące Cię tagi, np:

   1. extended_valid_elements: "s[class|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown|onkeypress|onkeyup"
   2.   +"|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|style|title],"
   3. +"u[class|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown|onkeypress|onkeyup"
   4.   +"|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|style|title]",
   5. theme_advanced_buttons1 : "bold,italic,underline,strikethrough"

   Ale lepiej utworzyć swój styl w CSS.

4. Mam pytanie jest to okno do komentowania… nie ma opcji aby zatwierdzić (dodać) to co się napisało…

   O ile dobrze zrozumiałem pytanie, to chodzi o możliwość zapisania danych z edytora poprzez kliknięcie odpowiedniej opcji na pasku narzędzi. Wystarczy uaktywnić wtyczkę save i problem z głowy.

5. Pytanie: nie mam zdefiniowanego id dla textarea w których ma pojawiać się tiny, czyli generealnie przypisywany jest do wszystkich możliwych. Czy istnieje możliwość wyłączenia po id niektórych textarea tak żeby tiny się tam nie wyświetlał?

   Oczywiście. Dodaj do <textarea /> klasę mceNoEditor. W skrócie wygląda to tak:

   1. span class="st0">"mceNoEditor"></textarea>
6. Czy da się zablokować część treści w edytorze która jest zaimportowana zablokować?

   Jeden z przykładów użycia na stronie producenta prezentuje tą funkcjonalność. Wystarczy blokowanym elementom nadać odpowiednią klasę:

   1. span class="st0">"mceNonEditable">Treść zablokowana.</p>
   2. </textarea>
7. Mam problem z formatowaniem kodu przez tinymce, a konkretnie o to,że przy kopiowaniu tekstu z worda kopiowane są również style to powoduje niemożność wyświetlenia strony w ie.

   TinyMCE obsługuje możliwość wklejania sformatowanego w Wordzie tekstu. Cóż, czasem to irytuje, powoduje, że w formatowaniu panuje swoisty śmietnik. Przydałaby się opcja na wzór wklej specjalnie, zwykły tekst. Otóż istnieje taka możliwość. Trzeba skorzystać z wtyczki Paste. Jest ona dostępna w standardowej paczce, wystarczy ją tylko włączyć. Jak to zwykle bywa z rozszerzeniami do TinyMCE, wystarczy zmodyfikować funkcję inicjującą edytor:

   1. span class="st0">"advanced",
   2.         mode : "textareas""paste",
   3.         theme_advanced_buttons3_add : "pastetext,pasteword,selectall"

   Oczywiście, to jest tylko przykładowe użycie; powyższy kod należy dostosować do własnych potrzeb.

8. Jak zmusić TinyMCE do pracy tylko z wybranym polem <textarea/>?

   I edycja, jak wyżej. Zmieniamy wartość mode i dodajemy elements, za wiki:

   1. span class="st0">"exact",
   2.         elements : "elm1,elm2"
   3. });

   W wartości elements podajemy nazwy pól tekstowych po przecinku. Nazwy, to wartości id w <textarea/>, np:

   1. <textarea id="elm1"></textarea><textarea id="elm2"></textarea>
9. Jak za pomocą JavaScript włączać/wyłączać edytor?

   Aby dodać edytor dla pola edycyjnego:

   1. span class="st0">'mceAddControl''identyfikatorEdytora');

   Aby go usunąć:

   1. span class="st0">'mceFocus''identyfikatorEdytora''mceRemoveControl''identyfikatorEdytora');
10. Jak konfigurować TinyMCE niezależnie dla wielu pól?

    Takie rozwiązanie można zobaczyć w akcji na stronie producenta. W skrócie, polega ono na powieleniu komend inicjujących w zależności od potrzeb. Tworzymy przez to „grupy” edytora, które skrypt przypina w zależności od nadanego atrybutu class dla <textarea>. Przykładowo:

    1. <script type="text/javascript">
    2. tinyMCE.init({
    3.         mode : "textareas",
    4.         theme : "simple""mceSimple"
    5. });
    6.  
    7. tinyMCE.init({
    8.         mode : "textareas",
    9.         theme : "advanced""mceAdvanced""content1""mceSimple"></textarea>
    10. <textarea name="content2""mceAdvanced"></textarea>
11. Jak z poziomu TinyMCE wysłać i wstawić obrazek?

    Można skorzystać z płatnej wtyczki MCImageManager. Jednak, gdyby ktoś chciał skorzystać z darmowego odpowiednika, może zainteresować się iManagerem.

12. Jak załadować/wysłać zawartość edytora przy pomocy AJAX-a?

    Dzięki rozbudowanemu API edytora, jest to wręcz bajeczne. Przykład zastosowania.

    1. span class="st0">'content'); //pobieramy uchwyt do pola o id="content"
    2. tresc = ed.getContent(); //pobranie treści z edytora
    3. ed.setContent('ustaw treść edytora');
13. Jak podpiąć TinyMCE do jakiegoś systemu forum, aby generował kod bbCode?

    Wszystko jest opisane w dokumentacji producenta.

14. Jak użyć własnego stylu dla treści w oknie edytora?

    Wystarczy stworzyć osobny arkusz CSS i podpiąć go korzystając z własności content_css.

15. Jak utworzyć własne formatowanie w liście rozwijanej styl?

    Utwórz własny arkusz CSS (tak, jak w poradzie wyżej). Wszystkie selektory klas zawarte w arkuszu zostaną automatycznie dodane do listy.

    1.  

    Co sprawi, że na liście będą do wyboru style o nazwach selektor1 i selektor2.

16. Jak nakazać TinyMCE zapisywanie polskich znaków bez użycia encji?

    Bywa to dość denerwujące, np. zamiast ó edytor zwraca &oacute;. Jednak da się to wyłączyć. Wystarczy do funkcji inicjującej edytor dopisać:
    

    1. span class="st0">"raw"

    i po problemie.

Mam nadzieję, że wyjaśniłem choć niektóre z wątpliwości z TinyMCE, IMHO, najlepszego edytora WYSIWYG dostępnego w Sieci.

W razie pytań, zostaw komentarz.