CKEditor 5 – DLL Sample

Production sample

This is a demo of the classic editor build, initialized using the DLL builds.

Your plugin (Import) generated by the tool is already loaded into the editor. By default, it has an example button that adds some text to the editor. Whenever you change the plugin's name or toolbar items, make sure to update the editor configuration in the sample/dll.html file.

Uncaught TypeError

If the editor is not initialized correctly and the browser console displays an error such as the following:

Uncaught TypeError: Cannot read properties of undefined (reading 'Import') at dll.html:85

it means that the DLL build of the @esi_package/ckeditor5-import package has not been created.

Please call the npm run dll:build command in the CLI, and after it finishes, refresh the page.

Anatomy of the DLL build

The source of the DLL build is located in the src/index.ts file. It may export as many things as the package offers.

Maintaining the sample

Whenever you change objects exported by the DLL build, please review the content of the sample. Things to keep in mind:

Review the list of loaded plugins in the configuration.
Review names of items registered in toolbars.

The goal

The primary purpose of the sample is to verify whether the plugins in the package will work together with CKEditor 5 created with the DLL approach.

Publishing the package

While releasing TypeScript package on npm, few things have to be taken care of:

Building DLL
Building TypeScript
Changing the main filed in package.json to .js extension

Likewise, after the release, there are few steps:

Deleting compiled TypeScript files (they are generated in the src directory, and create needless clutter)
Changing the main filed in package.json back to .ts extension

When calling npm publish, those steps are handled automatically by predefined prepublishOnly and postpublish scripts. To learn more, see NPM docs.

Reporting issues

If you found a problem with CKEditor 5 or the package generator, please, report an issue: