Templates plugin not working on webpack installation of ckeditor

[drososanastasios]

Environment

Symfony 4.2

Symfony packages

friendsofsymfony/ckeditor-bundle: 2.1.0,

I started a fresh symfony flex project and I installed webpack based on documentation. What I did next is that I followed the documentation in order to install ckeditor bundle based on:

https://symfony.com/doc/master/bundles/FOSCKEditorBundle/installation.html

Since I try to migrate from symfony 3.4 to symfony 4 I used the same configuration as before that contains templates. Without the templates everything works as expected.

Steps to reproduce

Add a simple configuration that contain templates:

badge_config:
            toolbar: "custom_toolbar"
            filebrowserBrowseRoute: 'elfinder'
            filebrowserBrowseRouteParameters: []
            extraPlugins: 'templates'
            templates: 'badge_templates'
templates:
        badge_templates:
            templates:
                - title: '1x1 C'
                  template: 'ckeditor_templates/badges/badge1x1C.html.twig'
                - title: '2x1 CC'
                  template: 'ckeditor_templates/badges/badge2x1CC.html.twig'

Expected results

An editor that contains the templates.

Actual results

The editor is shown as simple text. In console.log I see that:

Uncaught TypeError: CKEDITOR.addTemplates is not a function

[zhaozhijun1988]

Do you solve this? I meet the same problem.

[kunicmarko20]

I didn't have time to look this up, also never used webpack/encore. Do you have any idea what could be wrong? Will try to look this up when I find some time

[kunicmarko20]

@ktherage have you run into these issues by any chance?

[ktherage]

@kunicmarko20 sorry I didn't use templates with ckeditor. But I'll try it and I'll keep informed.

But anyway to point out the clue, @drososanastasios it seems to be the installed ckeditor version to be in cause. Can you tell us what is the version you've installed (check in the package.json file)?

[ktherage]

Well, i tried this quickly and it seems that extraPlugins is not applied to the node_module/ckeditor. I don't known how this work under the hood.

[kunicmarko20]

Thank you @ktherage! At least its a clue, will try to take a look over the weekend

[ktherage]

I've got some more informations, i tried to make CKEDITOR constante global as described here because she is used here to setup plugin.

But it didn't worked. I also noticed that there is a way to use ckeditor with require_js it can be applied for webpack IMO but i haven't tried this.

[CPASimUSante]

I'm using FOSCKEditor 2.4 (composer.json) with ckeditor 4.19.1 (package.json) in a Symfony 6 application with webpack (symfony/webpack-encore-bundle) : I still have the same error as stated by @drososanastasios Uncaught TypeError: CKEDITOR.addTemplates is not a function

->add('value', CKEditorType::class, [
    'label' => 'settingsmessage.fieldvalue',
    'required' => false,
    'config_name' => 'fulleditor_template',
    'config' => [
        'extraPlugins' => 'templates',
        'templates' => 'my_templates'
    ],
    'templates' => [
        'my_templates' => [
            'imagesPath' => '/public/fileuploads/templates',
            'templates' => [
                [
                  'title' => 'Template 11',
                  'description' => 'desc template 1',
                  'html' => '<p>template 1</p>',
                ],
                [
                  'title' => 'Template 22',
                  'description' => 'desc template 2',
                  'html' => '<p>template 2</p>',
                ],
            ]
        ]
    ],
])

However, if i "just" add the "templates" plugin without defining some custom template in my form,

->add('value', CKEditorType::class, [
    'label' => 'settingsmessage.fieldvalue',
    'required' => false,
    'config_name' => 'fulleditor_template',
    'config' => [
        'extraPlugins' => 'templates',
    ]
)

then the CKEditor is not broken and the default templates are available.