Strona główna › Ulepszamy Drupala - edytor WYSIWYG TinyMCE z zarządzaniem obrazkami przez IMCE.

Ulepszamy Drupala - edytor WYSIWYG TinyMCE z zarządzaniem obrazkami przez IMCE.

tagi:

TinyMCE z IMCE w Drupalu
Często spotykamy się z zaawansowanymi edytorami tekstowymi WYSIWYG (What You See Is What You Get w dosłownym tłumaczeniu To Co Widzisz Jest Tym Co Otrzymasz), które pozwalają nam edytować i widzieć zmiany w trybie rzeczywistym – tak jak ma to miejsce np. w OpenOffice, czy innym pakiecie biurowym. Jednym z kilku wiodących darmowych edytorów jest TinyMCE. Jest to produkt Open Source wydany na licencji LGPL przez Moxiecode Systems AB. W Drupalu integracja z TinyMCE jest dziecinnie prosta a dodając moduł IMCE do zarządzania obrazkami dostajemy do dyspozycji naprawdę potężne narzędzie, wygodne przede wszystkim.

Naszą przygodę proponuje zacząć od pobrania modułów IMCE oraz TinyMCE ze strony Drupala. Jeżeli chodzi o edytor to należy jeszcze pobrać właściwy kod ze strony producenta, ponieważ moduł do Drupala tylko integruje TinyMCE z CMSem. Po zainstalowaniu obydwóch modułów (nie będę się wdawał w szczegóły, jest to bardzo proste) należy oczywiście przypisać odpowiednie prawa wybranym rangą. TinyMCE wprowadza dwa nowe przywileje:

  • access tinymce – który nadany wybranej randze zezwala na używanie TinyMCE, o ile jest strwożony profil edytora z wybraną rangą.
  • administer tinymce – to oczywiście administracja modułem

natomiast IMCE nie wprowadza nowych uprawnień.

Konfiguracja TinyMCEPrzejdźmy teraz do konfiguracji edytora. Na początku należy stworzyć profil edytora (admin/settings/tinymce/add).
W zakładce Basic jak nazwa wskazuje konfigurujemy podstawowe opcje takie jak np. nazwa profilu lub rangi dla których obowiązuje (tylko te które mają uprawnienia access tinymce i nie były jeszcze użyte w żadnym profilu TinyMCE).
Druga zakładka niesie ze sobą konfiguracje stron na których edytor ma być wyświetlany.
Następna zakładka – Buttons and plugins to konfiguracja włączonych wtyczek i opcji edytora. Jeżeli żadna z opcji nie będzie włączona to edytor włączy domyślne opcje i wtyczki. Warto wspomnieć tutaj o wtyczce InlinePopups dzięki której nie pojawiają nam się popupy, tylko pojawia się nowa warstwa przykrywająca stronę – taki lightbox.
Editor appearance zawiera w sobie ustawienia dotyczące wyglądu takie jak umiejscowienie przycisków, czy włączenie opcji rozszerzania edytora.
Przed ostatnia kategoria konfiguracyjna dotyczy opcji zapisywania. Można tutaj ustawić m.in. walidację HTML czy usuwanie pustych linii.
Zaś w ostatniej zakładce CSS możemy ustawić adres do alternatywnego stylu CSS który zostanie użyty przez edytor do formatowania podczas edycji.

Konfiguracja IMCE

Jeżeli chodzi o konfigurację IMCE przebiega ona w podobny sposób, również operujemy na profilach które są przypisane do konkretnych ról. Możemy konfigurować m.in. ilość udostępnionego miejsca na wrzucane obrazki przez użytkowników, maksymalne rozmiary obrazków a nawet katalogi do których będą ładowane obrazki.

Integracja TinyMCE z IMCE:

Przejdźmy teraz do integracji IMCE z TinyMCE. Po zainstalowaniu i skonfigurowaniu obydwóch modułów opiera się ona jedynie na dodaniu jednej funkcji do pliku template.php w aktywnej sktórce.

  1. /*
  2. * Integration IMCE with TinyMCE
  3. */
  4. function phptemplate_tinymce_theme($init, $textarea_name, $theme_name, $is_running) {
  5.   static $access, $integrated;
  6.   if (!isset($access)) {
  7.     $access = function_exists('imce_access') && imce_access();
  8.   }
  9.   $init = theme_tinymce_theme($init, $textarea_name, $theme_name, $is_running);
  10.   if ($init && $access) {
  11.     $init['file_browser_callback'] = 'imceImageBrowser';
  12.     if (!isset($integrated)) {
  13.       $integrated = TRUE;
  14.       drupal_add_js("function imceImageBrowser(fid, url, type, win) {win.open(Drupal.settings.basePath +'?q=imce&app=TinyMCE|url@'+ fid, '', 'width=760,height=560,resizable=1');}", 'inline');
  15.     }
  16.   }
  17.   return $init;
  18. }

oprócz tego należy włączyć wtyczkę image w profilu TinyMCE i usunąć pliki z pamięci podręcznej (admin/settings/performance).

Wstaw obraz - TinyMCE
Wstawianie obrazka przy użyciu TinyMCE

Teraz klikając na dodanie obrazka w edytorze pojawi nam się okienko (powyżej) w którym przybył jeden przycisk (oznaczony 1) – właśnie do obsługi IMCE. Moduł ten pozwala nam wysyłać obrazki na stronę, zmieniać ich rozmiary i dodawać je do edytora. Edytor zaś pozwala nam ustawiać pozycje i inne charakterystyczne cechy dla obrazka. (Ciekawe czy istnieje moduł rozszerzający funkcjonalność IMCE o dodawanie znaków wodnych i inne operacje na obrazkach z użyciem GD).

IMCE
Tak wygląda IMCE, w dolnej części (obciętej) są logi oraz miejsce na pojawianie się wybranego obrazka.

Problemy:

Spotkałem się z problemem, kiedy TinyMCE przestawał działać przy włączeniu opcji optymalizacji plików CSS i Java Script w (admin/settings/performance). Jak wiadomo jest to edytor WYSIWYG napisany właśnie w Java Scripcie, jednak moim zdaniem ta opcja zwiększenia wydajności nie powinna mieć wpływy na jego działanie. Drugim problemem było rozszerzanie się paska z przyciskami tak, że edytor wylewał się poza swoją warstwę.

Niepoprawne wyświetlanieNiepoprawne wyświetlanie Prawidłowe wyświetlaniePoprawne wyświetlanie

Rozwiązanie oczywiście znalazłem na stronie Drupala i wiąże się z manualną edycją modułu tinymce. Dokładnie należy zmienić dwie linijki w pliku tinymce.module. Znajdź linie zaczynające się od [php]$row[][/php] powinny to być 2 linie. Za komentuj je, żeby nie usuwać – dodaj [php]//[/php] lub [php]#[/php] przed [php]$row[][/php]. Następnie dodaj dwie nowe linijki:

  1. $row[] = array( array('justifyleft', 'justifycenter', 'justifyright', 'justifyfull'), array('numlist', 'bullist', 'indent', 'outdent'), array('removeformat'), array('image', 'charmap', 'emotions', 'advhr', 'link', 'unlink'), array('tablecontrols'));
  2.  
  3. $row[] = array( array('fullscreen', 'preview', 'visualaid'), array('undo', 'redo'), array('selectall', 'cut', 'copy', 'paste', 'pastetext', 'pasteword'), array('bold', 'italic', 'underline', 'strikethrough', 'sup', 'sub'), array('fontselect', 'fontsizeselect'), array('forecolor', 'forecolorpicker', 'backcolor','backcolorpicker'));

Znalezione rozwiązanie to nic innego jak edycja kolejności i ilości pozycji wyświetlanych w poszczególnych liniach paska narzędziowego. Działa wyśmienicie.

Zakończenie:

Ideą tego wpisu jest zachęcenie do używania TinyMCE. W żadnym wypadku nie jest to artykuł w stylu krok, po kroku. Moim zdaniem nie o to chodzi. Moim zamysłem było przedstawienie podstaw, oraz rozwiązań dla spotkanych przeze mnie problemów.
Jest to pierwszy taki wpis - czysto tematyczny mam nadzieje że mało chaotyczny :-). Teraz powinno być tylko lepiej. Muszę przyznać że przygotowanie takiego wpisu wymaga trochę czasu, mało tego trzeba znaleźć jakiś temat - w końcu o byle czym nie będe pisał :). Wpisy tego typu będą się pojawiały częściej, jak pisałem na początku nowej odsłony - tym razem stawiam na treść.

quex, pt., 14/11/2008 - 02:06

Odpowiedzi

Dodaj nową odpowiedź

Zawartość pola nie będzie udostępniana publicznie.
  • Adresy internetowe są automatycznie zamieniane w odnośniki, które można kliknąć.
  • Dozwolone znaczniki HTML: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Znaki końca linii i akapitu dodawane są automatycznie.
  • Dostępne jest formatowanie fragmentów kodu źródłowego używając tagów: <code>, <blockcode>, <bash>, <c>, <cpp>, <css>, <drupal5>, <drupal6>, <html>, <java>, <js>, <perl>, <php>, <python>, <ruby>, <sql>.

Więcej informacji na temat formatowania

  ___   ___    ___   __   __  __  __ 
 | __| |   \  |   \  \ \ / / |  \/  |
 | _|  | |) | | |) |  \ V /  | |\/| |
 |_|   |___/  |___/    |_|   |_|  |_|
Proszę wpisać litery (tylko wielkie litery) z napisu w stylu ASCII.