---
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/5/distraction-free-demo/index.md"
version: "5"
last_updated: "2024-04-09T09:35:32Z"
tokens: 313
---
Important This page documents TinyMCE 5. 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
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);
```