In my Symfony 5.4 application I have several forms that are loaded via AJAX, and which contain WYSIWYG editors with CKEditorBundle that work correctly. On a specific form that is not loaded via AJAX, the containing CKEditor is not executed.
This is the CKEditor configuration:
#fos_ckeditor.yaml
twig:
form_themes:
- '@FOSCKEditor/Form/ckeditor_widget.html.twig'
fos_ck_editor:
base_path: 'bundles/fosckeditor/'
js_path: 'bundles/fosckeditor/ckeditor.js'
jquery_path: 'bundles/fosckeditor/adapters/jquery.js'
jquery: true
#autoload: false
input_sync: true
default_config: 'minima_config'
configs:
minima_config:
language: '%kernel.default_locale%'
font_defaultLabel: 'Arial'
fontSize_defaultLabel: '12px'
uiColor: '#f9f9f9'
async: true
autoload: true
toolbar: 'minima_toolbar'
media_config:
language: '%kernel.default_locale%'
uiColor: '#f9f9f9'
async: true
autoload: true
toolbar: 'media_toolbar'
toolbars:
configs:
minima_toolbar: [[Bold, Italic, Underline, Strike, Subscript, Superscript], [NumberedList, BulletedList, '-', Outdent, Indent, '-', JustifyLeft, JustifyCenter, JustifyRight, JustifyBlock], [Maximize]]
media_toolbar: [[Bold, Italic, Underline, Strike, Subscript, Superscript], [TextColor], [NumberedList, BulletedList, '-', Outdent, Indent, '-', JustifyLeft, JustifyCenter, JustifyRight, JustifyBlock],[Preview, Print], [Styles, Format, Font, FontSize], [Maximize]]
Simply in the form I do:
->add('mensaje', CKEditorType::class, [
'label' => false
])
The form view is nothing different, just declare the widgets.
The browser console shows me the following error:
Uncaught Error: jQuery should be loaded before CKEditor jQuery adapter.
Uncaught ReferenceError: $ is not defined
<anonymous> https://dominioapp.dev/buzon-interno/redactar/nuevo/mensaje:406
What I understand is the following: when a form is loaded via AJAX, and taking into account the CKEditor configuration (with autoload:true
), the JQuery library is already loaded in the view, and ckeditor.js is executed correctly, but in this form in specific that is not loaded via AJAX, in the layout that is associated with the view (of the form) is being loaded JQuery
after CKEditor
. How can I set the load order of CKEditor if that is the case????
The solution found consists of disabling autoload and async in the CKEditorBundle configuration, and "manually" loading the ckeditor libraries in the form view.
In the class of the form the configuration is used
buzonInternoMensaje_config
:Finally, in the view of the form, the ckeditor.js and the adapter.js are loaded, taking into account that the JQuery library is loaded from the associated layout, and the CKEditor is initialized on the element with id
buzon_interno_mensaje_mensaje