eRIZ's weblog

PHP, webdesign, Linux, Windows i inne, bo nie samym chlebem człowiek żyje

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:

    tinyMCE.init({
    mode : ...,
    ...,
    setup : function (ed) {
    ed.onKeyPress.add(
    function (ed, evt) {
    alert("Editor-ID: "+ed.id+"\nEvent: "+evt);
    // Do some great things here...
    }
    );
    },
    ...
    });

    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:

    extended_valid_elements: "s[class|dir

    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:

  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ę:

  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:

    tinyMCE.init({
    theme : "advanced",
    mode : "textareas",
    plugins : "paste",
    theme_advanced_buttons3_add : "pastetext,pasteword,selectall",
    paste_auto_cleanup_on_paste : true,
    paste_convert_middot_lists : false,
    });

    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:

    tinyMCE.init({
    ...
    mode : "exact",
    elements : "elm1,elm2"
    });

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

  9. Jak za pomocą JavaScript włączać/wyłączać edytor?

    Aby dodać edytor dla pola edycyjnego:

    tinyMCE.execCommand('mceAddControl', false, 'identyfikatorEdytora');

    Aby go usunąć:

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



  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.

    var ed = tinyMCE.get('content'); //pobieramy uchwyt do pola o id="content"
    tresc = ed.getContent(); //pobranie treści z edytora
    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.

    .selektor1
    {color: #000}

    .selektor2
    {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ć:

    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=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">

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.

Warning: Undefined variable $user_ID in /usr/home/er1zpl/domains/eriz.pcinside.pl/public_html/weblog/wp-content/themes/inBlueDiary/comments.php on line 112

Szufladka