---
title: "TinyMCE distraction-free editing mode"
description: "Mode that renders a lightweight UI for inline editing."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/use-tinymce-distraction-free/"
md_url: "https://www.tiny.cloud/docs/tinymce/latest/use-tinymce-distraction-free/index.md"
version: "latest"
last_updated: "2022-03-31T00:32:33Z"
tokens: 508
---
# TinyMCE distraction-free editing mode

The **Distraction-free** mode renders the editor in inline mode without the menu bar or toolbar. Most of the editor functionality is accessed using: keyboard shortcuts, contextual menus, contextual toolbars, and toolbar functions provided by the `quickbars` plugin.

> **Note:** This option is not supported on mobile devices.

## Enabling distraction-free mode

To enable a basic distraction-free editor, use the following configuration.

```js
tinymce.init({
  selector: 'div.tinymce',
  plugins: [ 'quickbars' ],
  toolbar: false,
  menubar: false,
  inline: true
});
```
The demonstration editor below is a distraction-free editor with some customizations.

**Example**

```js
const dfreeHeaderConfig = {
  selector: '.dfree-header',
  menubar: false,
  inline: true,
  toolbar: false,
  plugins: [ 'quickbars' ],
  quickbars_insert_toolbar: 'undo redo',
  quickbars_selection_toolbar: 'italic underline',
};

const dfreeBodyConfig = {
  selector: '.dfree-body',
  menubar: false,
  inline: true,
  plugins: [
    'autolink', '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 | blockquote quicklink',
  contextmenu: 'undo redo | inserttable | cell row column deletetable | help',
  powerpaste_word_import: 'clean',
  powerpaste_html_import: 'clean',
};

tinymce.init(dfreeHeaderConfig);
tinymce.init(dfreeBodyConfig);
```

## Related configuration options

For information on:

- Configuring a Quick Toolbar; including `quicklink`, `quickimage`, and `quicktable`; see: [Quick Toolbar plugin](../quickbars/).
- Configuring a contextual toolbar, see: [Context Toolbar](../contexttoolbar/).
- Configuring a contextual menu, see: [Context Menu](../contextmenu/).
- Disabling the TinyMCE menubar, see: [Menubar](../menus-configuration-options/#menubar).
- The `inline` setting, see: [inline](../inline-editor-options/#inline).