I'm trying to integrate SonataNewsBundle in Symfony 4.4.
The CKEditor is not showing in the "Content" field for the news post. I've read through probably all of what's to be found online and couldn't find a way to solve this problem.
fos_ck_editor.yaml:
editor:
base_path: "bundles/fosckeditor"
js_path: "bundles/fosckeditor/ckeditor.js"
input_sync: true
default_config: base_config
configs:
base_config:
toolbar: full
twig:
form_themes:
- '@FOSCKEditor/Form/ckeditor_widget.html.twig'
sonata_admin.yaml:
sonata_admin:
title: 'Something...'
dashboard:
blocks:
- { type: sonata.admin.block.admin_list, position: left }
options:
legacy_twig_text_extension: false
security:
handler: sonata.admin.security.handler.role
# DEPRECATED: override templates to enable CKEditor
templates:
edit: Admin/CRUD/edit.html.twig
# extra CSS/JS to for SonataFormatter
assets:
extra_javascripts:
- bundles/fosckeditor/ckeditor.js
- bundles/sonataformatter/vendor/markitup-markitup/markitup/jquery.markitup.js
- bundles/sonataformatter/markitup/sets/markdown/set.js
- bundles/sonataformatter/markitup/sets/html/set.js
- bundles/sonataformatter/markitup/sets/textile/set.js
extra_stylesheets:
- bundles/sonataformatter/markitup/skins/sonata/style.css
- bundles/sonataformatter/markitup/sets/markdown/style.css
- bundles/sonataformatter/markitup/sets/html/style.css
- bundles/sonataformatter/markitup/sets/textile/style.css
# General block configuration
sonata_block:
blocks:
# Enable the SonataAdminBundle block
sonata.admin.block.admin_list:
contexts: [admin]
# Enable SonataFormatter block
sonata.formatter.block.formatter: ~
sonata_formatter.yaml:
sonata_formatter:
#default_formatter: text
default_formatter: markdown
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: '@SonataFormatter/Ckeditor/browser.html.twig'
upload: '@SonataFormatter/Ckeditor/upload.html.twig'
Then a small ovverride (for the sake of experimentation) in sonata_news.yaml:
sonata_news:
(...cut...)
# override defaults
admin:
post:
class: App\Admin\PostAdmin
Then editing Post just leaves me with a blank "Content" and editable "Raw content" textarea.
When I follow one of the tips I found and apply the ckeditor CSS class to the "Content" field with below snippet, the CKEditor indeed shows, but again on the "Raw content" (and not "Content") field, without any reaction/changes to formatter settings, without the actual formats being used...
PostAdmin.php
(...cut...)
protected function configureFormFields(FormMapper $formMapper)
{
// get parent field configuration
parent::configureFormFields($formMapper);
$isHorizontal = 'horizontal' === $this->getConfigurationPool()->getOption('form_type');
$formMapper
->with('group_post')
->add('content', FormatterType::class, [
'event_dispatcher' => $formMapper->getFormBuilder()->getEventDispatcher(),
'format_field' => 'contentFormatter',
'source_field' => 'rawContent',
'source_field_options' => [
'horizontal_input_wrapper_class' => $isHorizontal ? 'col-lg-12' : '',
'attr' => [
//'class' => 'ckeditor', // NOTE: only way to get it half-assed-working
'rows' => 20
]
],
'ckeditor_context' => 'news',
'target_field' => 'content',
'listener' => true,
])
->end()
;
}
There are no errors on the JS debug console and no 404 assets on the Network console...
** EDIT:
As I did some comparison to the raw HTML output of https://demo.sonata-project.org/ while editing a post, and my own form, I can see I'm missing some inline JavaScript code that references to the format selector and the CKEditor itself. Where does it come from, and why is it not rendering on my end?
** EDIT2:
...and apparently it comes from the formatter.html.twig;
vendor$ grep "This code requires CKEDITOR and jQuery" -r *
sonata-project/formatter-bundle/src/Resources/views/Form/formatter.html.twig: // This code requires CKEDITOR and jQuery MarkItUp
** EDIT3:
I can clearly see the problem is that Symfony 4.4 does not allow the yaml declaration required by formatter bundle, as stated here: https://sonata-project.org/bundles/formatter/2-x/doc/reference/formatter_widget.html
twig:
debug: '%kernel.debug%'
strict_variables: '%kernel.debug%'
form:
resources:
# ...
- 'SonataFormatterBundle:Form:formatter.html.twig'
Converting that part into Symfony 4.4 format does not work either:
framework:
templating:
form:
resources:
- 'SonataFormatterBundle:Form:formatter.html.twig'
Anyone?
Believe it or not, but the only thing missing was:
twig:
form_themes:
- 'SonataFormatterBundle:Form:formatter.html.twig'
in sonata_formatter.yaml
Official documentation should be updated for Symfony 4.4!