Studio Developer Manual / Version 2406.0
Table Of Contents
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
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.
Or use them in your TypeScript files.
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.
