Integration of CKEditor into SonataAdminBundle

Strictly speaking, this WYSIWYG editor is built in with a “flick of the wrist”. It is only necessary to upload its javascript code to the admin page and add the “ckeditor” class to the required textarea field. But there is one bad reef, about which I wrote in a post.



CKEditor is built into SonataAdminBundle in three simple steps:
')

1. Create your own SonataAdminBundle editing page template

AcmeDemoBundle :: sonata_admin_base_layout.html.twig

{% extends 'SonataAdminBundle::standard_layout.html.twig' %} {% block javascripts %} {{ parent() }} <script src="{{ asset('js/ckeditor/ckeditor.js') }}" type="text/javascript"></script> {% endblock %} 

2. We connect our template in the config.yml configuration file

 sonata_admin: ... templates: layout: AcmeDemoBundle::sonata_admin_base_layout.html.twig 

3. Display the form element with the ckeditor class:

 protected function configureFormFields(FormMapper $form) { … $form ->with('General') … ->add('text', 'textarea', array('attr'=>array('class'=>'ckeditor'))); …. } 

That's all. However, like many things done by the “flick of the wrist,” the editor is embedded slightly crookedly, as can be seen in the screenshot. All dialog boxes are distorted, incomprehensible indents, etc. The editor becomes almost “useless”. This happens due to the fact that the developers in Sonata have set too general CSS selectors, which are inherited by the ckEditor elements.



What is the solution to the problem? It is very simple. You need to override the CSS styling of the distorted elements. Well, in order not to torture the dear reader by searching for and correcting styles of distorted elements with Firebug, below is a ready-made CSS block that you just need to paste into the same AcmeDemoBundle :: sonata_admin_base_layout.html.twig template file

 {% block stylesheets %} {{ parent() }} <style> .cke_skin_kama table{ width: inherit; margin: inherit; } .cke_skin_kama input, .cke_skin_kama textarea, .cke_skin_kama select{ width: inherit; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .cke_skin_kama label{ padding-top: inherit; line-height: inherit; float: inherit; width: inherit; color: inherit; text-align: inherit; } .cke_skin_kama table td{ border-top: none; } .cke_skin_kama table th, .cke_skin_kama table td{ padding: 0px; line-height: inherit; } .cke_skin_kama select{ height: inherit; } .cke_skin_kama input, .cke_skin_kama textarea{ display: inherit; border-radius: 0px; line-height: inherit; } </style> {% endblock stylesheets %} 

As we see in the screenshot below, all major problems and distortions are fixed. It became possible to use the editor, which I and the customer are very happy about.

PS

It is possible that I have not yet seen some distorted elements inside other dialog boxes, and the css file must be supplemented with new rules. If you have noticed and corrected this defect, do not be lazy to add the appropriate style in the comments - let's make life easier for our fellow developers.