close

Filter

loading table of contents...

Studio Developer Manual / Version 2307

Table Of Contents

10.1.3.3 Custom Assets in CKEditor 5 Package

Custom assets, such as images, cannot be used out of the box in the @coremedia-blueprint/​studio-client.​ckeditor5 package. This section describes how to adjust the webpack configuration by showing the common usecase of using images in the editor.

Note

Note

First, its important to understand why it is not sufficient to simply use a webpack file-loader: When added to the CoreMedia Studio bundle, the @coremedia-blueprint/​studio-client.​ckeditor5 package is not processed as other Blueprint packages, containing a jangaroo config file. Static resources will simply not be included in the final bundle. Even though, using a file-loader would work just fine in this package, we would not be able to access the resources in a running Studio. Inlined assets can help to solve this issue by keeping the assets directly inside the JavaScript code.

Inlined Assets

You can enable inlined assets for common image formats in the webpack config as follows.

module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        type: 'asset/inline'
      },
      ...
    ]
}

Example 10.4. Webpack config with inlined assets


With inlined assets enabled, images will be included into the generated JavaScript bundle and can then be displayed in the browser without having to be added as separate resources. Please have a look into the webpack documentation to learn more about Inlining Assets in Asset Modules.

You can now add images to the package and reference them in your CSS files.

.example {
  background: url("../img/image.png");
}

Example 10.5. Inlined asset usage in CSS files


Or use them in your TypeScript files.

import customImage from "../img/image.png";

Example 10.6. Inlined asset usage in TypeScript files


Note

Note

Please note that importing images into TypeScript modules may require to declare a module for the imported file ending in a separate .d.ts file. Additionally esModuleInterop will have to be enabled in the tsconfig.json.

Search Results

Table Of Contents
warning

Your Internet Explorer is no longer supported.

Please use Mozilla Firefox, Google Chrome, or Microsoft Edge.