Using CKEditor 5 DecoupledEditor from plain JavaScript

Question

I am trying to build a custom editor using the CKEditor 5 Framework with my own plugins.

My webpack.config.js contains the lines:

module.exports = {
    // https://webpack.js.org/configuration/entry-context/
    entry: './app.js',
...

So when I run

./node_modules/.bin/webpack

It generate a bundle.js file for me, which include the content of my app.js.

If my app.js file calls DecoupledEditor.create(...) and if I build it all with ./node_modules/.bin/webpack and then include <script src='dist/bundle.js' /> in my HTML file, anything is working, and I get a CKEditor with my own plugin :)

But what I really need is the ability to call DecoupledEditor.create(...) from my own custom hand written JavaScript* which is not build using webpack and I cant get that to work.

How do I use CKEditor 5 DecoupledEditor from a plain javascript?

I guess i need to import the class but if I do a

import DecoupledEditor from '@ckeditor/ckeditor5-editor-decoupled/src/decouplededitor';

in my own javascript, I just get the error

"TypeError: Error resolving module specifier: @ckeditor/ckeditor5-editor-decoupled/src/decouplededitor"

*Really calling from GWT, but that don't really matter here.

MTilsted MTilsted · Accepted Answer · 2018-06-01T18:56:24

It turns out that if I use

<script src="https://cdn.ckeditor.com/ckeditor5/10.0.1/decoupled-document/ckeditor.js"></script>

instead of my own bundle.js I can call DecoupledEditor.create(...) directly from my javascript without any import. So I guess my issue is that I fail to build DecoupledEditor with my build script.

Using CKEditor 5 DecoupledEditor from plain JavaScript

1 Answers