vuejs ckeditor TypeError: Cannot read properties of null (reading 'getAttribute')

Solution 1:

I came across the same error and managed to find the solution. You may also solve the problem, so I'll share the way.

In your webpack file(I assume it's webpack.mix.js in your laravel project root), set targetSVG /(.(png|jpe?g|gif|webp|avif)$|^((?!font).).svg$)/ instead of /(.(png|jpe?g|gif|webp)$|^((?!font).).svg$)/.

- const targetSVG = /(\.(png|jpe?g|gif|webp)$|^((?!font).)*\.svg$)/;
+ const targetSVG = /(\.(png|jpe?g|gif|webp|avif)$|^((?!font).)*\.svg$)/;

I found this solution through debugging by adding console.log(rule.test.toString()) inside the for (let rule of rules) loop.

A few years ago, I used Laravel7 with Vue2 and could use CKEditor5 with the older version settings(without "avif"). But now I use Laravel8 with Vue2 and TypeError: Cannot read properties of null (reading 'getAttribute') occurs with the older version settings.

I hope you can use CKEditor5!