Интеграция CKEditor в SonataAdminBundle

    Собственно говоря, встраивается этот WYSIWYG редактор “легким движением руки”. Необходимо лишь загрузить его javascript код на страницу админки и добавить класс “ckeditor” к необходимому textarea полю. Но есть и один нехороший подводный камень, о котором я и написал в посте.



    Встраивается CKEditor внутрь SonataAdminBundle в три простых шага:

    1. Создаем свой шаблон страницы редактирования SonataAdminBundle

    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. Подключаем свой шаблон в файле конфигурации config.yml


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


    3. Выводим элемент формы с классом ckeditor:


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


    Вот собственно и все. Однако как и многие вещи, делаемые “легким движением руки”, встраивается редактор слегка криво, что видно на скриншоте. Все диалоговые окна искажены, непонятные отступы и т. п. Редактор становится практически “неюзабельным”. Происходит это из-за того, что разработчики в Sonata задали слишком общие CSS селекторы, которые и наследуются элементами ckEditor.



    Каково же решение проблемы? Оно очень просто. Необходимо переопределить CSS оформление искаженных элементов. Ну и для того, чтобы не мучить дорогого читателя выискиванием и исправлением стилей искаженных элементов с Firebug`ом, ниже приводится готовый CSS блок, который просто необходимо вставить в тот же файл шаблона AcmeDemoBundle::sonata_admin_base_layout.html.twig

    {% 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 %}
    


    Как видим на скриншоте ниже, все основные проблемы и искажения исправлены. Редактором стало возможно пользоваться, чему несказанно рады и я и заказчик.



    P.S.

    Вполне возможно, что я не доглядел еще каких-то искаженных элементов внутри других диалоговых окон, и css файл нужно дополнить новыми правилами. Если вы заметили и исправили этот недочет, не поленитесь добавить соответствующий стиль в комментарии — давайте облегчим жизнь своих собратьев-разработчиков.
    Поделиться публикацией
    Похожие публикации
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама
    Комментарии 0

    Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.