Integrate CKEditor into Shopware 6

Question

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.

score 1 · Answer 1 · answered Sep 11 '21 at 15:26

1

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.

answered Sep 11 '21 at 15:26

Alex

32,506
16
106
171

Perfects, thanks for getting back to me, this was really helpful as I think I had gone round in circles (a lot!), but I did something similar when I first tried this and the toolbar was not visible, but I think that if I read Scenario 1 a bit more I can hopefully configure it correctly, as was hoping to `Component.extend` or `Component.override` `sw-text-editor` and use the same settings or `input`/`onBlur` etc methods as the `sw-text-editor`, but not sure if this makes sense, what do you think? – halfpint_utopia Sep 13 '21 at 06:48
1

Yes, using Component override might work - maybe it's for a different question. Good luck. – Alex Sep 14 '21 at 07:53

Integrate CKEditor into Shopware 6

1 Answers1