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

Wtorkowy wpis był poświęcony integracji biblioteki CKEditor z polami formularzy wygenerowanymi poprzez konsolowe polecenia biblioteki “admin generator” frameworka symfony. W ogólnej pracy jest on bardzo przyjemny - nawet pisanie rozszerzeń nie sprawia większych kłopotów ze względu na dobrze zdefiniowany interfejs wtyczek i ogólny porządek w kodzie. Nie znaczy to jednak, że nie ma problemów wcale, stąd dzisiejszy wpis, w którym pokażę, jak poradzić sobie z pewną przypadłością, “z wyboru” wprowadzoną przez programistów edytora, a nie zawsze pożądaną przez użytkowników.

CKEditor: Usuwanie paragrafu

otaczającego zawartość edytora.

Na pewno zastanawiacie się teraz, co może być tą przypadłością. Otóż, jeśli nie korzystamy z funkcji "Pokaż źródło", to jeśli stworzymy instancję CKEditora bez żadnej treści [puste okno zawartości], nie jest ono wcale takie puste, jakby się mogło wydawać. Typowy użytkownik zacznie wypełniać edytor treścią, a następnie zapisze to, co stworzył w bazie danych. Zależnie od użytego przez programistę arkusza CSS strony docelowej, prawdopodobnie mniej lub bardziej zdziwią go dziwne odstępy na górze i dole tejże.

Cały problem polega na tym, że twórcy CKEditora wymyślili sobie, że pusty edytor będzie domyślnie wypełniany znacznikami

. Jeśli koder CSS nie uwzględnił tego w projekcie, czekają na nas wszystkie problemy z tym związane - najważniejszy to oczywiście “rozjechanie” layoutu przez nieuwzględniony kontener paragrafu, domyślnie zawierający odstęp pionowy.

Czy nie można z tym nic zrobić? Otóż, okazuje się, że nie tylko można, ale i trzeba, ponieważ rozwiązanie jest trywialnie proste. W pliku config.js, który domyślnie wygląda tak:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

/*
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/

CKEDITOR.editorConfig = function( config )
{
	// Define changes to default configuration here. For example:
	// config.language = 'fr';
	// config.uiColor = '#AADC6E';
};

należy dodać linijkę:

1

config.enterMode = CKEDITOR.ENTER_BR;

Finalnie cały plik wygląda następująco:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

/*
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/

CKEDITOR.editorConfig = function( config )
{
	// Define changes to default configuration here. For example:
	// config.language = 'fr';
	// config.uiColor = '#AADC6E';
    config.enterMode = CKEDITOR.ENTER_BR;
};

W ten sposób “znacznik wejścia” został w teorii zamieniony na tag przełamania linii
, a w praktyce jest to po prostu pusty string. Voila, kolejny problem rozwiązany.