How to define custom CSS classes globally for the Storyblok Richtext field

FAQ
How to define custom CSS classes globally for the Storyblok Richtext field

Using the Management API, you can apply custom classes globally to the Richtext field in Storyblok and make bulk changes across multiple components. This is beneficial when dealing with numerous Richtext fields for which you want to have the same CSS classes available. If you have very few Richtext fields, then you can use the UI for quick changes.

In the JavaScript code snippet below, we utilize the Storyblok JavaScript Client to interact with the Storyblok Management API. You can learn more about the Storyblok JavaScript Client in the official GitHub repository.

Below is a sample JavaScript code snippet that shows how to do this.

index.js

        
      import StoryblokClient from 'storyblok-js-client';

// Instantiate the Storyblok client with your account token
let Storyblok = new StoryblokClient({
  oauthToken: '[ACCOUNT TOKEN HERE]'
});

const spaceId = [SPACE ID HERE];

// Define custom classes to be applied to Richtext fields
const richTextClasses = {
  'Class 1': 'class-1',
  'Class 2': 'class-2',
  'Class 3': 'class-3'
};

// Applies custom classes to the settings of Richtext Fields in Storyblok components.
const applyRichTextClasses = async () => {
// Fetch all components in the specified space using the Storyblok Client
  const res = await Storyblok.get(`spaces/${spaceId}/components/`, {});
  res.data.components.forEach(async (component) => {
    let updates = false;
// Check if the field is a Richtext field
    Object.keys(component.schema).forEach((key) => {
      const field = component.schema[key];
      if(field.type === 'richtext') {
        // Apply custom classes to style_options
        field.style_options = Object.keys(richTextClasses).map(name => ({name, value: richTextClasses[name]}));
        updates = true;
      }
    });

// If updates are made, save the changes 
    if(updates) {
      try {
        await Storyblok.put(`spaces/${spaceId}/components/${component.id}`, { component });
        console.log(`Updated component: ${component.name}`);
      } catch(err) {
        console.log(`Error trying to update component ${component.name}: ${err}`);
      }
    }
  });
}

applyRichTextClasses();

In the code block above, we use the Management API to update the configuration of Richtext fields in all components in a space. First, we fetch all the components in the space, check for Richtext fields, and apply the custom styling options we've defined in the richTextClasses object.

The richTextClasses object is used to define custom classes for all Richtext fields in the Storyblok components, including different formatting styles. You can customize the richTextClasses object according to your specific requirements.

HINT:

When using the Management API script to make global changes to the CSS classes in Richtext fields, be aware that it will overwrite the current CSS classes applied to those fields.