ďťż
Podstrony
|
telcocafeSkonfigurowałem edytor TinyMCE. Pozostaje pytanie, jak zintegrować go ze skryptem CMS. Aby każdy zrozumiał istotę problemu, zacznę od założeń i historii, a potem przejdę do przykładów z kodem i pytań.Skrypt CMS od 2009 roku ma własny edytor, który wstawia partie HTML lub BBCode do <textarea>. API tego edytora: http://pastebin.com/rWLf1KFm Użytkownicy skryptu CMS oczekują edytora WYSIWYG, zatem chcę go wprowadzić. Z założenia miałem stworzyć furtkę dla dowolnego edytora graficznego, ale to nie jest konieczne. Wybór padł na TinyMCE ze względu na mnogość opcji (trochę pomęczyłem się, by wszystko dopieścić). Pozostają kwestie integracji. Edytor WYSIWYG na 80% będzie istniał jako rozszerzenie. Co będzie potrzebne? 1. Opcje konfiguracyjne - przykładowo: http://pastebin.com/3SVYzvqq (linie 5 - 30) 2. Biblioteka - tiny_mce.js + dodatki (to już jest w standardzie) 3. Współpraca edytora z formularzem oraz opcjami: łamanie linii, emotikony, kolorowanie składni... 4. Inicjacja edytora po stronie PHP (np. przez plik edycji newsa) lub JS (np. przez standardowy edytor) 5. Opcjonalnie: emotikony Jak uruchomić edytor WYSIWYG? Kilka możliwych wersji: 1. Automatycznie (zamiast standardowego edytora) po włączeniu opcji w PA 2. Przez redaktora (po kliknięciu czegoś tam) i automatycznie (gdy zapamięta wybór) 3. W nowym oknie (po kliknięciu czegoś tam, ale wariant na 90% irracjonalny) Raczej obstawiam opcję 1 albo 2. Przejdźmy już do ścisłej implementacji. Jak to było dotychczas? Standardowy edytor dołączam tak - w kodzie PHP:$content->addScript(LANG_DIR.'edit.js'); //plik języka $content->addScript('cache/emots.js'); //emotikony $content->addScript('lib/editor.js'); //klasa EditorNatomiast w szablonach:f = document.forms['news']; e = new Editor(f.txt); //pokaż edytor nad polem <textarea> e.emots(); e.protect(); Jak zaimplementować edytor WYSIWYG? Przechodzimy do głównego problemu. Mam co najmniej 2 wyjścia: 1. Stworzyć kompatybilne API - oddzielną klasę Editor, która ładuje WYSIWYG 2. Połączyć edytory - ładować WYSIWYG z poziomu standardowego edytora 3. Obsługiwać WYSIWYG oddzielnie Najrozsądniejsze wydają mi się opcje 1 oraz 2. Wariant 3 wymaga dodania osobnego kodu w szablonach, a opcje TinyMCE i tak trzeba jakoś przekazać (nie będę powielał ciągle tego samego kodu). W przypadku opcji 1 ładowanie edytora z poziomu PHP może przebiegać tak:if( isset( $cfg['useWYSIWYG'] ) ) { $content->addScript('plugins/tinymce/editor.js'); //wrapper $content->addScript('plugins/tinymce/tiny_mce.js'); //tinymce } else { $content->addScript(LANG_DIR.'edit.js'); $content->addScript('cache/emots.js'); $content->addScript('lib/editor.js'); }W skrócie: jeżeli edytor WYSIWYG jest włączony, załaduj nakładkę i dołącz bibliotekę. W przeciwnym razie załaduj standardowy edytor. Plusy: to samo API dla TinyMCE oraz standardowego edytora, opcje edytora w 1 pliku Minusy: dodatkowy (powielany) kod PHP, narzut sposobu dołączania edytora Opcja 2 zakłada, że klasa standardowego edytora (lib/editor.js) dołącza edytor WYSIWYG na żądanie. Może zapamiętać wybór redaktora (czy woli edytor standardowy, czy graficzny) i ładować go od razu. Plusy: możliwość przełączania edytorów, (chyba) brak dodatkowego kodu w PHP Minusy: więcej kodu w pliku lib/editor.js, (chyba) uzależnienie od konkretnego edytora Opcja 3 polega na tym, że nie zachowujemy tego samego API, a edytor jest obsługiwany osobno zarówno w kodzie PHP oraz w szablonach (HTML i JS) - osobne wstawki kodu. Inne opcje? Może znacie lepszy sposób na integrację WYSIWYG z CMS-em? A kogo obchodzi jak w skrypcie sobie wstawisz edytor Wysiwyg? Jak na jakiejś podstronie ma być to ma się pojawić i tyle. Jak to jest zrobione wewnątrz to nikogo nie obchodzi. Poza tym sprawy frontendowe jak wygląd formularza to sprawa do załatwienia w szablonach danej podstrony. Z drugiej strony np. we frameworkach są komponenty do obsługi formularzy i tam np. dla pola tekstowego można określić widżet i to zajmuje się wrzuceniem wszystkiego by np. odpalić edytor WYSIWYG (i też mogą mieć własne mini-szablony). Użytkownik Riklaunim edytował ten post 30 maj 2010, 13:30 |
|||
Sitedesign by AltusUmbrae. |