CKEditor 5 – Development Sample

Development environment

This is a demo of the classic editor build that loads your plugin (Export) generated by the tool. You can modify this sample and use it to validate whether a plugin or a set of plugins work fine.

Export inserts text into the editor. You can click the CKEditor 5 icon in the toolbar and see the results.

Helpful resources

• Architecture
  • Core editor architecture
  • The editing engine
  • The UI library
• Browser compatibility
• The error codes
• The DLL builds

The directory structure

The code snippet below presents the directory structure.

.
├─ lang
│  └─ contexts.json    # Entries used for creating translations.
├─ sample
│  ├─ dll.html         # The editor initialized using the DLL builds. Check README for details.
│  ├─ index.html       # The currently displayed file.
│  └─ ckeditor.ts      # The editor initialization script.
├─ src
│  ├─ export.ts
│  ├─ augmentation.ts  # Type augmentations for the `@ckeditor/ckeditor5-core` module. Read more in PluginsMap and CommandsMap.
│  ├─ index.ts         # The modules exported by the package when using the DLL builds.
│  └─ **/*.ts          # All TypeScript source files should be saved here.
├─ tests
│  ├─ export.ts
│  ├─ index.ts         # Tests for the plugin.
│  └─ **/*.ts          # All tests should be saved here.
├─ theme
│  ├─ icons
│  │  ├─ ckeditor.svg  # The CKEditor 5 icon displayed in the toolbar.
│  │  └─ **/*.svg      # All icon files should be saved here.
│  └─ **/*.css         # All CSS files should be saved here.
├─ typings
│  └─ **/*.d.ts        # Files containing type definitions.
├─ .editorconfig
├─ ...
├─ README.md
└─ tsconfig.json       # TypeScript configuration file.

Reporting issues

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

• CKEditor 5
• The package generator