HTML5 & CSS3

TinyMCE – genialny edytor WYSIWYG na Twojej stronie!

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).

<script type="text/javascript" src="/js/tinymce/jscripts/tiny_mce/tiny_mce.js"></script> <script type="text/javascript"> tinyMCE.init({
         // General options
         mode : "textareas",
         theme : "advanced",
         plugins : "autolink,lists,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
         // Theme options
         theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
         theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
         theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
         theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
         theme_advanced_toolbar_location : "top",
         theme_advanced_toolbar_align : "left",
         theme_advanced_statusbar_location : "bottom",
         theme_advanced_resizing : true,
         // Skin options
         skin : "o2k7",
         skin_variant : "silver",
         // Example content CSS (should be your site CSS)
         content_css : "css/example.css",
         // Drop lists for link/image/media/template dialogs
         template_external_list_url : "js/template_list.js",
         external_link_list_url : "js/link_list.js",
         external_image_list_url : "js/image_list.js",
         media_external_list_url : "js/media_list.js",
         // Replace values for the template plugin
         template_replace_values : {
                 username : "Some User",
                 staffid : "991234"
         } }); </script>

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:

language : "pl",

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.

entity_encoding : "raw"

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

komentarzy 6

  • Awatar
    viktor

    15 sierpnia 2012 13:22

    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.

    Odpowiedz
    • Awatar
      Michał Kortas

      15 sierpnia 2012 14:06

      Dzięki serdeczne za wskazówkę. Każda porada jest na wagę złota, a o tym triku nie wiedziałem.

      Odpowiedz
  • Awatar
    kondrad

    13 lutego 2013 19:29

    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.

    Odpowiedz
  • Awatar
    mati

    30 marca 2013 05:06

    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ź.

    Odpowiedz
    • Awatar
      Michał Kortas

      30 marca 2013 09:20

      Witam. DEMO on-line znajduje się na stronie TinyMCE. Co do dodawania obrazków – trzeba podłączyć dodatkowy komponent. Z YouTube natomiast nie wiem, jak sprawa wygląda.

      Odpowiedz
  • Awatar
    Adrian

    12 sierpnia 2014 21:19

    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?

    Odpowiedz

Zostaw odpowiedź