---
title: "Distraction-free editor example"
description: "Distraction-free editor"
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/distraction-free-demo/"
md_url: "https://www.tiny.cloud/docs/tinymce/7/distraction-free-demo/index.md"
version: "7"
last_updated: "2022-04-07T05:31:36Z"
tokens: 304
---
Important This page documents TinyMCE 7. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/distraction-free-demo/).
# Distraction-free editor example

## Interactive example

This example shows you how to use TinyMCE’s Distraction-free editor.

**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);
```