Custom Media Library

You can use Custom Media Library features to show custom media files inside the editor. This can be useful if you have already gathered media files from a user inside your platform, or when you have recommended media files you'd like to show to your user.

There are two ways of adding your custom media library to the editor:

  1. Data-based: Use Shakr's native UI to show media library, but with your own media files.
  2. UI-based: Show your entirely custom media library UI by attaching the event handler to the editor.

Media data structure#

Both data-based and UI-based integration methods share the same data structure, as shown below.

{
"id": "string", // Unique ID of the media file
"title": "string", // Name of the media file
"thumb": "string", // Thumbnail image of the media file
"url": "string" // URL of the media file
}

Data-based integration#

By using the data-based method, you can conveniently integrate and show your custom media library in the editor without building a separate UI from the ground up.

Sample code#

const editor = await createShakrEditor({
...
// Media library option
media_libraries: [
{
id: 'sample-image',
title: 'Sample Image Library',
media_type: 'image', // Specifies type of media files inside this library
custom_ui: false // Set false for data-based integration
}
]
});
editor.on('get_media', ({ search_term, page, callback }) => {
// Triggered on first open of custom media libary,
// or when user entered search query inside custom media library
callback({
// Example when you have full list of media files
// Return entire array when search_term is not set,
// and return partial media files when search_term is provided
media_items: search_term ? media_items.filter(media => media.title.includes(search_term)) : media_items,
page_total: 1
});
});

Screenshots#

Media Library Media Library Modal

Please refer to the GitHub repository for example codes, or Reference for more information.

UI-based integration#

By using the UI-based method, you can show and provide media files in your customized UI built with your design and functionalities.

const editor = await createShakrEditor({
...
// Media library option
media_libraries: [
{
id: 'sample-image',
title: 'Sample Image Library',
media_type: 'image',
custom_ui: true // Set true for UI-based integration
}
]
});
function openMediaLibrary() {
// Triggered when user clicks
// media library button inside the editor
// Show custom UI, and return
// media files selected via callback
...
callback({ media_items });
}
// Add event listener to open_media_library event
editor.on('open_media_library', ({ callback }) => {
openMediaLibrary(callback);
});

Screenshots#

Media Library Media Library with UI

Please refer to the GitHub repository for example codes, or Reference for more information.