Ckeditor 4: Uncaught Typeerror: Cannot Read Property 'Langentries' of Null

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

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!

CKEditor gem not working in production

The issue ended up being a difference between the development and production environments' load order of JavaScript files (production is lexigraphic and development is...not...). By replacing a require_tree in the Gemfile with a require for each file and putting the files in the order they need to load, the problem was resolved.

Adding local plugins to CKEditor

There might be multiple reasons for this.

First see addExternal API docs:

// Loads a plugin from '/myplugins/sample/plugin.js'.
CKEDITOR.plugins.addExternal( 'sample', '/myplugins/sample/' );

// Loads a plugin from '/myplugins/sample/my_plugin.js'.
CKEDITOR.plugins.addExternal( 'sample', '/myplugins/sample/', 'my_plugin.js' );

// Loads a plugin from '/myplugins/sample/my_plugin.js'.
CKEDITOR.plugins.addExternal( 'sample', '/myplugins/sample/my_plugin.js', '' );

Note that each example has a tailing / character, so try with CKEDITOR.plugins.addExternal( 'simplebutton', '//localhost/plugins/simplebutton/', 'plugin.js' ); instead.

If it still doesn't work, make sure that your web server actually returns a proper content, because SyntaxError: Unexpected token < looks like HTML was served instead of HTML. You can use your browser network inspector to check that.

Uncaught TypeError: Cannot read property '1' of null?

The issue was that this id: file.meta['key'].match(/^cache\/(.+)/)[1] did not match the prefix in Shrine.storage. My prefix was uploads/cache. I just had to change it back to cache.

CKEditor Plugin giving errors 'Uncaught TypeError: Cannot read property 'icons' of null'

The solution for me was based on this answer: ckeditor - Uncaught TypeError: Cannot read property 'icons' of null

I was not doing any image uploading but I was trying to add a plugin that I had not installed. Specifically, it was:
extraPlugins: 'tableresize',

I did not need tableresize so I just removed the tableresize from the extraPlugins line. I reloaded the page and the error was gone.

---

Related Topics