Piszemy prosty plugin TinyMCE – wstawianie kodu

tinycode-title.png

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, '&amp;');
content = content.replace(/\</g, '&lt;');
content = content.replace(/"/g, '&quot;');

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

  • m 05 październik 2010 09:10
    dobre!
  • ADiN 16 listopad 2010 21:56
    A u mnie coś ciekawego :/ Jak dodam plugin to Tiny przestaje działać i się po prostu nie wyświetla...No i oczywiście pochwała za tuta..świetna sprawa :)
    • Krzysztof Bachula 17 listopad 2010 10:31
      Sprawdź czy FireBug pokazuje jakieś błędy JavaScript? Jeżeli ciągle będziesz miał problemy, to wrzuć może plugin na jakiś serwer do ściągnięcia, to zobaczę czy u mnie zadziała. W ten sposób może coś wymyślimy.
  • zielony 16 luty 2011 13:42
    super artykuł, Wielkie dzięki,
    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ę
    • Krzysztof Bachula 16 luty 2011 19:09
      Jeżeli chodzi o styl wstawianego przez plugin kodu to ustawia się to wskazując na odpowiedni plik css podczas inicjacji TinyMCE:
      tinyMCE.init({
      theme : "advanced",
      mode: "exact",
      //tutaj sciezka do styli identycznych jak na stronie glownej serwisu
      content_css : "css/tiny_style.css?time="+new Date().getTime(),
      (...)
      });
      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.:
       <style type="text/css">
      #content{display: block;clear:both;width:500px;height: 300px;font-size: 12px;}
      </style>
      Cieszę się również, że artykuł się podobał i komuś przydał.
  • zielony 19 luty 2011 17:39
    Dziekuję bardzo za pomoc, teraz z css'em mam już wszystko OK,

    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?
  • Tomek 14 maj 2011 13:00
    Witam Panie Krzysztofie,

    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.
    • Krzysztof Bachula 17 maj 2011 10:02
      Informacją tą należy dodać w kodzie tam gdzie został zainicjowany TinyMCE, czyli tam gdzie znajdzie Pan kod:
      <script language="javascript" type="text/javascript">
      tinyMCE.init({
      theme : "advanced",
      mode: "exact",
      entity_encoding:"",
      elements : "example",
      language : "pl",
      relative_urls : true,
      content_css : "css/tiny_style.css?time="+new Date().getTime(),
      plugins : "table,style,searchreplace,paste,pagebreak,insertcode",
      theme_advanced_buttons1 : "insertcode,open,cut,copy,paste
      itd..
  • sławek 06 lipiec 2011 12:59
    plugin ladnie wstawia kod html za pierwszym razem, przy ponownym wczytaniu tinymce juz nie czyta kodu jako encje tylko zwykly html co powoduje ze to co jest w znacznikach
    wyswietla sie jak zwykly html, mozna to obejsc ? moze trzeba wlaczyc w tinymce dodatkowa opcje o ktorej nie wiem ?
    • Krzysztof Bachula 07 lipiec 2011 19:12
      Jest tak, ponieważ zadaniem tego artykułu, było tylko pokazanie podstawowych informacji potrzebnych do stworzenia pluginu do TinyMCE, a nie samo jego stworzenie. Dlatego jest to tylko najprostsza wersja, ze wstawianiem kodu.
      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.
  • Krystian Piątek 31 sierpień 2012 19:15
    Dzięki za bardzo przydatny artykuł. Stanowi fajną bazę do kolejnych eksperymentów. W polskim internecie jest naprawdę nie wiele na ten temat. Pozdrawiam.
  • Prawniczy 08 luty 2018 11:46
    To naprawdę proste :)
  • Seoit 02 czerwiec 2020 15:01
    Bardzo fajny wpis. Cóż, kolejny dowód na to, że im prostsze rozwiązanie tym jest lepsze. Muszę to kiedyś wypróbować. Dzięki za ten artykuł. Pozdrawiam.

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]

Copyright © 2022 Webnote

Projekt i wykonanie: Tworzenie stron internetowych

Dodaj link