---
title: "Quick Toolbars plugin"
description: "User interface controls to create content faster."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/quickbars/"
md_url: "https://www.tiny.cloud/docs/tinymce/5/quickbars/index.md"
version: "5"
last_updated: "2024-04-16T01:50:26Z"
tokens: 1883
---
Important This page documents TinyMCE 5. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/quickbars/).
# 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.

> **Note:** The Quick Toolbars plugin provides the contextual toolbars found in the `inlite` theme from TinyMCE 4 and earlier.

## Interactive example

**Example**

```js
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

```js
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

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

#### Example: Disabling the Quick Selection context toolbar

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

#### Example: Disabling the Quick Image context toolbar

> **Note:** This feature is only available for TinyMCE 5.2 and later.

```js
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

```js
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.

> **Note:** To enable automatic upload of images on insertion, [image upload](../upload-images/) must be configured.

#### Example: Using quickimage in the editor toolbar

```js
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

```js
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](../available-toolbar-buttons/). The Quick Selection toolbar is intended for buttons related to formatting content, but any [TinyMCE toolbar buttons](../available-toolbar-buttons/) or [custom toolbar buttons](../custom-toolbarbuttons/) 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

```js
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`.

```js
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](../available-toolbar-buttons/). The Quick Insert toolbar is intended for buttons related to inserting content, but any [TinyMCE toolbar buttons](../available-toolbar-buttons/) or [custom toolbar buttons](../custom-toolbarbuttons/) 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

```js
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`.

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

### `quickbars_image_toolbar`

> **Note:** 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](#plugins/opensource/quickbars). To change the buttons on the Quick Image toolbar, provide a space-separated string of [toolbar button names](#advanced/available-toolbar-buttons/). The Quick Image toolbar is intended for image-related buttons, but any [TinyMCE toolbar buttons](#advanced/available-toolbar-buttons/) or [custom toolbar buttons](#ui-components/toolbarbuttons) 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

```js
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`.

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