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.

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 | blocks | bold italic | alignleft aligncentre alignright alignjustify | indent outdent | bullist numlist',
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});

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 | blocks | 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: 'textarea', // change this value according to your HTML
  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: 'textarea', // change this value according to your HTML
  plugins: 'quickbars',
  quickbars_insert_toolbar: false
});

Example: disabling the Quick Selection context toolbar

tinymce.init({
  selector: 'textarea', // change this value according to your HTML
  plugins: 'quickbars',
  quickbars_selection_toolbar: false
});

Example: disabling the Quick Image context toolbar

tinymce.init({
  selector: 'textarea', // change this value according to your HTML
  plugins: 'quickbars',
  quickbars_image_toolbar: false
});

Plugin-specific toolbar buttons

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.

tinymce.init({
  selector: 'textarea', // change this value according to your HTML
  plugins: 'quickbars link',
  setup: (editor) => {
    editor.ui.registry.addContextToolbar('paragraphlink', {
      predicate: (node) => {
        return node.nodeName.toLowerCase() === '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: 'textarea', // change this value according to your HTML
  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: 'textarea', // change this value according to your HTML
  plugins: 'quickbars',
  toolbar: 'quicktable'
});

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

Default value: 'bold italic | quicklink h2 h3 blockquote'

Example: customizing the Quick Selection toolbar

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'quickbars',
  quickbars_selection_toolbar: 'bold italic | blocks | quicklink blockquote'
});

Example: disabling the Quick Selection toolbar

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

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  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

Default value: 'quickimage quicktable'

Example: customizing the Quick Insert toolbar

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'quickbars 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: 'textarea',  // change this value according to your HTML
  plugins: 'quickbars',
  quickbars_insert_toolbar: false
});

quickbars_image_toolbar

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

Default value: 'alignleft aligncenter alignright'

Example: customizing the Quick Image toolbar

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'quickbars image editimage',
  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: 'textarea',  // change this value according to your HTML
  plugins: 'quickbars',
  quickbars_image_toolbar: false
});

Toolbar buttons

The Quick Toolbars plugin provides the following toolbar buttons:

Toolbar button identifier Description

quickimage

Inserts an image from the local machine.

quicklink

Inserts a link in a quicker way.

quicktable

Inserts a table 2x2.

These toolbar buttons can be added to the editor using: