【问题标题】:Symfony 4.4 中 SonataFormatter + SonataNews 的 CKEditor 问题
【发布时间】:2020-11-25 05:15:50
【问题描述】:

我正在尝试将 SonataNewsBundle 集成到 Symfony 4.4 中。

CKEditor 未在新闻帖子的“内容”字段中显示。 我可能已经阅读了所有可以在网上找到的内容,但找不到解决此问题的方法。

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'

然后在sonata_news.yaml 中进行一个小的 ovverride(为了实验):

sonata_news:
(...cut...)
    # override defaults
    admin:
        post:
            class:  App\Admin\PostAdmin

然后编辑帖子只会给我留下一个空白的“内容”和可编辑的“原始内容”文本区域。

当我按照我找到的提示之一并将ckeditor CSS 类应用到具有以下 sn-p 的“内容”字段时,CKEditor 确实显示,但再次显示在“原始内容”(而不是“内容") 字段,对格式化程序设置没有任何反应/更改,没有使用实际格式...

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()
        ;
     }

JS 调试控制台上没有错误,网络控制台上也没有 404 资产...

** 编辑:

当我在编辑帖子时与https://demo.sonata-project.org/ 的原始 HTML 输出和我自己的表单进行了一些比较时,我可以看到我缺少一些引用格式选择器和 CKEditor 本身的内联 JavaScript 代码。它来自哪里,为什么它没有在我端渲染?

** EDIT2:

...显然它来自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:

我可以清楚地看到问题是 Symfony 4.4 不允许格式化程序包所需的 yaml 声明,如下所述: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'

将该部分转换为 Symfony 4.4 格式也不起作用:

framework:
    templating:
        form:
            resources:
                - 'SonataFormatterBundle:Form:formatter.html.twig'

有人吗?

【问题讨论】:

    标签: php symfony ckeditor sonata-admin sonata


    【解决方案1】:

    信不信由你,但唯一缺少的是:

    twig:
        form_themes:
            - 'SonataFormatterBundle:Form:formatter.html.twig'
    

    sonata_formatter.yaml

    应该为 Symfony 4.4 更新官方文档!

    【讨论】:

      猜你喜欢
      • 2020-05-05
      • 2020-03-19
      • 2021-09-30
      • 2021-07-01
      • 2020-11-21
      • 1970-01-01
      • 2014-01-27
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多