вторник, 16 июля 2013 г.

Symfony2 и Tinymce

Возник вопрос, как не особо заморачиваясь, добавить редактор tinymce в symfony2 проект. Нужно это нам преемущественно для админки.
Немного погуглив, наткнулся на бандл https://github.com/stfalcon/TinymceBundle, разрабатывал бандл украинский разработчик. Но в бандле была не последняя версия tinymce, поэтому было принято решение, написать это самому через расширение формы.
Итак, что я сделал:

1. Создал новый тип поля для формы, по сути расширил "textarea":

// \Namespace\BaseBundle\Form\TinymceType.php
use Symfony\Component\Form\AbstractType;

/**
 * @author Igor Onachenko <>
 */
class TinymceType extends AbstractType
{
    public function getParent()
    {
        return 'textarea';
    }

    public function getName()
    {
        return 'tinymce';
    }
}

2. Далее нужно создать виджет для обработки нашего поля формы.
Важно: первая часть названия виджета должна совпадать с тем что возвращает метод (tinymce_widget) TinymceType::getName()

// \Namespace\BaseBundle\Resources\views\Form\tinymce.html.twig
{% block tinymce_widget %}
    {% spaceless %}
        <script src="http://tinymce.cachefly.net/4.0/tinymce.min.js" type="text/javascript"></script>
        <script type="text/javascript">
                tinymce.init({
                    selector:'textarea#{{ form.vars.id }}',
                    width: 700,
                    height: 250,
                    language_url : '/bundles/BUNDLENAME/tinymce/langs/ru.js',
                    plugins: [
                     "advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
                     "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
                     "save table contextmenu directionality emoticons template paste textcolor"
                    ]
                });
        </script>
        {{ form_widget(form) }}
    {% endspaceless %}
{% endblock %}

3. Также для удобства можно объявить этот тип поля в качестве сервиса
// BaseBundle\Resources\config\services.yml
services:
    base.form.type.tinymce:
        class: Namespace\BaseBundle\Form\TinymceType
        tags:
            - { name: form.type, alias: tinymce }

Так как мы используем SonataAdminBundle, то использовать новый тип формы можно так:
class PageAdmin extends Admin
{
    //...
    public function configureFormFields(FormMapper $formMapper)
    {
        $formMapper
            ->add('title', null, array('label' => 'page.title'))
            ->add('slug', null, array('label' => 'page.slug'))
            ->add('text', 'tinymce', array('label' => 'page.text'));
    }
}

Да, чуть не забыл: чтобы редактор был на русском языке нужно, чтобы в папке
/bundles/BUNDLENAME/tinymce/langs/', лежал файл ru.js его можно скачать с сайта tinymce.com

Вот так просто. Маленький ньанс в том, что здесь js файл для редактора загружается с CDN сервера. Это надо учитывать и возможно, на всякий случай, скопировать этот js файл на сервер

Вот что получилось )



Комментариев нет:

Отправить комментарий