eRIZ’s weblog

PHP, webdesign, Linux, Windows i inne, bo nie samym chlebem człowiek żyje
Serdecznie zapraszam do udziału w ANKIECIE

TinyMCE - FAQ

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. tinyMCE.init({
    2.     mode : ...,
    3.     ...,
    4.     setup : function (ed) {
    5.         ed.onKeyPress.add(
    6.             function (ed, evt) {
    7.                 alert("Editor-ID: "+ed.id+"\nEvent: "+evt);
    8.                 // Do some great things here...
    9.             }
    10.         );
    11.     },
    12.     ...
    13. });

    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. <textarea class="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. <textarea>
    2.         <p>Treść edytowalna.</p>
    3.         <p class="mceNonEditable">Treść zablokowana.</p>
    4. </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. tinyMCE.init({
    2.         theme : "advanced",
    3.         mode : "textareas",
    4.         plugins : "paste",
    5.         theme_advanced_buttons3_add : "pastetext,pasteword,selectall",
    6.         paste_auto_cleanup_on_paste : true,
    7.         paste_convert_middot_lists : false,
    8. });

    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. tinyMCE.init({
    2.         ...
    3.         mode : "exact",
    4.         elements : "elm1,elm2"
    5. });

    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. tinyMCE.execCommand('mceAddControl', false, 'identyfikatorEdytora');

    Aby go usunąć:

    1. tinyMCE.execCommand('mceFocus', false, 'identyfikatorEdytora');
    2. tinyMCE.execCommand('mceRemoveControl', false, '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",
    5.         editor_selector : "mceSimple"
    6. });
    7.  
    8. tinyMCE.init({
    9.         mode : "textareas",
    10.         theme : "advanced",
    11.         editor_selector : "mceAdvanced"
    12. });
    13. </script>
    14.  
    15. <textarea name="content1" class="mceSimple"></textarea>
    16. <textarea name="content2" class="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. var ed = tinyMCE.get('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. .selektor1
    2. {color: #000}
    3.  
    4. .selektor2
    5. {font-weight: bold;}

    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. entity_encoding : "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. ;)

18 komentarzy

dopisz swój :: trackback :: RSS z komentarzami

RSS z komentarzami :: trackback

Skomentuj

Możesz używać znaczników XHTML. Dozwolone są następujące tagi: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>

Wszystkie komentarze przechodzą przez moderację oraz filtry antyspamowe. Nie zostanie opublikowany komentarz, jeśli:

  • Jego treść obraża kogokolwiek.
  • W treści znajdują się wulgaryzmy i słownictwo ogólnie uznane za nieprzyzwoite.
  • Mam wątpliwości co do autora wpisu (Wszelkie anonimy są kasowane - niezależnie od zawartości - wpisz prawdziwy e-mail. Jeśli usunąłem, Twoim zdaniem, komentarz niesłusznie - daj znać). Zdarza się, iż sprawdzam kim jest komentujący.
  • Zawiera jakąkolwiek formę reklamy.

Szufladka