Important changes to Tiny Cloud pricing > Find out more

Quick Toolbar plugin

User interface controls to create content faster.

Contribute to this page

The Quick Toolbar plugin (quickbars) enables new user interface components to help users create content faster. It can be used to create an experience similar to Medium, Quip, and other modern editing tools.

It replaces the capabilities of the inlite theme in TinyMCE 4 or earlier.

The Quick Toolbar plugin enables two new context toolbars:

  • Quick Selection - shown when text is selected for quick access to formatting commands such as bold, italic and link.
  • Quick Insert - shown when a new line is created for the quick insertion of objects such as tables and images.

It also enables three new toolbar controls:

  • Quick Link - an inline experience for creating and editing links without a dialog
  • Quick Image - immediately prompts a user to select a local image to upload
  • Quick Table - immediately inserts a 2x2 table without prompting the user to select the number of rows and columns
Example enabling both context toolbars with their default controls:
tinymce.init({
    selector: "div.tinymce",
    plugins: [ 'quickbars' ],
    toolbar: false,
    menubar: false,
    inline: true
});

Example disabling the Quick Insert toolbar:

tinymce.init({
    selector: "div.tinymce",
    plugins: [ 'quickbars' ],
    toolbar: false,
    menubar: false,
    inline: true,
    quickbars_insert_toolbar: false
});

Example disabling the Quick Selection minibar:

tinymce.init({
    selector: "div.tinymce",
    plugins: [ 'quickbars' ],
    toolbar: false,
    menubar: false,
    inline: true,
    quickbars_selection_toolbar: false
});

Plugin-specific controls

Quick Link

The Quick Link (quicklink) control lets the user quickly insert/edit links inline. It can only be used in the Quick Selection toolbar.

Example:
tinymce.init({
    selector: "div.tinymce",
    plugins: [ 'quickbars' ],
    toolbar: false,
    menubar: false,
    inline: true,
    quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote'
});

Quick Image

The Quick Image (quickimage) control lets you quickly insert images from the local computer into the editor. These can then be automatically uploaded if you configure image uploading. It can be used in both the Quick Insert toolbar and other toolbars.

Example:
tinymce.init({
    selector: "div.tinymce",
    plugins: [ 'quickbars' ],
    toolbar: false,
    menubar: false,
    inline: true,
    quickbars_insert_toolbar: 'quickimage quicktable'
});

Quick Table

The Quick Table (quicktable) control lets you quickly insert a 2x2 table with 100% width. It can be used in both the Quick Insert toolbar and other toolbars.

Example:
tinymce.init({
    selector: "div.tinymce",
    plugins: [ 'quickbars' ],
    toolbar: false,
    menubar: false,
    inline: true,
    quickbars_insert_toolbar: 'quickimage quicktable'
});

Configuration options

quickbars_insert_toolbar

The quickbars_insert_toolbar option enables specifying toolbar items to include on the Quick Insert toolbar enabled by the quickbars plugin. It is recommended to only have controls in this toolbar related to inserting content. However, nothing is restricting to use any of the available toolbar controls.

Type: String

Defaults: quickimage quicktable

Example customizing the Quick Insert toolbar
tinymce.init({
  selector: 'div.tinymce',
  plugins: 'quickbars',
  inline: true,
  quickbars_insert_toolbar: 'quickimage quicktable'
});
Example disabling the Quick Insert toolbar
tinymce.init({
  selector: 'div.tinymce',
  plugins: 'quickbars',
  inline: true,
  quickbars_insert_toolbar: false
});

quickbars_selection_toolbar

This option enables specifying toolbar items to include on the Quick Selection toolbar or to disable the toolbar.

It is recommended that only formatting related controls are specified in this toolbar. However, any of the available toolbar controls can also be used.

Type: String

Defaults: bold italic | quicklink h2 h3 blockquote

Example customizing the Quick Selection toolbar
tinymce.init({
  selector: 'div.tinymce',
  plugins: 'quickbars',
  inline: true,
  quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote'
});
Example disabling the Quick Selection toolbar
tinymce.init({
  selector: 'div.tinymce',
  plugins: 'quickbars',
  inline: true,
  quickbars_selection_toolbar: false
});

Can't find what you're looking for? Let us know.

Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.