使用 webpack 将插件安装到 Laravel 5 中的 CKEditor 5

Question

I have got a small issue with installing plugins to CKEditor integrated to Laravel 5.6. According to integration guide from CKEditor document, I was able to add@ckeditor/ckeditor5-build-classic dependency using npm to the project and it was working just fine with webpack.

But the problem is that I can't add custom plugin which is not included to the CKEditor by default. I'm following the guide to add custom plugin but it's not really working fine with webpack in laravel itself. For example, I tried to add @ckeditor/ckeditor5-alignment , but didn't work and I got the following console error.

TypeError: Cannot read property 'getAttribute' of null

I guess this could be something that I have not added all necessary plugins when setup ClassicEditor instance. So I tried another thing. I have installed the plugin to ckeditor build and I got the custom build. But when I'm trying to import the build in the custom path with the following statement, it's not importing.

import ClassicEditor from '../plugins/vendor/ckeditor/build/ckeditor';

If I just remove build directory from node_modules and copy this custom build, I am able to make it work with the following statement.

import ClassicEditor from '@ckeditor/ckeditor5-build-classic/build/ckeditor';

This is not a professional way to edit/update in node_modules.

So my question is:

How can I install custom plugin to CKEditor on Laravel itself?

Or how can I add the custom CKEditor build to the project without customizing node_modules?

Answer 1

I have used CKEditor among others in my Laravel projects, but here is how I went about it:

1. I downloaded the js and CSS files from CKEditor website and unzip the files
2. I copy those files in the public folder of my Laravel Project
3. You can access and use them in your blade pages like this

<code>
   <script src="{{asset('js/ckeditor.js')}}"></script>
   <link rel="stylesheet: href="{{asset('js/ckeditor.js')}}" />
</code>