Integrate CKEditor into Shopware 6

Viewed 140

I am trying to integrate CKEditor into Shopware 6 as I would like to have more control over the text editor, and have used it in Concrete 5 / Concrete CMS projects.

I have found How to add third-party dependency javascript to Shopware 6 but I wasn't able to solve my issue.

I have added a package.json file:

{
    "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"
    }
}

and added a webpack.config.js which is the bare minimal for 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
                            } )
                        }
                    ]
                }
            ]
        }
    };
};

But every time I run ./psh.phar administration:build, I get this error:

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'

I have checked and it is there, and so assume the module should be found, as it is looking in the correct location. Has anyone else run into this problem when integrating anything into Shopware 6? Or can anyone please shed some advice as to how best approach this? Thanks.

1 Answers

Is it an option for you to use the pre-built CKEditor (Scenario 1 in the documentation) ? Or do you really have to build CKEditor from source?

If you can use the pre-build package, this would work:

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

Then in your main.js

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

Build (production template):

example.com$
    bin/build-administration.sh 

As you seem to use the development template (and I tested that in the production template) you steps might slightly differ.

Related