TinyMCE File Manager from Field
Browse all samples

TinyMCE File Manager: Manual Toolbar

File Manager live demo with code sample 21 of 27

Play on CodePen External link File Manager API
CKEditor 5 File Manager

When to use

Custom configuration of the TinyMCE toolbar is sometimes required. Of course, Flmngr can add buttons automatically on a separate line, but this may not suit you.

So you can configure your TinyMCE toolbar as usual and add the necessary file manager buttons wherever you want.

How it works

To prevent the Flmngr file manager from automatically adding its buttons to the TinyMCE toolbar, please use the useAutoToolbar: false option in the ui section.

Then configure the toolbar as usual with the help of the toolbar parameter.

How to start using

This code is for use with TinyMCE — the world's most popular classic WYSIWYG HTML editor.

Install the TinyMCE file manager plugin for quick implementation in your CMS or web app. All versions of TinyMCE are supported.

You can also install it into TinyMCE as part of the N1ED plugin, which not only provides a file manager, but also adds tools for Bootstrap or Tailwind block-by-block editing and support for a wide range of widgets.

The Flmngr API can be accessed directly from TinyMCE or from a TinyMCE+N1ED setup and used outside the editor as well.

Demo
Code
HTML
CSS
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: "FLMN24RR1234123412341234", // default free key
  }
});
<h2 class="mb-3">Flmngr: TinyMCE File Manager (Manual Toolbar)</h2>

<textarea id="editor"></textarea>
body {
  padding: 20px;
  background-color: #F4F4F4;
}

h2 {
  font-weight: bold;
}

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