CKEditor 5 integration with Laravel Mix

Hi folks.

I'm trying to build customized CKEditor 5 instance to my app, using Laravel Mix. If i copy the contents of the CKEditor's tutorial (https://ckeditor.com/docs/ckeditor5/latest/framework/guides/quick-start.html) app.js into my app.js, and run npm run dev, the process occurs normally, but when i visit the page, i see this error:

TypeError: Cannot read property 'getAttribute' of null
    at IconView._updateXMLContent (app.js:54096)
    at IconView.render (app.js:54072)
    at IconView.<anonymous> (app.js:66320)
    at IconView.fire (app.js:64059)
    at IconView.<computed> [as render] (app.js:66324)
    at ViewCollection._renderViewIntoCollectionParent (app.js:58784)
    at ViewCollection.<anonymous> (app.js:58645)
    at ViewCollection.fire (app.js:64059)
    at ViewCollection.addMany (app.js:59973)
    at ViewCollection.add (app.js:59938)

here is my app.js

require('./bootstrap');

import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';

ClassicEditor
    .create(document.querySelector('#editor'), {
        plugins: [Essentials, Paragraph, Bold, Italic],
        toolbar: ['bold', 'italic']
    })
    .then(editor => {
        console.log('Editor was initialized', editor);
    })
    .catch(error => {
        console.error(error.stack);
    });

And my view

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>CKEditor 5 Framework – Quick start</title>
    </head>
    <body>
        <div id="editor">
            <p>Editor content goes here.</p>
        </div>

        <script src="js/app.js"></script>
    </body>
</html>

Someone had the same problem?

anthonyclark

5 years ago

Level 9

I had a lot of trouble getting this up and running. I ended up adding this to webpack.mix.js

/**
 * CK Editor Config
 */
const CKEStyles = require('@ckeditor/ckeditor5-dev-utils').styles
const CKERegex = {
  svg: /ckeditor5-[^/\]+[/\]theme[/\]icons[/\][^/\]+\.svg$/,
  css: /ckeditor5-[^/\]+[/\]theme[/\].+\.css$/
}

Mix.listen('configReady', webpackConfig => {
  const rules = webpackConfig.module.rules
  const targetSVG = /(\.(png|jpe?g|gif|webp)$|^((?!font).)*\.svg$)/
  const targetFont = /(\.(woff2?|ttf|eot|otf)$|font.*\.svg$)/
  const targetCSS = /\.css$/

  // Exclude CK Editor regex from mix's default rules
  for (let rule of rules) {
    if (rule.test.toString() === targetSVG.toString()) {
      rule.exclude = CKERegex.svg
    } else if (rule.test.toString() === targetFont.toString()) {
      rule.exclude = CKERegex.svg
    } else if (rule.test.toString() === targetCSS.toString()) {
      rule.exclude = CKERegex.css
    }
  }
})

/**
 * Webpack Config for CK Editor
 */
mix.webpackConfig({
  module: {
    rules: [
      {
        test: CKERegex.svg,
        use: ['raw-loader']
      },
      {
        test: CKERegex.css,
        use: [
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: CKEStyles.getPostCssConfig({
                themeImporter: {
                  themePath: require.resolve('@ckeditor/ckeditor5-theme-lark')
                },
                minify: true
              })
            }
          }
        ]
      }
    ]
  }
})

Further reading: https://github.com/ckeditor/ckeditor5-vue/issues/23

jjrohrer

4 years ago

Level 3

Although I'm still figuring this out, those single backslashes on the svg and css lines will need to be double backslashed. You can see this in the original github discussion that @anthonyclark references. Your IDE can probably guide you.

1 like

Hansz

4 years ago

Level 1

@anthonyclark thank you for it!, I dont receive anymore the getAttribute error but im not enable to write in the ckeditor instance, i dont found any similar on internet, it is also not auto-complete with the default value

Please or to participate in this conversation.