TinyMCE – genialny edytor WYSIWYG na Twojej stronie!


2 sierpnia 2011 / Michał Kortas


Po wakacyjnej przerwie w dodawaniu nowych artykułów wracamy ponownie. W dzisiejszym poradniku dowiesz się, jak wstawić na swojej witrynie bardzo poręczny edytor WYSIWYG, jakim jest TinyMCE. Po co nam to? Głównie dla wygody obsługi, bo chociaż osobiście jestem za ręcznym edytowaniem kodu, nie wszyscy muszą się na tym znać. Jeśli zastosujemy to rozwiązanie, pisanie i formatowanie tekstów będzie Wordowsko proste.

Do lamusa będą mogły odejść znaczniki BBcode, czy nawet HTML. Wszystko zamykać się będzie w zwykłym klikaniu myszką, ew używaniu skrótów klawiszowych.

Edytor TinyMCE, do poprawnego działania, wykorzystuje JavaScript lub/i biblioteki jQuery. Sama instalacja jest dziecinnie prosta, o czym zaraz się przekonamy.

Pobieranie archiwum edytora

Pierwszym krokiem będzie popranie spakowanych plików rdzennych TinyMCE. W tym celu odwiedzamy stronę tinymce.moxiecode.com, a następnie klikamy w duży, zielony przycisk DOWNLOAD.

Następnie wybieramy najnowszą, dostępną wersję. W naszym przypadku będzie to TinyMCE 3.4.3.2.

Instalacja na witrynie

Pobrane archiwum należy rozpakować i wysłać na serwer. Następnie, w sekcji head wstawiamy następujący kod (uruchomi on edytor w najbardziej rozszerzonej wersji).

Odwołanie w pierwszej linijce do pliku tiny_mce.js musi być oczywiście poprawne! Od tego czasu każde pole textarea posiadać będzie rozbudowany edytor tekstu.

Kilka ułatwień obsługi

Spolszczenie edytora

Aby używać polskich napisów i podpowiedzi powinniśmy ściągnąć nasz rodzimy język. Możemy to zrobić pod adresem tinymce.moxiecode.com. Zaznaczamy na liście język polski i pobieramy.

Następnie wrzucamy wszystkie pliki z archiwum do naszej paczki TinyMCE. Teraz pozostaje nam tylko wywołanie odpowiedniego języka. Do skryptu w ramach head dodajemy:

Poprawne kodowanie polskich znaków

Edytor TinyMCE źle zapisuje do bazy danych niektóre polskie znaki, kodując je za pomocą nielubianych ‚krzaczków’. Co zrobić aby tego uniknąć? Wystarczy posłużyć się kodem, który wklejamy do skryptu.

To tylko kilka słów opisu tego niezwykle rozbudowanego edytora. Polecam własne eksperymenty.



6 odpowiedzi na “TinyMCE – genialny edytor WYSIWYG na Twojej stronie!”

  1. viktor pisze:

    Cześć,
    Warto też dodać, że należy zwrócić uwagę na magic_quotes_gpc, jeżeli są ON, to należy przed zapisem do bazy wyczyścić „magiczne cytaty” za pomocą stripslashes($_POST[‚zmienna’]) w przeciwnym wypadku każda edycja powoduje zwielokrotnienie „magicznych cytatów” w tekście.

  2. kondrad pisze:

    Witam, możliwości tego edytora są niezwykle szerokie. Czy znacie jakiś darmowy (najlepiej do zastosowań komercyjnych) plugin do wstawiania obrazków do artykułu z dysku lub z obrazków na serwerze? Bardzo proszę o pomoc.

  3. mati pisze:

    Witam, nie miałem okazji testować tego edytora. W sieci niestety nie znalazłem dema aby móc zobaczyć jak on działa… no i lipa, może znasz link gdzie można to przetestować poprzez wprowadzenie tekstu… ?

    Jeżeli nie to może znasz odpowiedzi na moje pytania:

    Czy jest upload zdjęć z dysku na serwer podczas tworzenia artykułu czy tylko poprzez podanie linka?

    Czy jest możliwość umieszczenia filmu np. z YouTube? jeżeli tak to czy konieczne jest wklejenie kodu iframe, a czy wystarczy link podać?

    Dzięki za odpowiedź.

  4. Adrian pisze:

    Mam prośbę.
    Czy mógłbyś powiedzieć jak dodać edytor do tego skryptu:

    http://www.forumweb.pl/porady-i-tutoriale-www/php-panel-administracyjny-edytor-stron/94771#94771

    Czy jest ogólnie szansa dodania do niego jakiegokolwiek edytora?

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *