This plugin provides a simple and minimal browser API for other plugins to consume (almost identical to the browser plugin) as an alternative to the filebrowser plugin.

It does absolutely not care about advanced features like file uploads or the likes. If you need those features, stick with the filebrowser. It rather focuses on the easy integration of your application (CMS or whatever), which usually provides a means to upload files anyway.

Unlike the filebrowser plugin it does not use URL parameters to pass values between the editor and the browser windows, but uses the browser-native window.postMessage() functionality to communicate between both. This way you can easily pass more than just the URL of the selected element from the browser to the editor or even multiple elements at once.

Difference between browser and mediabrowser plugin

There is only one difference between the browser and the mediabrowser plugin:

Whilst the mediabrowser plugin offers a config option to set a global browser URL for all plugins that use it, the browser plugin does not have any config option at all, but your plugin surely could have. With the browser plugin you could configure the browser URL for each button individually, if you want.

Plugin Integration

To use the provided API in your plugin, you just have to define a callback function mediabrowser in the browse server button configuration of your plugin's dialog, p.e.

{
    id: 'browse',
    type: 'button',
    label: common.browseServer,
    hidden: true,
    mediabrowser: function (data) {
        if (data.src) {
            var dialog = this.getDialog();

            ['src', 'type', 'alt'].forEach(function (item) {
                if (!!data[item]) {
                    dialog.getContentElement('info', item).setValue(data[item]);
                }
            });
        }
    }
}

Browser Integration

You can implement your browser as you wish, the only two requirements are that you configure the URL to your browser as mediabrowserUrl p.e.

config.mediabrowserUrl: '/url/to/browser';

and that your browser notifies the editor by posting a message p.e. like

window.opener.postMessage({
    alt: 'Optional alternative text',
    src: '/url/to/media'
}, origin);

The type and structure of your message is complety up to you, p.e. you can use a simple string if you are only interested in one value, an object or an array.

Demo

• Classic Editor
• Inline Editor
• Minimalistic Browser

This plugin allows to search the DOM for matching text but it operates on strings instead of text nodes. It gives the possibility to get the position of the matched text regardless of its HTML representation.

The Text Match plugin provides the search functionality for the Autocomplete feature. It works best with the Text Watcher plugin.

This widgets serves as a container for multiple instances of other media widgets in order to display them as a gallery, p.e. with the aid of flexbox or grid layout, or as a slider/carousel, p.e. with your own implementation or one of your choice, or as whatever else comes into your mind.

This widget itself does not provide any slider/carousel functionality! It only provides a HTML structure suitable for aforementioned purposes and allows to maintain it within the editor.

The resulting HTML will be p.e.

<figure class="gallery">
    <div class="content">
        <figure class="image">
            <img src="..." />
            <figcaption>
                ...
            </figcaption>
        </figure>
        ...
    </div>
    <figcaption>
        ...
    </figcaption>
</figure>

Technical

At current state this widget

• only allows figure elements as child elements (filtering takes place on downcast),
• does not offer any configuration options and
• does not offer a dialog to set custom classes or values.

This could change in one of the future versions.

Demo

• Classic Editor
• Inline Editor

This plugin introduces support for easy inserting of emoji characters in a unified, platform-independent way. Emojis are inserted by typing codes based on Unicode Short Names in the editor or by opening the emoji dropdown with a toolbar button.

The emoji dropdown allows you to filter the list, navigate by category or search for relevant emoji.

Keyword matching functionality ensures that when you are looking for a term (such as "doctor"), related matches (like ":face_with_medical_mask:", ":man_health_worker:", ":woman_health_worker:", ":hospital:" or ":pill") will be displayed, too.

The Emoji plugin that provides this functionality is an implementation of the Autocomplete feature. It includes an autocomplete component that will list available emojis after the user types the colon character (":") in the editor content.