---
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/5/use-tinymce-distraction-free/index.md"
version: "5"
last_updated: "2024-03-26T08:09:19Z"
tokens: 562
---
Important This page documents TinyMCE 5. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/use-tinymce-distraction-free/).
# 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
var dfreeHeaderConfig = {
  selector: '.dfree-header',
  menubar: false,
  inline: true,
  toolbar: false,
  plugins: [ 'quickbars' ],
  quickbars_insert_toolbar: 'undo redo',
  quickbars_selection_toolbar: 'italic underline',
};

var 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 | formatselect | 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](../editor-appearance/#menubar).
- The `inline` setting, see: [inline](../editor-appearance/#inline).