TinyMCE file manager integration sample (manual toolbar)

Play on CodePen All samples on CodePen External link

Demo

HTML

JavaScript

CSS

<h1 class="h5 mb-3">Flmngr: TinyMCE file manager (manual toolbar)</h1>

<textarea id="editor"></textarea>

"use strict";
tinymce.init({
    selector: "#editor",
    plugins: "file-manager,link,image",
    ui: {
        useAutoToolbar: false
    },
    toolbar: [
        'Upload Flmngr ImgPen | bold italic |  | Image ImagePreview2 ImageGallery2 | fontsize blocks | alignleft aligncenter alignright alignjustify | forecolor backcolor removeformat',
    ],
    Flmngr: {
        apiKey: "FLMNFLMN", // default free key
    }
});

body {
  padding: 20px;
  background-color: #F4F4F4;
}

.tox-promotion {
  display: none !important;
}

This sample demonstrates the installation of Flmngr into the TinyMCE editor with a feature to add Flmngr buttons one by one instead of the default automatic buttons added by Flmngr itself.

The parameter ui.useAutoToolbar handles the type of the toolbar. If you already have your own free API key, you can do it in visually in the Dashboard).

Then, you can modify your existing toolbar definition and pass all available Flmngr buttons to it (they are also listed in the Dashboard).