将CKEditor集成到Shopware6中

Question

我正在尝试将CKEditor集成到Shopware6中，因为我希望对文本编辑器有更多的控制，并且已经在具体的5/ 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"
    }
}

并添加了一个CKEditor的最小webpack.config.js：

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'

我已经检查过了，它就在那里，所以假设应该找到该模块，因为它在正确的位置查找。有没有人在将任何东西集成到Shopware6中时遇到过这个问题？或者，有没有人能就如何更好地实现这一点提供一些建议？谢谢。

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

Build (生产模板)：

example.com$
    bin/build-administration.sh 

由于您似乎使用了开发模板(我在production模板中对其进行了测试)，因此您的步骤可能会略有不同。