TinyMCE - genialny edytor WYSIWYG na Twojej stronie!

Utworzono: wtorek, 02, sierpień 2011 19:27

Michał Kortas

Odsłony: 4773

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.