symfony: Integracja CKEditora z generatorem panelu administracyjnego.

This post comes from the first version of this blog.
Please send me an email if anything needs an update. Thanks!

Framework symfony to bezsprzecznie jeden z najlepszych frameworków, jakie miałem okazję testować. Zarówno poziom zaawansowania kodu, jak też łatwość tworzenia nowych funkcjonalności w stronach internetowych czynią go naprawdę genialnym narzędziem w rękach programisty. W dzisiejszym wpisie chciałbym pokazać, jak w prosty sposób zintegrować edytor WYSIWYG - CKEditor z polami w poszczególnych modułach panelu administracyjnego stworzonego przy użyciu admin generatora. Zapraszam do lektury.</p> <p>Fotografia: <a href="http://www.flickr.com/photos/calevans/419283552/">CalEvans</a>, CC-BY-SA.</p> <h2>Wstęp: Przygotowanie projektu do integracji.</h2> Aby zintegrować CKEditor z naszym panelem administracyjnym potrzebujemy następujących składników: <ul> <li><a href="http://ckeditor.com/download">biblioteki CKEditor</a> [w momencie pisania artykułu wersja 3.6],</li> <li>projektu w symfony jeszcze bez wygenerowanej aplikacji panelu.</li> </ul> Zakładam, że potraficie wygenerować sobie projekt w symfony. ;] A więc, mając takie rzeczy, wygenerujmy aplikację "backend": <pre tabindex="0"><code>php symfony generate:app backend </code></pre><p>Przypuśćmy, że będziemy operować na następującym modelu:</p> <pre tabindex="0"><code>page: tableName: pages columns: id: type: integer(4) primary: true notnull: true autoincrement: true name: type: string(255) default: null slug: type: string(255) unique: true default: null content: type: clob(65535) default: null icon: type: string(255) </code></pre><p>Będziemy potrzebowali klas modelu dla podanego wyżej kodu, a więc:</p> <pre tabindex="0"><code>php symfony doctrine:build --all-classes </code></pre><p>Co załatwia kwestię generowania samego kodu. W tym momencie potrzebujemy już tylko modułu w aplikacji backend, który będzie zarządzał modelem Page:</p> <pre tabindex="0"><code>php symfony doctrine:generate-admin backend page </code></pre><p>I voila! Mamy już wszystko, czego potrzebowaliśmy. Kiedy klikniemy edycję danego rekordu, zamiast ładnego edytora pojawia nam się jednak zwykłe pole <textarea>. Zobaczmy więc, jak je podmienić na coś lepszego.</p> <h2>symfony: Integracja CKEditora z generatorem panelu administracyjnego.</h2> Aby zintegrować CKEditor z panelem administracyjnym, a właściwie podmienić pole <textarea> na jego instancję, musimy wykonać dwa [!] kroki: <p>Do pliku view.yml aplikacji backend należy dodać wpis pozwalający na załadowanie pliku skryptu [/apps/backend/config/view.yml]:</p> <pre tabindex="0"><code>javascripts: [/js/ckeditor/ckeditor.js] </code></pre><p>Wygląd pliku po całej akcji:</p> <pre tabindex="0"><code># You can find more information about this file on the symfony website: # http://www.symfony-project.org/reference/1_4/en/13-View default: http_metas: content-type: text/html metas: #title: symfony project #description: symfony project #keywords: symfony, project #language: en #robots: index, follow stylesheets: [main.css] javascripts: [/js/ckeditor/ckeditor.js] has_layout: true layout: layout </code></pre><p>Dzięki temu edytor zostanie załadowany [w sekcji <head> dokumentu znajdzie się odpowiedni znacznik <script>] bez ingerencji w layout strony.</p> <p>Musimy także wyedytować plik generator.yml znajdujący się w katalogu modułu aplikacji [apps/backend/modules/page/config/generator.yml]:</p> <pre tabindex="0"><code> form: fields: content: attributes: class: ckeditor </code></pre><p>Cały plik:</p> <pre tabindex="0"><code>generator: class: sfDoctrineGenerator param: model_class: Page theme: admin non_verbose_templates: true with_show: false singular: ~ plural: ~ route_prefix: page with_doctrine_route: true actions_base_class: sfActions config: actions: ~ fields: ~ list: display: [id, name, slug, icon] filter: ~ form: fields: content: attributes: class: ckeditor edit: ~ new: ~ </code></pre><p>Spowoduje to dodanie klasy “ckeditor” do pola “content”, dzięki czemu CKEditor w domyślnych ustawieniach zidentyfikuje pole jako “swoje” i dokona odpowiedniej podmiany.</p> <p>I voila! Kiedy odświeżymy stronę edycji danego rekordu, zamiast małego pola <textarea> pojawi nam się piękny, wielofunkcyjny edytor, który z powodzeniem możemy zaprezentować użytkownikowi końcowemu.</p> </div> <div class="share-block"> <a class="share intent">Share on</a> <a href="https://www.facebook.com/sharer/sharer.php?u=http%3a%2f%2fblog.kowalczyk.cc%2f2011%2f05%2f17%2fsymfony-integracja-ckeditora-z-generatorem-panelu-administracyjnego%2f&t=symfony%3a%20Integracja%20CKEditora%20z%20generatorem%20panelu%20administracyjnego." class="share facebook" data-network="facebook">Facebook</a> <a href="https://twitter.com/share?url=http%3a%2f%2fblog.kowalczyk.cc%2f2011%2f05%2f17%2fsymfony-integracja-ckeditora-z-generatorem-panelu-administracyjnego%2f&text=symfony%3a%20Integracja%20CKEditora%20z%20generatorem%20panelu%20administracyjnego.+by+@tmmx:" class="share twitter" data-network="twitter">Twitter</a> <a href="https://www.linkedin.com/shareArticle?mini=true&url=http%3a%2f%2fblog.kowalczyk.cc%2f2011%2f05%2f17%2fsymfony-integracja-ckeditora-z-generatorem-panelu-administracyjnego%2f&title=symfony%3a%20Integracja%20CKEditora%20z%20generatorem%20panelu%20administracyjnego.&source=X" class="share linkedin" data-network="linkedin">LinkedIn</a> <script> (function() { window.addEventListener('click', function(e) { if(!e.target.classList.contains('share') || !e.target.href) { return; } e.preventDefault(); const network = e.target.dataset.network; const networks = { facebook: { width: 600, height: 300 }, twitter: { width: 600, height: 254 }, google: { width: 515, height: 490 }, linkedin: { width: 600, height: 473 } }; window.open(e.target.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=' + networks[network].height + ',width=' + networks[network].width); }); })(); </script> </div> <div class="post-info"> posted in <a class="label label-category" href="http://blog.kowalczyk.cc/category/symfony/">symfony</a> with tags <a class="label label-tag" href="http://blog.kowalczyk.cc/tag/administracja/">administracja</a>, <a class="label label-tag" href="http://blog.kowalczyk.cc/tag/symfony/">Symfony</a>, <a class="label label-tag" href="http://blog.kowalczyk.cc/tag/project/">project</a>, <a class="label label-tag" href="http://blog.kowalczyk.cc/tag/js/">js</a>, <a class="label label-tag" href="http://blog.kowalczyk.cc/tag/panel/">panel</a>, <a class="label label-tag" href="http://blog.kowalczyk.cc/tag/php/">php</a>, <a class="label label-tag" href="http://blog.kowalczyk.cc/tag/javascript/">javascript</a>, <a class="label label-tag" href="http://blog.kowalczyk.cc/tag/generator/">generator</a>, <a class="label label-tag" href="http://blog.kowalczyk.cc/tag/config/">config</a>, <a class="label label-tag" href="http://blog.kowalczyk.cc/tag/textarea/">textarea</a>, <a class="label label-tag" href="http://blog.kowalczyk.cc/tag/yaml/">yaml</a>, <a class="label label-tag" href="http://blog.kowalczyk.cc/tag/admin/">admin</a>, <a class="label label-tag" href="http://blog.kowalczyk.cc/tag/integracja/">integracja</a>, <a class="label label-tag" href="http://blog.kowalczyk.cc/tag/integration/">integration</a>, <a class="label label-tag" href="http://blog.kowalczyk.cc/tag/view.tml/">view.tml</a>, <a class="label label-tag" href="http://blog.kowalczyk.cc/tag/generator.yml/">generator.yml</a>, <a class="label label-tag" href="http://blog.kowalczyk.cc/tag/backend/">backend</a>, <a class="label label-tag" href="http://blog.kowalczyk.cc/tag/ckeditor/">ckeditor</a>, <a class="label label-tag" href="http://blog.kowalczyk.cc/tag/model/">model</a> </div> </div> <div class="nav"> <div class="nav-item nav-prev"><a href="http://blog.kowalczyk.cc/2011/05/15/linkdump-41-cysysy/">🡸</a></div> <div class="nav-item"><a href="http://kowalczyk.cc">Tomasz Kowalczyk</a> ©2009 - 2022</div> <div class="nav-item nav-next"><a href="http://blog.kowalczyk.cc/2011/05/20/ckeditor-usuwanie-paragrafu-p-otaczajacego-zawartosc-edytora/">🡺</a></div> </div> <div class="footer"></div> <script> (() => { let theme = localStorage.getItem('theme') || 'theme-light'; document.body.classList.add(theme); localStorage.setItem('theme', theme); document.getElementById('toggleTheme').addEventListener('click', () => { const target = theme === 'theme-light' ? 'theme-dark' : 'theme-light'; document.body.classList.remove(theme); document.body.classList.add(target); localStorage.setItem('theme', target); theme = target; }); })(); </script> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-10653493-2', 'auto'); ga('send', 'pageview'); </script> </body> </html>