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 <textarea> w poszczególnych modułach panelu administracyjnego stworzonego przy użyciu admin generatora. Zapraszam do lektury.
Fotografia: CalEvans, CC-BY-SA.
Wstęp: Przygotowanie projektu do integracji.
Aby zintegrować CKEditor z naszym panelem administracyjnym potrzebujemy następujących składników:
- biblioteki CKEditor [w momencie pisania artykułu wersja 3.6],
- projektu w symfony jeszcze bez wygenerowanej aplikacji panelu.
Zakładam, że potraficie wygenerować sobie projekt w symfony. ;] A więc, mając takie rzeczy, wygenerujmy aplikację „backend”:
php symfony generate:app backend
Przypuśćmy, że będziemy operować na następującym modelu:
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)
Będziemy potrzebowali klas modelu dla podanego wyżej kodu, a więc:
php symfony doctrine:build --all-classes
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:
php symfony doctrine:generate-admin backend page
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.
symfony: Integracja CKEditora z generatorem panelu administracyjnego.
Aby zintegrować CKEditor z panelem administracyjnym, a właściwie podmienić pole <textarea> na jego instancję, musimy wykonać dwa [!] kroki:
Do pliku view.yml aplikacji backend należy dodać wpis pozwalający na załadowanie pliku skryptu [/apps/backend/config/view.yml]:
javascripts: [/js/ckeditor/ckeditor.js]
Wygląd pliku po całej akcji:
# 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
Dzięki temu edytor zostanie załadowany [w sekcji <head> dokumentu znajdzie się odpowiedni znacznik <script>] bez ingerencji w layout strony.
Musimy także wyedytować plik generator.yml znajdujący się w katalogu modułu aplikacji [apps/backend/modules/page/config/generator.yml]:
form:
fields:
content:
attributes:
class: ckeditor
Cały plik:
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: ~
Spowoduje to dodanie klasy „ckeditor” do pola „content”, dzięki czemu CKEditor w domyślnych ustawieniach zidentyfikuje pole jako „swoje” i dokona odpowiedniej podmiany.
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.
Warto przeczytać.
Trwa ładowanie…
Pingback: CKEditor: Usuwanie paragrafu <p> otaczającego zawartość edytora. « Tomasz Kowalczyk
Nie można ręcznie dopisać tych wierszy w pliku generator.yml bo parser zwraca błąd,a same wiersze w pliku są koloru czerwonego..??
@gekko: Nie wiem do końca o o czym mówisz, ale jeśli parser tego nie puszcza, to raczej coś zepsułeś z formatowaniem tego pliku YAMLa. :) Na pewno dobrze ustawiłeś wszystkie wcięcia i nie użyłeś nigdzie znaku tabulacji?
CodeRetreat 2011: Na miejsca, gotów…