SonataAdmin 管理后台轻松配置

优质

小牛编辑

129浏览

2023-12-01

特殊字段的困扰

上节中我们编辑一个blogpost时是这样的：

这里的body本应该有图文并茂的内容，但是我们只能输入一些纯文本，createTime的填写也非常不方便，下面我们来解决这个问题

ckeditor插件支持

首先安装MediaBundle扩展和SonataFormatterBundle扩展，执行：

[root@centos7vm mywebsite]# composer require sonata-project/media-bundle "2.3.*"
[root@centos7vm mywebsite]# composer require sonata-project/formatter-bundle "2.3.*"

注册bundle，修改app/AppKernel.php，添加注册如下：

            new Ivory\CKEditorBundle\IvoryCKEditorBundle(),
            new Sonata\FormatterBundle\SonataFormatterBundle(),
            new Knp\Bundle\MarkdownBundle\KnpMarkdownBundle(),
            new Sonata\MediaBundle\SonataMediaBundle(),
            new JMS\SerializerBundle\JMSSerializerBundle(),
            new Sonata\EasyExtendsBundle\SonataEasyExtendsBundle(),
            new Application\Sonata\MediaBundle\ApplicationSonataMediaBundle(),

修改app/config/config.yml，把doctrine配置组改成如下的样子：

doctrine:
    dbal:
        driver:   pdo_mysql
        host:     "%database_host%"
        port:     "%database_port%"
        dbname:   "%database_name%"
        user:     "%database_user%"
        password: "%database_password%"
        charset:  UTF8
        types:
            json: Sonata\Doctrine\Types\JsonType
    orm:
        auto_generate_proxy_classes: "%kernel.debug%"
        entity_managers:
            default:
                mappings:
                    AppBundle:
                        type:      ~
                        dir:       "Entity"
                        prefix:    "AppBundle\Entity"
                        is_bundle: ~

并添加如下配置：

sonata_formatter:
    formatters:
        markdown:
            service: sonata.formatter.text.markdown
            extensions:
                - sonata.formatter.twig.control_flow
                - sonata.formatter.twig.gist
                - sonata.media.formatter.twig
        text:
            service: sonata.formatter.text.text
            extensions:
                - sonata.formatter.twig.control_flow
                - sonata.formatter.twig.gist
                - sonata.media.formatter.twig
        rawhtml:
            service: sonata.formatter.text.raw
            extensions:
                - sonata.formatter.twig.control_flow
                - sonata.formatter.twig.gist
                - sonata.media.formatter.twig
        richhtml:
            service: sonata.formatter.text.raw
            extensions:
                - sonata.formatter.twig.control_flow
                - sonata.formatter.twig.gist
                - sonata.media.formatter.twig
        twig:
            service: sonata.formatter.text.twigengine
            extensions: [] # Twig formatter cannot have extensions
    ckeditor:
        templates:
            browser: 'SonataFormatterBundle:Ckeditor:browser.html.twig'
            upload: 'SonataFormatterBundle:Ckeditor:upload.html.twig'
sonata_media:
    default_context: default
    db_driver: doctrine_orm # or doctrine_mongodb, doctrine_phpcr
    contexts:
        default:  # the default context is mandatory
            providers:
                - sonata.media.provider.dailymotion
                - sonata.media.provider.youtube
                - sonata.media.provider.image
                - sonata.media.provider.file
            formats:
                small: { width: 100 , quality: 70}
                big:   { width: 500 , quality: 70}
    cdn:
        server:
            path: /uploads/media # http://media.sonata-project.org/
    filesystem:
        local:
            directory:  %kernel.root_dir%/../web/uploads/media
            create:     false
ivory_ck_editor:
    default_config: default
    configs:
        default:
            filebrowserBrowseRoute: admin_sonata_media_media_ckeditor_browser
            filebrowserImageBrowseRoute: admin_sonata_media_media_ckeditor_browser
                # Display images by default when clicking the image dialog browse button
            filebrowserImageBrowseRouteParameters:
                provider: sonata.media.provider.image
            filebrowserUploadRoute: admin_sonata_media_media_ckeditor_upload
            filebrowserUploadRouteParameters:
                provider: sonata.media.provider.file
                    # Upload file as image when sending a file from the image dialog
            filebrowserImageUploadRoute: admin_sonata_media_media_ckeditor_upload
            filebrowserImageUploadRouteParameters:
                provider: sonata.media.provider.image
                context: my-context # Optional, to upload in a custom context

修改app/config/routing.yml，添加如下内容：

gallery:
    resource: '@SonataMediaBundle/Resources/config/routing/gallery.xml'
    prefix: /media/gallery
media:
    resource: '@SonataMediaBundle/Resources/config/routing/media.xml'
    prefix: /media

OK, 清缓存(不行就rm -rf app/cache/*)

[root@centos7vm mywebsite]# php app/console cache:clear

安装ckeditor静态文件到web目录：

[root@centos7vm mywebsite]# php app/console assets:install web

这时重新打开http://172.16.142.130/app_dev.php/admin，你应该会看到多出了下面的板块

这是用来管理图片视频等信息的板块，但尚未配置好还不能用，暂时也不需要，我们继续来看我们需要的内容，还是点BlogPost的link_add，看效果：

这回body可以用来编辑图文并茂的内容啦

但虽然这里可以编辑文本格式，但是如果要上传图片还不能用，我们再来准备些东西

执行：

[root@centos7vm mywebsite]# php app/console sonata:easy-extends:generate --dest=src SonataMediaBundle

如果执行成功，会自动生成src/Application/Sonata/MediaBundle，说明我们成功生成了我们自定义的MediaBundle，但是我们一行代码都不需要写

在app/AppKernel.php中注册

            new Sonata\IntlBundle\SonataIntlBundle(),
            new Application\Sonata\MediaBundle\ApplicationSonataMediaBundle(),

修改app/config/config.yml，把doctrine的orm组改成如下：

    orm:
        auto_generate_proxy_classes: "%kernel.debug%"
        entity_managers:
            default:
                mappings:
                    ApplicationSonataMediaBundle: ~
                    SonataMediaBundle: ~
                    AppBundle:
                        type:      ~
                        dir:       "Entity"
                        prefix:    "AppBundle\Entity"
                        is_bundle: ~

更新数据库表：

[root@centos7vm mywebsite]# php app/console doctrine:schema:update --force

创建图片视频等上传目录：

[root@centos7vm mywebsite]# mkdir web/uploads
[root@centos7vm mywebsite]# mkdir web/uploads/media
[root@centos7vm mywebsite]# chmod -R 0777 web/uploads

好，大功告成，我们试一下上传图片吧，点击ckeditor（上面的编辑器）的图片按钮

点击上传选择文件

选好文件，点上传到服务器后，显示

这时已经把图片上传到服务器的web/uploads/media目录下了，点确定就可以插入到我们要编辑的内容里了

ckeditor还有很多丰富的内容可以配置，具体可以参考官方文档，比如代码高亮显示，像下面的样子：

漂亮的时间选择器

下面我们来解决时间类型数据的填写问题，我们现在的时间选择是这样的难看难用：

我们来介绍一种sonata_type_date_picker类型的时间选择器，它是SonataCore中自带的组件

在app/config/config.yml的twig组下添加模板配置：

    form:
        resources:
            - 'SonataCoreBundle:Form:datepicker.html.twig'

修改src/AppBundle/Admin/BlogPostAdmin.php的configureFormFields方法，如下：

        $formMapper
            ->add('title', 'text')
            ->add('body', 'ckeditor', array('autoload' => true))
            ->add('create_time', 'sonata_type_date_picker', array(
                'format'=>'yyyy-MM-dd HH:mm:ss',
                'dp_default_date'        => date('Y-m-d H:i:s'),));

在管理后台重新编辑一个blog看效果：