Cannot read properties of null (reading 'getAttribute')

[isyoungxl]

📝 Provide detailed reproduction steps (if any)

1.I use the Multi-root editor in vue2. Before that, the Inline editor can be used normally
2. I follow the example to quote the code to the project

The following error occurred：

3. This is my webpack configuration

✔️ Expected result

What is the expected result of the above steps?
Can be used normally

❌ Actual result

Report an error
What is the actual result of the above steps?
Report an error

❓ Possible solution

If you have ideas, you can list them here. Otherwise, you can delete this section.

📃 Other details

• Browser: chrome
• OS: windows 10
• First affected CKEditor version: CKEditor5
• Installed CKEditor plugins: @ckeditor/ckeditor5-build-classic、@ckeditor/ckeditor5-build-inline、@ckeditor/ckeditor5-vue2

---

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[pomek]

Most probably, the file-loader handles CKEditor 5 icons. You need to exclude CKEditor 5 assets from this loader. But it's hard to say more as we don't see the full webpack config.

[isMrcat]

I think it may be the introduction of SVG or icon. I hope to see a more complete configuration

[isyoungxl]

Most probably, the file-loader handles CKEditor 5 icons. You need to exclude CKEditor 5 assets from this loader. But it's hard to say more as we don't see the full webpack config.

Sorry to let you check in this way

Please see attachment：

webpack.base.conf.zip

[isyoungxl]

[pomek]

The regular expression used for testing a path for the raw-loader should be specified as patterns to exclude for the file-loader.

[isyoungxl]

The regular expression used for testing a path for the raw-loader should be specified as patterns to exclude for the file-loader.

Is it this way?
`

   {
    test: /\.(svg)(\?.*)?$/,
    exclude: [
      /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
      /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css/,
    ],
    use: [
      {
        loader: 'file-loader',
        options: {
          name: utils.assetsPath("img/[name].[hash:7].[ext]")
        }
      }
    ]
  },
  {
    test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
    use: ['raw-loader'] 
  }

`

Doing so does not seem to report an error，But the browser page cannot be refreshed, did I do something wrong?

Unless these codes are commented out, they cannot be refreshed.

[pomek]

Is it this way?

Almost, this /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css/, is not needed.

[isyoungxl]

Is it this way?

Almost, this /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css/, is not needed.

I have tried it, and removing this sentence has the same effect.

This is my package.json，

`

"@ckeditor/ckeditor5-build-classic": "^31.0.0",
"@ckeditor/ckeditor5-build-inline": "^31.0.0",
"@ckeditor/ckeditor5-dev-utils": "^26.1.0",
"@ckeditor/ckeditor5-dev-webpack-plugin": "^26.1.0",
"@ckeditor/ckeditor5-vue2": "^1.0.5",

`

This situation occurs when I perform initialization.

`

initEditor() {
MulitirootEditor.create(
{
header: document.querySelector('#header'),
content: document.querySelector('#content'),
footerleft: document.querySelector('#footer-left'),
footerright: document.querySelector('#footer-right'),
},
.....)
}

`

[taf2]

Is there not just a simple way to include plugins... like:

<script type="module" src="plugin?"></script>

... why does it have to be so hard... can't these plugins just be hosted on cdn?

[range-of-motion]

@isyoungxl how did you ever fix this?

[Jyboer13]

Hello, @isyoungxl! How did you fix it? I am trying to fix this in React but no luck

[huzedong2015]

@Jyboer13 #11493

[xuxusheng]

same+1

[Master-Y0da]

same problem here...I spend almost a week trying to solve this and my project is completly stoped. Please any help!

[mertgibi]

i have the same problem

[huzedong2015]

i have the same problem

1、click href
2、Expand collapse
3、copy code

[mertgibi]

i have the same problem

1、click href
2、Expand collapse
3、copy code

I guess I can't use it. This doesn't work for me

[huzedong2015]

i have the same problem

1、click href
2、Expand collapse
3、copy code

I guess I can't use it. This doesn't work for me

ckeditor5-build-multiI uploaded an example

[mertgibi]

i have the same problem

1、click href
2、Expand collapse
3、copy code

I guess I can't use it. This doesn't work for me

ckeditor5-build-multiI uploaded an example

Thanks, i reviewed it. I'm using Laravel with inertia/vuejs. Is there anything extra I need to do for this?

[huzedong2015]

i have the same problem

1、click href
2、Expand collapse
3、copy code

I guess I can't use it. This doesn't work for me

ckeditor5-build-multiI uploaded an example

Thanks, i reviewed it. I'm using Laravel with inertia/vuejs. Is there anything extra I need to do for this?

I don't continue to develop. If you need to use it, you can consider publishing build to NPM and then installing it
Introduce the multi-root editor build

[ilearnio]

I have the same issue with vite. The debugger shows that it doesn't load the icons properly

[Witoso]

@ilearnio do you use our Vite plugin?

[laurentDellaNegra]

Hello I have the same issue than @ilearnio

Im in a vitejs setup and Im using the Vite plugin:

    plugins: [react(), ckeditor5({ theme: require.resolve('@ckeditor/ckeditor5-theme-lark') })],

[ilearnio]

@Witoso Yes I was using the plugin

[Witoso]

@ilearnio we would need some repo/code example. Right now I cannot reproduce it.

[oscarcornejo]

Hi! I have the same issue than @ilearnio 🤔

[VaclavS16]

Hi, I had the same problem with Vite and ckeditor, solution was move vite plugin vite-svg-loader after plugin ckeditor5 in vite. Here is my vite configuration.

import { createRequire } from 'node:module';
import { defineConfig } from 'vite';
import vue from "@vitejs/plugin-vue";
import svgLoader from "vite-svg-loader";
import ckeditor5 from "@ckeditor/vite-plugin-ckeditor5";

const require = createRequire( import.meta.url );

export default defineConfig( {
  plugins: [
    vue(),
    ckeditor5({ theme: require.resolve("@ckeditor/ckeditor5-theme-lark") }),
    svgLoader(),
  ],
} );

[betsylotus]

Hi, I had the same problem with Vite and ckeditor, solution was move vite plugin vite-svg-loader after plugin ckeditor5 in vite. Here is my vite configuration.

import { createRequire } from 'node:module';
import { defineConfig } from 'vite';
import vue from "@vitejs/plugin-vue";
import svgLoader from "vite-svg-loader";
import ckeditor5 from "@ckeditor/vite-plugin-ckeditor5";

const require = createRequire( import.meta.url );

export default defineConfig( {
  plugins: [
    vue(),
    ckeditor5({ theme: require.resolve("@ckeditor/ckeditor5-theme-lark") }),
    svgLoader(),
  ],
} );

Hi,I used your method and the editor loaded normally, but text cannot be entered in the editor.

[gregg-cbs]

Im in a new create react app.. The react ckeditor doesnt allow the 'editor-classic' editor. So i tried this in a useEffect but I see this error:

  ClassicEditor.create(container, {
    plugins: [
      Essentials, Paragraph, Heading, BlockQuote
    ],
    toolbar: ["heading", "blockQuote"]
  })

[Witoso]

The react ckeditor doesnt allow the 'editor-classic' editor.

Could you share your full setup?

[betsylotus]

The react ckeditor doesnt allow the 'editor-classic' editor.

Could you share your full setup?

// vite.config.ts

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

import svgLoader from 'vite-svg-loader'
import ckeditor5 from '@ckeditor/vite-plugin-ckeditor5'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    ckeditor5({ theme: require.resolve('@ckeditor/ckeditor5-theme-lark') }),
    svgLoader()
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})


// App.vue

<template>
  <div class="app-container">
    <ckeditor :editor="InlineEditor" v-model="editorData" :config="editorConfig"></ckeditor>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { InlineEditor } from '@ckeditor/ckeditor5-editor-inline'

import { Essentials } from '@ckeditor/ckeditor5-essentials'
import { Bold, Italic } from '@ckeditor/ckeditor5-basic-styles'
import { Link } from '@ckeditor/ckeditor5-link'
import { Paragraph } from '@ckeditor/ckeditor5-paragraph'

const editorData = ref('<p>hello world</p>')

const editorConfig = ref({
  plugins: [Essentials, Bold, Italic, Link, Paragraph],

  toolbar: {
    items: ['bold', 'italic', 'link', 'undo', 'redo']
  }
})
</script>

<style lang="less" scoped></style>

[handmade-medium]

I was able to fix by allowing the raw-loader for all svg

   rules: [
      {
        test: /\.(svg)(\?.*)?$/,
      //   exclude: [
      //     /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
      //   ],
      //   use: [
      //     {
      //       loader: 'file-loader',
      //     }
      //   ]
      // },
      // {
      //   test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
        use: [ 'raw-loader' ]
      },