Development Sample

Development environment

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

<%= formattedNames.plugin.spacedOut %> 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 directory structure

The code snippet below presents the directory structure.

.
├─ lang
│  └─ contexts.json                # Entries used for creating translations.
├─ sample
│  ├─ index.html                   # The HTML file for the development sample.
│  └─ index.js                     # Editor setup used when running the `<%= packageManager %> run start` command.
├─ scripts
│  └─ synchronize-translations.js  # Validates and synchronizes translation files.
├─ src
│  ├─ <%= formattedNames.plugin.lowerCaseMerged %>.js
│  ├─ index.js                     # The modules exported by the package.
│  └─ **/*.js                      # All JavaScript source files should be saved here.
├─ tests
│  ├─ <%= formattedNames.plugin.lowerCaseMerged %>.js
│  └─ **/*.js                      # 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.
│  └─styles
│     └─ **/*.css                  # All stylesheet files should be saved here.
└─ ...

Reporting issues

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

• CKEditor 5
• The package generator