I am trying to add a custom CKEditor to a ckeditor field in my setupCreateOperation() in laravel Backpack. I am following the guide in the documentation. However, I get the following error in my javascript console: Uncaught SyntaxError: Cannot use import statement outside a module.
As far as I can deduce the problem stems from the fact that the javascript code which the CKEditor Builder generates includes several import statements for the plugins:
import {
ClassicEditor,
AccessibilityHelp,
Autoformat,
AutoImage,
AutoLink,
Autosave,
Base64UploadAdapter,
Bold,
Code,
CodeBlock,
Essentials,
GeneralHtmlSupport,
Heading,
HtmlComment,
HtmlEmbed,
ImageBlock,
ImageCaption,
ImageInline,
ImageInsert,
ImageInsertViaUrl,
ImageResize,
ImageStyle,
ImageTextAlternative,
ImageToolbar,
ImageUpload,
Italic,
Link,
LinkImage,
List,
ListProperties,
Markdown,
MediaEmbed,
Paragraph,
SelectAll,
ShowBlocks,
SourceEditing,
Table,
TableCaption,
TableCellProperties,
TableColumnResize,
TableProperties,
TableToolbar,
TextTransformation,
Undo
} from 'ckeditor5';
const editorConfig = {
toolbar: {
items: [
'undo',
'redo',
'|',
'sourceEditing',
'showBlocks',
'|',
'heading',
'|',
'bold',
'italic',
'code',
'|',
'link',
'insertImage',
'mediaEmbed',
'insertTable',
'codeBlock',
'htmlEmbed',
'|',
'bulletedList',
'numberedList'
],
shouldNotGroupWhenFull: false
},
plugins: [
AccessibilityHelp,
Autoformat,
AutoImage,
AutoLink,
Autosave,
Base64UploadAdapter,
Bold,
Code,
CodeBlock,
Essentials,
GeneralHtmlSupport,
Heading,
HtmlComment,
HtmlEmbed,
ImageBlock,
ImageCaption,
ImageInline,
ImageInsert,
ImageInsertViaUrl,
ImageResize,
ImageStyle,
ImageTextAlternative,
ImageToolbar,
ImageUpload,
Italic,
Link,
LinkImage,
List,
ListProperties,
Markdown,
MediaEmbed,
Paragraph,
SelectAll,
ShowBlocks,
SourceEditing,
Table,
TableCaption,
TableCellProperties,
TableColumnResize,
TableProperties,
TableToolbar,
TextTransformation,
Undo
],
heading: {
options: [
{
model: 'paragraph',
title: 'Paragraph',
class: 'ck-heading_paragraph'
},
{
model: 'heading1',
view: 'h1',
title: 'Heading 1',
class: 'ck-heading_heading1'
},
{
model: 'heading2',
view: 'h2',
title: 'Heading 2',
class: 'ck-heading_heading2'
},
{
model: 'heading3',
view: 'h3',
title: 'Heading 3',
class: 'ck-heading_heading3'
},
{
model: 'heading4',
view: 'h4',
title: 'Heading 4',
class: 'ck-heading_heading4'
},
{
model: 'heading5',
view: 'h5',
title: 'Heading 5',
class: 'ck-heading_heading5'
},
{
model: 'heading6',
view: 'h6',
title: 'Heading 6',
class: 'ck-heading_heading6'
}
]
},
htmlSupport: {
allow: [
{
name: /^.*$/,
styles: true,
attributes: true,
classes: true
}
]
},
image: {
toolbar: [
'toggleImageCaption',
'imageTextAlternative',
'|',
'imageStyle:inline',
'imageStyle:wrapText',
'imageStyle:breakText',
'|',
'resizeImage'
]
},
initialData:
'Test',
link: {
addTargetToExternalLinks: true,
defaultProtocol: 'https://',
decorators: {
toggleDownloadable: {
mode: 'manual',
label: 'Downloadable',
attributes: {
download: 'file'
}
}
}
},
list: {
properties: {
styles: true,
startIndex: true,
reversed: true
}
},
placeholder: 'Type or paste your content here!',
table: {
contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells', 'tableProperties', 'tableCellProperties']
}
};
ClassicEditor.create(document.querySelector('#editor'), editorConfig);
When adding the file to the custom_build option for the ckeditor field, the field then calls the directive @basset(public_path('assets/js/ckeditor/ckeditor.js'))
in the ckeditor field blade. The directive then smartly finds that it is a javascript file and ads the following script to the page:
<script src="http://0.0.0.0:5173/public/assets/js/ckeditor.js"></script>
However there are no type=’module’ on this script, so the error occurs.
Does anyone know if there are anyway to force a type=”module” on the script tag without manipulating with laravel backpack’s source files?