laravel 设置 ckeditor/ckeditor5-export-pdf

Question

我尝试在我的 Laravel 应用程序上设置插件 ckeditor/ckeditor5-export-pdf 但我不能这样做。我仍然遇到以下问题：未捕获的类型错误：无法解析模块说明符“@ckeditor/ckeditor5-export-pdf/src/exportpdf”。相对引用必须以“/”、“./”或“../”开头。 我按照文档中的方式完成了所有步骤：https://ckeditor.com/docs/ckeditor5/latest/features/export-pdf.html#configuration 但是当我尝试使用 import ExportPdf from '@ckeditor/ckeditor5-export-pdf/src/exportpdf';我收到上面的错误。请帮忙。也许有些人之前一直在这个问题上

        import ExportPdf from '@ckeditor/ckeditor5-export-pdf/src/exportpdf';

        console.log(ExportPdf);
        $(document).ready(function () {
            /*function ExportPdf(editor) {
                editor.execute('exportPdf');
            }*/

            function SimpleUploadAdapter(editor) {
                editor.plugins.get('FileRepository').createUploadAdapter = function(loader) {
                    return {
                        upload: function() {
                            return loader.file
                                .then(function (file) {
                                    return new Promise(function(resolve, reject) {
                                        // Init request
                                        var xhr = new XMLHttpRequest();
                                        xhr.open('POST', '/admin/instructions/ckmedia', true);
                                        xhr.setRequestHeader('x-csrf-token', window._token);
                                        xhr.setRequestHeader('Accept', 'application/json');
                                        xhr.responseType = 'json';

                                        // Init listeners
                                        var genericErrorText = `Couldn't upload file: ${ file.name }.`;
                                        xhr.addEventListener('error', function() { reject(genericErrorText) });
                                        xhr.addEventListener('abort', function() { reject() });
                                        xhr.addEventListener('load', function() {
                                            var response = xhr.response;

                                            if (!response || xhr.status !== 201) {
                                                return reject(response && response.message ? `${genericErrorText}\n${xhr.status} ${response.message}` : `${genericErrorText}\n ${xhr.status} ${xhr.statusText}`);
                                            }

                                            $('form').append('<input type="hidden" name="ck-media[]" value="' + response.id + '">');

                                            resolve({ default: response.url });
                                        });

                                        if (xhr.upload) {
                                            xhr.upload.addEventListener('progress', function(e) {
                                                if (e.lengthComputable) {
                                                    loader.uploadTotal = e.total;
                                                    loader.uploaded = e.loaded;
                                                }
                                            });
                                        }

                                        // Send request
                                        var data = new FormData();
                                        data.append('upload', file);
                                        data.append('crud_id', {{ $instruction->id ?? 0 }});
                                        xhr.send(data);
                                    });
                                })
                        }
                    };
                }
            }

            var allEditors = document.querySelectorAll('.ckeditor');
            for (var i = 0; i < allEditors.length; ++i) {
                ClassicEditor.create(
                    allEditors[i], {
                        extraPlugins: [SimpleUploadAdapter, /*ExportPdf*/],
                        /*toolbar: [
                            'exportPdf', '|',
                        ],
                        exportPdf: {
                            stylesheets: [
                                './path/to/fonts.css',
                                'EDITOR_STYLES',
                                './path/to/style.css'
                            ],
                            fileName: 'my-file.pdf',
                            converterOptions: {
                                format: 'A4',
                                margin_top: '20mm',
                                margin_bottom: '20mm',
                                margin_right: '12mm',
                                margin_left: '12mm',
                                page_orientation: 'portrait'
                            }
                        }*/
                    }
                );
            }
        });
    </script>```

Answer 1

我用https://ckeditor.com/ckeditor-5/online-builder/ 解决了我的问题，构建了我想要的并在我的应用程序上进行了设置