将 CKEditor 集成到 Shopware 6

Question

我正在尝试将 CKEditor 集成到 Shopware 6 中，因为我想更好地控制文本编辑器，并已在 Concrete 5 / Concrete CMS 项目中使用它。

我找到了How to add third-party dependency javascript to Shopware 6，但我无法解决我的问题。

我添加了一个package.json 文件：

{
    "name": "administration",
    "version": "1.0.0",
    "private": true,
    "description": "",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "license": "ISC",
    "dependencies": {
        "@ckeditor/ckeditor5-alignment": "^29.2.0",
        "@ckeditor/ckeditor5-autoformat": "^29.2.0",
        "@ckeditor/ckeditor5-basic-styles": "^29.2.0",
        "@ckeditor/ckeditor5-block-quote": "^29.2.0",
        "@ckeditor/ckeditor5-build-classic": "^29.2.0",
        "@ckeditor/ckeditor5-cloud-services": "^29.2.0",
        "@ckeditor/ckeditor5-code-block": "^29.2.0",
        "@ckeditor/ckeditor5-dev-utils": "^25.4.2",
        "@ckeditor/ckeditor5-dev-webpack-plugin": "^25.4.2",
        "@ckeditor/ckeditor5-easy-image": "^29.2.0",
        "@ckeditor/ckeditor5-editor-classic": "^29.2.0",
        "@ckeditor/ckeditor5-essentials": "^29.2.0",
        "@ckeditor/ckeditor5-font": "^29.2.0",
        "@ckeditor/ckeditor5-heading": "^29.2.0",
        "@ckeditor/ckeditor5-horizontal-line": "^29.2.0",
        "@ckeditor/ckeditor5-html-support": "^29.2.0",
        "@ckeditor/ckeditor5-image": "^29.2.0",
        "@ckeditor/ckeditor5-indent": "^29.2.0",
        "@ckeditor/ckeditor5-link": "^29.2.0",
        "@ckeditor/ckeditor5-list": "^29.2.0",
        "@ckeditor/ckeditor5-media-embed": "^29.2.0",
        "@ckeditor/ckeditor5-paragraph": "^29.2.0",
        "@ckeditor/ckeditor5-paste-from-office": "^29.2.0",
        "@ckeditor/ckeditor5-source-editing": "^29.2.0",
        "@ckeditor/ckeditor5-theme-lark": "^29.2.0",
        "@ckeditor/ckeditor5-word-count": "^29.2.0",
        "raw-loader": "^4.0.2",
        "style-loader": "^1.3.0",
        "webpack": "^5.52.0",
        "webpack-cli": "^4.8.0"
    }
}

并添加了webpack.config.js，这是 CKEditor 的最低要求：

const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );
const {join, resolve} = require('path');

module.exports = function (params) {
    return {
        resolve: {
            alias: {
                '@ckeditor': resolve(
                    join(__dirname, '..', 'node_modules', '@ckeditor')),
            }
        },
        
        module: {
            rules: [
                {
                    test: /\.svg$/,
                    include: [
                        `${params.basePath}Resources/app/administration/node_modules`
                    ],
                    use: [ 'raw-loader' ]
                },
                {
                    test: /\.css$/,
                    include: [
                        `${params.basePath}Resources/app/administration/node_modules`
                    ],
                    use: [
                        {
                            loader: 'postcss-loader',
                            options: styles.getPostCssConfig( {
                                themeImporter: {
                                    themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
                                },
                                minify: true
                            } )
                        }
                    ]
                }
            ]
        }
    };
};

但是每次我运行./psh.phar administration:build，我都会收到这个错误：

ERROR in /../src/Resources/app/administration/node_modules/@ckeditor/ckeditor5-ui/theme/components/responsive-form/responsiveform.css (./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js??ref--10-2!/.../src/Resources/app/administration/node_modules/@ckeditor/ckeditor5-ui/theme/components/responsive-form/responsiveform.css)
        Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
        ModuleNotFoundError: Module not found: Error: Can't resolve './@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css' in '/.../src/Resources/app/administration/node_modules/@ckeditor/ckeditor5-ui/theme/components/responsive-form'

我已经检查过了，它就在那里，因此假设应该找到该模块，因为它正在寻找正确的位置。 在将任何东西集成到 Shopware 6 中时，是否有其他人遇到过这个问题？或者任何人都可以就如何最好地解决这个问题提出一些建议？谢谢。

Answer 1

您可以选择使用预建的 CKEditor (Scenario 1 in the documentation) 吗？ 或者你真的必须从源代码构建 CKEditor？

如果您可以使用预构建包，这将起作用：

example.com/custom/plugins/ExampleModule/src/Resources/app/administration$ 
    npm install --save @ckeditor/ckeditor5-build-classic

然后在你的main.js

import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

构建（生产模板）：

example.com$
    bin/build-administration.sh 

由于您似乎使用的是开发模板（我在生产模板中对其进行了测试），您的步骤可能略有不同。