Piszemy prosty plugin TinyMCE – wstawianie kodu
TinyMCE jest jednym z najpopularniejszych i największych edytorów WYSIWYG stosowanych w systemach zarządzania treścią. Mimo swoich ogromnych możliwości, z czasem może zabraknąć nam pewnej funkcjonalności, która znacznie poprawiałaby pracę z naszym systemem. Dobrym przykładem takiego rozwiązania, jest menadżer obrazków. Możemy wybrać płatny plugin stworzony przez twórców TinyMCE, skorzystać z jednego udostępnionego przez innych użytkowników, lub napisać własny i dostosować do indywidualnych potrzeb. Menadżer obrazków, może być trochę zbyt skomplikowanym przykładem dla osób zaczynających przygodę z TinyMCE, dlatego postanowiłem pokazać podstawy tworzenia pluginów na bardzo prostym przykładzie: wyświetlanie kodu w naszych artykułach.
Przygotowanie plików i folderów
Wychodzę z założenia, że jeżeli chcesz napisać plugin do TinyMCE, to edytor jest zainstalowany i podpięty do swojej strony. W katalogu tiny_mce/plugins tworzymy katalog insertcode i przegrajmy do niego zawartość katalogu example.
W katalogu mamy następujące pliki i foldery:
- katalog img – opcjonalny folder na pliki graficzne, w nim będziemy przechowywać ikonę naszego pluginu
- katalog js – może zawierać pliki z naszymi skryptami, w przypadku skomplikowanych skryptów warto logikę działania skryptu zamieścić w osobnym pliku, ale ponieważ nasz przykład jest bardzo prosty, cały skrypt będzie zamieszczony w pliku dialog.html
- katalog lang – zawiera wersje językowe dla naszego pluginu – opcjonalny.
- plik dialog.html – plik w którym będzie strona otwierana przez nasz plugin, tutaj umieszcza się różnego rodzaje formularze, listy wyboru, przyciski itp.
- pliki editor_plugin_src.js i editor_plugin.js – pliki odpowiedzialne za inicjacje wtyczki, istotny jest tylko plik editor_plugin.js, który powinien zawierać skompresowaną zawartość pliku źródłowego (editor_plugin_src.js), ja proponuje przenieść zawartość pliku z źródłem do editor_plugin.js.
Plik editor_plugin.js
Plik ten nie jest bardzo skomplikowane i co najważniejsze w każdym pluginie wygląda podobnie. Poniżej przedstawiam listing (wraz z komentarzami) pliku z tworzonej przez nas wtyczki.
(function() {
tinymce.create('tinymce.plugins.CodePlugin', {
// funkcja uruchamiania podczas wczytywania wtyczki
init : function(ed, url) {
//tworzymy funkcje odpowiedzialna za utworzenie okna popup
ed.addCommand('mceCode', function() {
ed.windowManager.open({
file : url + '/dialog.html', //sciezka z zawartoscia okna
width : 560,
height : 400
});
});
//tworzymy przycisk uruchumiający popup
ed.addButton('insertcode', {
title : 'Wstaw kod na strone',
cmd : 'mceCode', //metoda wykonywana po nacisnieciu przycisku
image : url + '/img/insertcode.png' //sciezka do obrazka
});
}// end init
}); //end tinymce.create()
// Rejestrujemy plugin
tinymce.PluginManager.add('insertcode', tinymce.plugins.CodePlugin);
})();Jak widać kod nie jest długi. Tworzy prosty obiekt tinymce.plugins.CodePlugin, który zawiera metodę init uruchamianą przy rejestracji wtyczki (ostatnia linijka). Podczas inicjacji tworzony jest przycisk o danym identyfikatorze (insertcode), który po kliknięciu uruchamia komendę mceCode, odpowiedzialną za otworzenie okna popup z naszym pluginem. W naszym przypadku w metodzie mceCode wskazujemy na plik dialog.html, ale może to być również skrypt php lub innego języka skryptowego.
Powyższy kod, w większości przypadków, wystarczy do napisania prostych wtyczek na własne potrzeby. Jeżeli ktoś chciałby poszerzyć swoją wiedzę odsyłam do dokumentacji TinyMCE i jego API.
Plik dialog.html
Plik ten zawiera kod strony otwieranej przy wywołaniu naszej wtyczki. Jest to standardowy plik html, w którym możemy stworzyć potrzebny dla nas formularz. Poniżej przedstawiam listing zamieszony w sekcji body naszego pliku.
<h1>Wstaw kod:</h1>
<textarea id="content" cols="" rows=""></textarea>
<div class="mceActionPanel">
<div style="float: left">
<input type="button" id="insert" name="insert" value="{#insert}" onclick="parse();" />
</div>
<div style="float: right">
<input type="button" id="cancel" name="cancel" value="{#cancel}" onclick="tinyMCEPopup.close();" />
</div>
</div>Kod nie wyróżnia się niczym specjalnym. Jedno pole texarea na kod, który zostanie sparsowany i przekazany do naszego edytora, oraz dwa przycisk:
- Anuluj – zamyka nasze okno poprzez metodę tinyMCEPopup.close();
- Wstaw – dodaje zawartość pola do edytora, poprzez wykonanie funkcji parse(); którą omówimy poniżej.
Nadszedł czas na najważniejszą część pluginu, czyli kod javascript odpowiedzialny za wykonanie oczekiwanych przez nas czynności i wstawienie zawartości textarea do naszego edytora.
function parse(){
var content = document.getElementById('content').value;
content = content.replace(/\t/g, ' ');
content = content.replace(/&/g, '&');
content = content.replace(/\</g, '<');
content = content.replace(/"/g, '"');
var html = '<pre><code>'+content+'</code></pre>';
tinyMCEPopup.editor.execCommand('mceInsertContent', false, html);
tinyMCEPopup.close();
return false;
}Pierwsza linia odpowiada za pobranie zawartości wpisanej przez nas do pola tekstowego. Następnie przy pomocy wyrażeń regularnych zamieniamy niektóre znaki na odpowiadające im encje, tak aby wyświetlały się prawidłowo na naszej stronie. W zmiennej html przygotowujemy ciąg znaków jaki chcemy zwrócić do TinyMCE. W naszym przypadku otaczamy nasz kod tagami code i pre. Następnie wywołujemy funkcje mceInsertContent odpowiedzialną za wstawienie kodu do okna edytora. Ostatnia linijka odpowiada za zamknięcie okna pluginu. Ponieważ kod tej wtyczki jest bardzo prosty i zawiera zaledwie pare linijek umieściłem go w pliku dialog.html. Jeżeli będziecie projektować trochę bardziej skomplikowane wtyczki zachęcam do rozdzielania swojego kodu JavaScript od HTML, umieszczając skrypty w pliku js.
Inicjacja pluginu w TinyMCE
Po wykonaniu poprzednich kroków w TinyMCE, mamy katalog z naszym pluginem, w którym zawarte są 3 pliki: img/insertcode.png, dialog.html, editor_plugin.js. Ostatnim krokiem jest dodanie naszej wtyczki do instancji edytora w naszej stronie. Aby to zrobić wystarczy dodać identyfikator naszego pluginu, w moim przypadku insertcode, do parametrów plugins i theme_advanced_buttons1:
plugins :"table,style,searchreplace,paste,pagebreak,insertcode",
theme_advanced_buttons1 : "insertcode,open,cut,copy,paste,pastetext",Pierwszy informuje edytor aby używał naszego pluginu, drugi określa miejsce w którym znajdzie się nasza ikonka odpowiedzialna za działanie wtyczki. W tym przypadku pierwsza ikona na górnej listwie.
Co dalej?
Tym sposobem zrobiliśmy swój pierwszy plugin do tinyMCE (demo). Oczywiście jest to bardzo prosta wtyczka, ale chodziło o to aby pokazać ogólne mechanizmy występujące przy tworzeniu tego typu funkcjonalności. Zachęcam do dalszych eksperymentów z TinyMCE. Jako dodatkowe materiały polecam dokumentacje oraz forum na stronie producenta. Zachęcam także do przeglądania kodu innych wtyczek, zapewniam że możemy z nich wyciągnąć sporo interesujących informacji.
DyskusjaKomentarze: 13
czy mógłbyś naisać jeszcze jak zrobić żeby textarea było odpowiednio sformatowane? Chodzi mi o tło, obramowanie, zawijanie wierszy ..
Wiem jak to zrobić w css'ie ale gdzie powinienem takie parametry zdefiniować?
Wystarczyło by coś takiego jak w Twoim demo gdzie text pojawia się w na szarym tle.
z góry bardzo dziękuję
Jeżeli zaś chodzi o styl okienka pop-up pojawiającego się po kliknięciu w ikonę pluginu to jego zawartość jest opisane w pliku dialog.html. I w tym pliku albo dodajemy odpowiedni plik ze stylami jak w przypadku normalnego kodu HTML, albo jeżeli style są krótkie tak jak w moim przypadku to możemy to zrobić wstawiając w sekcji head pliku dialog.html odpowiednie style np.:
Cieszę się również, że artykuł się podobał i komuś przydał.
Niestety mam jeszcze jeden problem. Jeżeli za pośrednictwem Twojego pluginu dodaje do bazy jakiś kod np. to tekst trafia do bazy jako (<?php phpinfo(); ?>) i poprawnie wyświetla się na stronie.
Problem pojawia się w momencie gdy za pomocą textarea i TinyMCE chcę przeedytować wcześniej wprowadzony kod. W momencie edycji nie pojawia się już w tinymce kod umieszczony pomiędzy "" tak jakby tinymce kasowalo wszystko co się zawiera w trójkątnych nawiasach.
Jak sobie z tym poradzić? mógłbyś mi jeszcze z tym pomóc?
mam do pana pytania odnośnie dodawania pluginu do Tiny MCE, wszystko zrobiłem tak jak z pana tutorialem tylko nie wiem gdzie dodać:
-plugins
-theme_advanced_buttons1 :
do jakiego pliku i w jakie konkretne miejsce. Próbowałem dodawać do pliku tinymce.php ale później tiny MCE nie działał i w tych linijkach w których próbowałem dodać ten kod to wywalał mi błąd.
Będę wdzięczny za wytłumaczenie gdzie trzeba to umieścić i w którym miejscu kodu.
Pozdrawiam i życzę udanego weekendu.
Z tego co wiem nie ma opcji, która w prosty sposób rozwiązuje ten problem. Zachęcam jednak do własnych eksperymentów, przydatna okazać się może metoda getAttrib, dzięki której można pobrać zawartość wskazanego pola (wstawiony kod), następnie pewnie trzeba będzie pozamieniać za pomocą wyrażeń regularnych encje na właściwe znaki i wstawić treść w textarea w naszym pluginie, wszystko to jest do zrobienia w JavaScript.
Dodaj komentarz Komentarze są moderowane, a przy linkach używane jest rel="nofollow". Prosimy o nie reklamowanie i nie spamowanie w komentarzach.
Linki tworzone za pomocą tagu [url] np: [url=www.xyz.pl]xyz[/url]
Źródła za pomoc tagu [code] z wskazaniem języka np. [code=php] echo [/code]