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).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <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:
1 | 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.
1 | entity_encoding : "raw" |
To tylko kilka słów opisu tego niezwykle rozbudowanego edytora. Polecam własne eksperymenty.
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.
Dzięki serdeczne za wskazówkę. Każda porada jest na wagę złota, a o tym triku nie wiedziałem.
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.
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ź.
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.
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?