CKEditor: Usuwanie paragrafu <p> otaczającego zawartość edytora.

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 <p> 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 <p>. 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:

/*
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ę:

config.enterMode = CKEDITOR.ENTER_BR;

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

/*
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 <br />, a w praktyce jest to po prostu pusty string. Voila, kolejny problem rozwiązany.

Warto przeczytać.