Quick Toolbars plugin

The Quick Toolbar plugin adds three context toolbars:

A Quick Selection toolbar - Shown when text is selected, providing formatting buttons such as: bold, italic, and link.
A Quick Insert toolbar - Shown when a new line is added, providing buttons for inserting objects such as tables and images.
A Quick Image toolbar - Shown when an image or figure is selected, providing image formatting buttons such as alignment options.

This plugin also adds three new toolbar buttons:

Quick Link - An inline form for creating and editing links without a dialog.
Quick Image - Prompts the user to select a local image to upload.
Quick Table - Inserts a 2x2 table without prompting the user to select the number of rows and columns.

The Quick Toolbars plugin provides the contextual toolbars found in the inlite theme from TinyMCE 4 and earlier.

Interactive example

TinyMCE
HTML
CSS
JS
Edit on CodePen

The Quickbars plugin in the Classic (iframe) editor

The Quickbars plugin in an inline editor

TinyMCE Logo

Welcome to the Quickbars demo for TinyMCE Classic (iframe) mode

To see:

The Quick Insert Toolbar, place the cursor at the start of an empty line in the editor.
The Quick Selection Toolbar, select (highlight) any text in the editor.
The Quick Image Toolbar, select any image in the editor.

<h3>The Quickbars plugin in the Classic (iframe) editor</h3>

<textarea id="iframe">
  <p><img style="display: block; margin-left: auto; margin-right: auto;" title="Tiny Logo" src="https://www.tiny.cloud/docs/images/logos/android-chrome-256x256.png" alt="TinyMCE Logo" width="128" height="128" /></p>
  <h4 style="text-align: center;">Welcome to the Quickbars demo for TinyMCE Classic (iframe) mode</h4>
  <p>To see:</p>
  <ul>
    <li>The <strong>Quick Insert Toolbar</strong>, place the cursor at the start of an empty line in the editor.</li>
    <li>The <strong>Quick Selection Toolbar</strong>, select (highlight) any text in the editor.</li>
    <li>The <strong>Quick Image Toolbar</strong>, select any image in the editor.</li>
  </ul>
</textarea>

<h3>The Quickbars plugin in an inline editor</h3>

<div id="inline-distraction-free" class="my-inline-editor">
  <p><img style="display: block; margin-left: auto; margin-right: auto;" title="Tiny Logo" src="https://www.tiny.cloud/docs/images/logos/android-chrome-256x256.png" alt="TinyMCE Logo" width="128" height="128" /></p>
  <h4 style="text-align: center;">Welcome to the Quickbars demo for TinyMCE Classic (iframe) mode</h4>
  <p>To see:</p>
  <ul>
    <li>The <strong>Quick Insert Toolbar</strong>, place the cursor at the start of an empty line in the editor.</li>
    <li>The <strong>Quick Selection Toolbar</strong>, select (highlight) any text in the editor.</li>
    <li>The <strong>Quick Image Toolbar</strong>, select any image in the editor.</li>
  </ul>
</div>

.my-inline-editor:hover {
  box-shadow: 0 0 4px #1976D2;
  border-radius: 4px;
}
.my-inline-editor:focus {
  box-shadow: 0 0 4px #1976D2;
  border-radius: 4px;
}
.my-inline-editor {
  padding: 12px;
}

tinymce.init({
  selector: 'textarea#iframe',
  plugins: 'quickbars table image link lists media autoresize help',
  toolbar: 'undo redo | formatselect | bold italic | alignleft aligncentre alignright alignjustify | indent outdent | bullist numlist',
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
});

tinymce.init({
  selector: 'div#inline-distraction-free',
  menubar: false,
  inline: true,
  plugins: [
    'autolink',
    'autoresize',
    'codesample',
    'link',
    'lists',
    'media',
    'powerpaste',
    'table',
    'image',
    'quickbars',
    'codesample',
    'help'
  ],
  toolbar: false,
  quickbars_insert_toolbar: 'quicktable image media codesample',
  quickbars_selection_toolbar: 'bold italic underline | formatselect | bullist numlist | blockquote quicklink',
  contextmenu: 'undo redo | inserttable | cell row column deletetable | help',
  powerpaste_word_import: 'clean',
  powerpaste_html_import: 'clean',
});

Basic setup

tinymce.init({
  selector: 'div.tinymce',
  plugins: [ 'quickbars' ]
});

Disabling specific quick toolbars

The following examples show how to disable specific quick toolbars for editors where they are not required.

Example: Disabling the Quick Insert context toolbar

tinymce.init({
  selector: 'div.tinymce',
  plugins: [ 'quickbars' ],
  quickbars_insert_toolbar: false
});

Example: Disabling the Quick Selection context toolbar

tinymce.init({
  selector: 'div.tinymce',
  plugins: [ 'quickbars' ],
  quickbars_selection_toolbar: false
});

Example: Disabling the Quick Image context toolbar

This feature is only available for TinyMCE 5.2 and later.

tinymce.init({
  selector: 'div.tinymce',
  plugins: [ 'quickbars' ],
  quickbars_image_toolbar: false
});

Plugin-specific toolbar buttons

Quick Link

The Quick Link (quicklink) toolbar button lets the user quickly insert/edit links inline. It is included in the Quick Selection context toolbar by default and can be used in other context toolbars.

Example: Using quicklink in a custom context toolbar

tinymce.init({
  selector: 'div.tinymce',
  plugins: [ 'quickbars' ],
  setup: function(editor) {
    editor.ui.registry.addContextToolbar('imageselection', {
      predicate: function(node) {
        return node.nodeName === 'P';
      },
      items: 'quicklink',
      position: 'node'
    });
  }
});

Quick Image

The Quick Image (quickimage) toolbar button allows users to quickly insert images from their computer into the editor. It is included in the Quick Insert context toolbar by default and can be used in other toolbars.

To enable automatic upload of images on insertion, image upload must be configured.

Example: Using quickimage in the editor toolbar

tinymce.init({
  selector: 'div.tinymce',
  plugins: [ 'quickbars' ],
  toolbar: 'quickimage'
});

Quick Table

The Quick Table (quicktable) toolbar button inserts a 2x2 table with 100% width. It is included in the Quick Insert context toolbar by default and can be used in other toolbars.

Example: Using quicktable in the editor toolbar

tinymce.init({
  selector: 'div.tinymce',
  plugins: [ 'quickbars' ],
  toolbar: 'quicktable'
});

Configuration options

quickbars_selection_toolbar

The quickbars_selection_toolbar option configures the Quick Selection toolbar provided by the quickbars plugin. To change the buttons on the Quick Selection toolbar, provide a space-separated string of toolbar button names. The Quick Selection toolbar is intended for buttons related to formatting content, but any TinyMCE toolbar buttons or custom toolbar buttons are allowed.

To disable the Quick Selection toolbar, set quickbars_selection_toolbar to false.

Type: String

Defaults: bold italic | quicklink h2 h3 blockquote

Example: Customizing the Quick Selection toolbar

tinymce.init({
  selector: 'div.tinymce',
  plugins: 'quickbars',
  quickbars_selection_toolbar: 'bold italic | formatselect | quicklink blockquote'
});

Example: Disabling the Quick Selection toolbar

To disable the Quick Selection toolbar, set quickbars_selection_toolbar to false.

tinymce.init({
  selector: 'div.tinymce',
  plugins: 'quickbars',
  quickbars_selection_toolbar: false
});

`quickbars_insert_toolbar`

The quickbars_insert_toolbar option configures the Quick Insert toolbar provided by the quickbars plugin. To change the buttons on the Quick Insert toolbar, provide a space-separated string of toolbar button names. The Quick Insert toolbar is intended for buttons related to inserting content, but any TinyMCE toolbar buttons or custom toolbar buttons are allowed.

To disable the Quick Insert toolbar, set quickbars_insert_toolbar to false.

Type: String

Defaults: quickimage quicktable

Example: Customizing the Quick Insert toolbar

tinymce.init({
  selector: 'div.tinymce',
  plugins: 'quickbars hr pagebreak',
  quickbars_insert_toolbar: 'quickimage quicktable | hr pagebreak'
});

Example: Disabling the Quick Insert toolbar

To disable the Quick Insert toolbar, set quickbars_insert_toolbar to false.

tinymce.init({
  selector: 'div.tinymce',
  plugins: 'quickbars',
  quickbars_insert_toolbar: false
});

`quickbars_image_toolbar`

This feature is only available for TinyMCE 5.2 and later.

The quickbars_image_toolbar option configures the Quick Image toolbar provided by the quickbars plugin. To change the buttons on the Quick Image toolbar, provide a space-separated string of toolbar button names. The Quick Image toolbar is intended for image-related buttons, but any TinyMCE toolbar buttons or custom toolbar buttons are allowed.

To disable the Quick Image toolbar, set quickbars_image_toolbar to false.

Type: String or false

Defaults: alignleft aligncenter alignright

Example: Customizing the Quick Image toolbar

tinymce.init({
  selector: 'div.tinymce',
  plugins: 'quickbars image imagetools',
  quickbars_image_toolbar: 'alignleft aligncenter alignright | rotateleft rotateright | imageoptions'
});

Example: Disabling the Quick Image toolbar

To disable the Quick Image toolbar, set quickbars_image_toolbar to false.

tinymce.init({
  selector: 'div.tinymce',
  plugins: 'quickbars',
  quickbars_image_toolbar: false
});