使用Sonata Admin Bundle和丰富的HTML编辑器的Symfony

Question

I successfully configured Sonata Admin v3.2 and Sonata Media Bundle in my Symfony 2.8 installation. As you can see the back-end is working fine:

I wanted to render the content property as a rich HTML so I followed the appropriate guide:

https://sonata-project.org/bundles/formatter/3-x/doc/reference/formatter_widget.html

I configured the SonataFormatterBundle following the guide step by step but the field doesn't render correctly. This is my config:

#Sonata with Symfony >= 2.6
form_themes:
    - 'SonataFormatterBundle:Form:formatter.html.twig'

sonata_block:
    default_contexts: [cms]
    blocks:
        # Enable the SonataAdminBundle block
        sonata.admin.block.admin_list:
            contexts:   [admin]
        # Your other blocks
        sonata.formatter.block.formatter:

sonata_formatter:
ckeditor:
    templates:
        browser: 'SonataFormatterBundle:Ckeditor:browser.html.twig'
        upload: 'SonataFormatterBundle:Ckeditor:upload.html.twig'
default_formatter: richhtml
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

And this is my PostAdmin class:

protected function configureFormFields(FormMapper $formMapper)
{
    $formMapper
        ->add('title')
        ->add('content', 'sonata_simple_formatter_type', array(
            'format' => 'richhtml',
            'ckeditor_context' => 'default', // optional
        ))
        ->add('category')
    ;
}

The page is not showing any errors but the field stays as a normal textarea (see my above screenshot).

Answer 1

So, for those who are not looking into comments:

The rich text editors in SonataFormatterBundle need some Javascript and Stylesheets to work. You need to add those in your admin layout template as described here .

Copied from documentation ( Code for Version 3.x ):

{% extends 'SonataAdminBundle::standard_layout.html.twig' %}

{% block stylesheets %}
{{ parent() }}

<link rel="stylesheet" href="{{ asset('bundles/sonataformatter/markitup/skins/sonata/style.css') }}" type="text/css" media="all" />
<link rel="stylesheet" href="{{ asset('bundles/sonataformatter/markitup/sets/markdown/style.css') }}" type="text/css" media="all" />
<link rel="stylesheet" href="{{ asset('bundles/sonataformatter/markitup/sets/html/style.css') }}" type="text/css" media="all" />
<link rel="stylesheet" href="{{ asset('bundles/sonataformatter/markitup/sets/textile/style.css') }}" type="text/css" media="all" />
{% endblock %}

{% block javascripts %}
{{ parent() }}

<script src="{{ asset('bundles/ivoryckeditor/ckeditor.js') }}" type="text/javascript"></script>
<script src="{{ asset('bundles/sonataformatter/vendor/markitup-markitup/markitup/jquery.markitup.js') }}" type="text/javascript"></script>
<script src="{{ asset('bundles/sonataformatter/markitup/sets/markdown/set.js') }}" type="text/javascript"></script>
<script src="{{ asset('bundles/sonataformatter/markitup/sets/html/set.js') }}" type="text/javascript"></script>
<script src="{{ asset('bundles/sonataformatter/markitup/sets/textile/set.js') }}" type="text/javascript"></script>
{% endblock %}