Добавление пользовательской сборки CKEditor приводит к появлению Uncaught SyntaxError: невозможно использовать оператор ⇐ Php

[Anonymous]

ОБНОВЛЕНИЕ
В соответствии с комментарием @jcastroa87 я добавил ckeditor-init.js в описание и обновил ckeditor.js, чтобы лучше отражать то, что на самом деле находится в мой проект. Я также объяснил, как была создана сборка CKEditor.
Я пытаюсь добавить собственный CKEditor5 в поле ckeditor в моей настройкеCreateOperation() в laravel Backpack. Я следую руководству в документации. Здесь я создаю пользовательскую сборку CKEditor. В процессе создания выберите предустановку HTMLEditor на этапе настройки, удалите все плагины премиум-класса на этапе функций, оставьте все по умолчанию на этапе панели инструментов и выберите технологию -> vanillajs, метод интеграции -> самостоятельный хостинг (npm), вывод -> скачать проект. Файл ckeditor.js — это файл main.js из загруженного проекта.
При использовании этой сборки CKEditor для моих custom_builds в поле ckefitor я получаю следующую ошибку в консоли javascript. : Uncaught SyntaxError: невозможно использовать оператор импорта вне модуля.
Насколько я могу сделать вывод, проблема связана с тем фактом, что код javascript, который генерирует CKEditor Builder, включает несколько операторов импорта для плагины:

Код: Выделить всё

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';

import 'ckeditor5/ckeditor5.css';

const editorConfig = {
'language': '{{ app()->getLocale() }}',
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']
}
};

Файл ckeditor-init.js будет выглядеть так:

Код: Выделить всё

async function bpFieldInitCustomCkeditorElement(element) {
// To create CKEditor 5 classic editor
let ckeditorInstance = await ClassicEditor.create(element[0], editorConfig).catch(error => {
console.error( error );
});

if (!ckeditorInstance) return;

element.on('CrudField:delete', function (e) {
ckeditorInstance.destroy();
});

// trigger the change event on textarea when ckeditor changes
ckeditorInstance.editing.view.document.on('layoutChanged', function (e) {
element.trigger('change');
});

element.on('CrudField:disable', function (e) {
ckeditorInstance.enableReadOnlyMode('CrudField');
});

element.on('CrudField:enable', function (e) {
ckeditorInstance.disableReadOnlyMode('CrudField');
});
}

При добавлении двух файлов в параметр custom_build для поля ckeditor это поле вызывает директивы @basset(public_path('assets/js/ckeditor/ckeditor.js'))< /code> и @basset(public_path('assets/js/ckeditor/ckeditor-init.js')) в колонке поля ckeditor. Затем директива определяет, что это файлы javascript, и добавляет на страницу следующие скрипты:

Код: Выделить всё

Однако в этом скрипте нет type='module', поэтому возникает ошибка.
Для справки я использую CKEditor5 версии 43.1.0 (устанавливается через npm), рюкзак/crud версии 6.7.38 и рюкзак/про 2.2.17
Кто-нибудь знает, есть ли способ принудительно использовать type="module" в скрипте тег без манипуляций с исходными файлами рюкзака laravel?

Подробнее здесь: https://stackoverflow.com/questions/790 ... -import-st