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

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.ts                     # Editor setup used when running the `<%= packageManager %> run start` command.
├─ scripts
│  └─ synchronize-translations.js  # Validates and synchronizes translation files.
├─ src
│  ├─ <%= formattedNames.plugin.lowerCaseMerged %>.ts
│  ├─ augmentation.ts              # Type augmentations for the `@ckeditor/ckeditor5-core` package. Read more in PluginsMap and CommandsMap.
│  ├─ index.ts                     # The modules exported by the package.
│  └─ **/*.ts                      # All TypeScript source files should be saved here.
├─ tests
│  ├─ <%= formattedNames.plugin.lowerCaseMerged %>.ts
│  └─ **/*.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.
│  └─ styles
│     └─ **/*.css                 # All stylesheet files should be saved here.
├─ typings
│  └─ **/*.d.ts                   # Files containing type definitions.
├─ tsconfig.json                  # TypeScript configuration file.
└─ ...

Reporting issues

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