Bynder in the rich text editor · Bynder for Strapi

An optional CKEditor 5 menu that inserts Bynder images, video and audio into article bodies.

The rich text editor package adds a Bynder menu to the toolbar of a CKEditor 5 field, with three entries: Image, Video and Audio.

Image inserts a standard editor image with an alt text taken from the asset (its description, otherwise its name).
Video and Audio insert a media block that you can adjust after inserting it.

Set it up

It builds on the community CKEditor 5 field plugin, @_sh/strapi-plugin-ckeditor.

Install the packages: the community CKEditor plugin, ckeditor5 at the version it expects, and @bynder/compact-view. Add @gladtek/strapi-ckeditor-bynder.

import { defaultHtmlPreset, setPluginConfig } from '@_sh/strapi-plugin-ckeditor';
import { BynderMedia, withBynderButton } from '@gladtek/strapi-ckeditor-bynder';

export default {
  config: { locales: [] },
  register() {
    // setPluginConfig replaces the preset list, so the default preset is passed too
    setPluginConfig({
      presets: [
        defaultHtmlPreset,
        {
          ...defaultHtmlPreset,
          name: 'bynderHtml',
          description: 'HTML editor with a Bynder menu',
          editorConfig: {
            ...defaultHtmlPreset.editorConfig,
            plugins: [...(defaultHtmlPreset.editorConfig.plugins ?? []), BynderMedia],
            toolbar: withBynderButton(defaultHtmlPreset.editorConfig.toolbar),
          },
        },
      ],
    });
  },
  bootstrap() {},
};

Use the preset on a field. In the content type’s schema.json:

"body": {
  "type": "customField",
  "customField": "plugin::ckeditor5.CKEditor",
  "options": { "preset": "bynderHtml" }
}

Rebuild the admin.

Video and audio blocks

Click a video or audio block in the editor and a settings bar appears.

Setting	Applies to	Options
Size	both	Small, Medium, Large, Full width
Align	both	Start, Center, End (these follow the page direction, so they work in right-to-left languages)
Ratio	video	Original, 16:9, 4:3, Square, Vertical 9:16
Silent loop	video	Plays on its own, muted, in a loop, without controls
Replace	both	Pick another file from Bynder and keep the settings

Click under the player to type a caption. An empty caption is not saved.

The block is saved as HTML. The settings are CSS classes, so your site decides what each one looks like. See Media block HTML and CSS.