---
title: "Setup inline editing mode"
description: "Understand the difference between traditional forms-based editing and advanced inline editing."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/use-tinymce-inline/"
md_url: "https://www.tiny.cloud/docs/tinymce/7/use-tinymce-inline/index.md"
version: "7"
last_updated: "2025-05-12T10:13:35Z"
tokens: 813
---
Important This page documents TinyMCE 7. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/use-tinymce-inline/).
# Setup inline editing mode
TinyMCE has three main integration modes: a *classic* full editor mode, an *inline* editing mode, and a distraction-free mode.
The inline editing mode is used for merging the editing and reading views of the page for a seamless editing experience and true WYSIWYG behavior.
Inline editing mode does not replace the selected element with an iframe, but instead edits the element’s content in-place. Inline editors are designed:
- To be "hidden" until the editable content is selected,
- To use the CSS stylesheet of the page where it initializes, and
- To have minimal UI around the content area to minimize the area occupied by the editor.
> **Important:** [Comments](../introduction-to-tiny-comments/) are only supported when TinyMCE is run in *classic* mode. Comments require the [Sidebar](../customsidebar/), and Sidebars are not supported in *inline* or *distraction free* mode. For more information on the differences between the editing modes, see [Inline editing mode](#).
## Enabling inline editing mode
Inline mode only works on content within a block element (such as: `div` or `h1`). To enable inline mode, set the `inline` option to `true`. For example:
```html
TinyMCE Inline Editing Mode Guide
```
The following demonstration is using four TinyMCE editors in inline mode, two for the headings, and two for the body text.
**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);
```
For information on inline mode and the `inline` setting, see: [User interface options - inline](../inline-editor-options/#inline).