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

This example shows you the inline editing capabilities of TinyMCE.

**Example**

```js
const emailHeaderConfig = {
  selector: '.tinymce-heading',
  menubar: false,
  inline: true,
  plugins: [
    'lists',
    'powerpaste',
    'autolink'
  ],
  toolbar: 'undo redo | bold italic underline',
  valid_elements: 'strong,em,span[style],a[href]',
  valid_styles: {
    '*': 'font-size,font-family,color,text-decoration,text-align'
  },
  powerpaste_word_import: 'clean',
  powerpaste_html_import: 'clean',
};

const emailBodyConfig = {
  selector: '.tinymce-body',
  menubar: false,
  inline: true,
  plugins: [
    'link', 'lists', 'powerpaste',
    'autolink', 'tinymcespellchecker'
  ],
  toolbar: [
    'undo redo | bold italic underline | fontfamily fontsize',
    'forecolor backcolor | alignleft aligncenter alignright alignfull | numlist bullist outdent indent'
  ],
  valid_elements: 'p[style],strong,em,span[style],a[href],ul,ol,li',
  valid_styles: {
    '*': 'font-size,font-family,color,text-decoration,text-align'
  },
  powerpaste_word_import: 'clean',
  powerpaste_html_import: 'clean',
};

tinymce.init(emailHeaderConfig);
tinymce.init(emailBodyConfig);
```