---
title: "Basic setup"
description: "TinyMCE provides a range of configuration options that allow you to integrate it into your application."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/basic-setup/"
md_url: "https://www.tiny.cloud/docs/tinymce/6/basic-setup/index.md"
version: "6"
last_updated: "2022-04-22T07:11:49Z"
tokens: 2839
---
Important This page documents TinyMCE 6. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/basic-setup/).
# Basic setup

This introduction to TinyMCE details the options used in traditional form-based layouts, useful information for creating streamlined user experiences, and examples of using TinyMCE as an inline editor.

The four most common configuration options for TinyMCE are:

1. [*(Required)* The Selector configuration](#selector-configuration)
2. [The Plugin configuration](#plugin-configuration)
3. [The Toolbar configuration](#toolbar-configuration)
4. [The Menu and Menu Bar configuration](#menu-and-menu-bar-configuration)

## A note about code snippet examples

Code snippets are provided as example implementations throughout the TinyMCE documentation.

Example code snippet:

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'a_tinymce_plugin',
  a_plugin_option: true,
  a_configuration_option: 400
});
```
Snippets include the `selector` option, which is described below. Change the value of the working code block according to the HTML.

Insert the snippet into an HTML document between the `<script>` tags and update the selector as described below.

## Selector configuration

Selector configuration is required for TinyMCE integration. Selector configuration uses [CSS `selector` syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) to determine which elements on the page are editable through TinyMCE.

TinyMCE visually replaces the selected element with an `iframe` (the editable content area) and the UI elements (such as toolbar, menu bar, and status bar).

The following example replaces all `textarea` elements on the page with TinyMCE instances:

```js
tinymce.init({
  selector: 'textarea'
});
```
TinyMCE can also match an `id` attribute.

The following example replaces a `textarea` element with the `id` `"default"` on the page:

```js
tinymce.init({
  selector: 'textarea#default'
});
```
Providing a TinyMCE editor with the default configuration, such as:

**Example**

```js
tinymce.init({
  selector: 'textarea#default'
});
```
The selector can target most block elements when the editor is used in [inline editing mode](../use-tinymce-inline/). Inline mode edits the content in place, instead of replacing the element with an `iframe`.

The following example uses the `selector` in inline editing mode on a `div` element with `id` `'editable'`:

```js
tinymce.init({
  selector: 'div#editable',
  inline: true
});
```
For information on the differences between the classic and inline editing modes, see: [Setup inline editing mode](../use-tinymce-inline/).

## Plugin configuration

The functionality of TinyMCE is extended by using plugins, which are enabled using the `plugins` option.

The following example enables the lists (`lists`), Advanced Lists (`advlist`), Link (`link`), and Image (`image`) plugins.

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'advlist link image lists'
});
```
For a full list of plugins and their options, see: [Add plugins to TinyMCE](../plugins/).

## Toolbar configuration

TinyMCE provides a default set of toolbar controls, which can be overridden using the `toolbar` option.

### Default toolbar controls

The TinyMCE default toolbar contains the following buttons:

```js
tinymce.init({
  selector: 'textarea',  // change this value according to the HTML
  toolbar: 'undo redo | styles | bold italic | alignleft aligncenter alignright alignjustify | outdent indent'
});
```
The `toolbar` option defines the presence, order, and grouping of toolbar buttons.

Use a space-separated list to specify the toolbar buttons for TinyMCE. Create toolbar groups by using the “|” pipe character between button names.

#### Additional information

- For additional toolbar options, including disabling the toolbar and adding multiple toolbars, see: [User interface options - toolbar](../toolbar-configuration-options/#toolbar).
- For a list of all available toolbar items, see: [Toolbar Buttons Available for TinyMCE](../available-toolbar-buttons/).

## Menu and Menu bar configuration

There are two menu options: `menubar` and `menu`. `menubar` is used to define the presence and order of *menus*, such as **File**, **Edit**, and **View**. `menu` is used to define the presence and order of *menu items*, such as **New Document**, **Select all**, and **Source code**.

### Menu and Menu bar configuration examples

To display the *File*, *Edit*, and *View* menus:

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  menubar: 'file edit view'
});
```
**Example**

```js
tinymce.init({
  selector: 'textarea#menubar',
  menubar: 'file edit view'
});
```
To create an `Edit` menu that only contains the *Undo*, *Redo*, and *Select all* items.

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  menu: {
    edit: { title: 'Edit', items: 'undo, redo, selectall' }
  }
});
```
**Example**

```js
tinymce.init({
  selector: 'textarea#menu1',
  menu: {
    edit: { title: 'Edit', items: 'undo redo | selectall' }
  }
});
```
To create a menu titled "Happy", provide an identifier for the menu and an object with the `title` and `items` for the menu.

For example:

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  menu: {
    happy: { title: 'Happy', items: 'code' }
  },
  plugins: 'code',  // required by the code menu item
  menubar: 'happy'  // adds happy to the menu bar
});
```
**Example**

```js
tinymce.init({
  selector: 'textarea#menu2',
  plugins: 'code',
  menu: {
    happy: { title: 'Happy', items: 'code' }
  },
  menubar: 'happy'
});
```

### Default menu controls

The default menus are as follows:

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  menu: {
    file: { title: 'File', items: 'newdocument restoredraft | preview | export print | deleteallconversations' },
    edit: { title: 'Edit', items: 'undo redo | cut copy paste pastetext | selectall | searchreplace' },
    view: { title: 'View', items: 'code | visualaid visualchars visualblocks | spellchecker | preview fullscreen | showcomments' },
    insert: { title: 'Insert', items: 'image link media addcomment pageembed template codesample inserttable | charmap emoticons hr | pagebreak nonbreaking anchor tableofcontents | insertdatetime' },
    format: { title: 'Format', items: 'bold italic underline strikethrough superscript subscript codeformat | styles blocks fontfamily fontsize align lineheight | forecolor backcolor | language | removeformat' },
    tools: { title: 'Tools', items: 'spellchecker spellcheckerlanguage | a11ycheck code wordcount' },
    table: { title: 'Table', items: 'inserttable | cell row column | advtablesort | tableprops deletetable' },
    help: { title: 'Help', items: 'help' }
  }
});
```

> **Note:** Some menu items require a plugin, such as the `table` menu and items requires the `table` plugin.

#### Additional information

- For information on the `menu` setting, see: [User interface options - menu](../menus-configuration-options/#menu).
- For information on the `menubar` setting, see: [User interface options - menubar](../menus-configuration-options/#menubar).
- For a list of all available menu items, see: [Menu Items Available for TinyMCE](../available-menu-items/).

## Basic configuration example

The following example is a basic TinyMCE configuration.

```html
<!DOCTYPE html>
<html>
<head>
  <script
    type="text/javascript"
    src='https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js'
    referrerpolicy="origin">
  </script>
  <script type="text/javascript">
  tinymce.init({
    selector: '#myTextarea',
    width: 600,
    height: 300,
    plugins: [
      'advlist', 'autolink', 'link', 'image', 'lists', 'charmap', 'preview', 'anchor', 'pagebreak',
      'searchreplace', 'wordcount', 'visualblocks', 'visualchars', 'code', 'fullscreen', 'insertdatetime',
      'media', 'table', 'emoticons', 'template', 'help'
    ],
    toolbar: 'undo redo | styles | bold italic | alignleft aligncenter alignright alignjustify | ' +
      'bullist numlist outdent indent | link image | print preview media fullscreen | ' +
      'forecolor backcolor emoticons | help',
    menu: {
      favs: { title: 'My Favorites', items: 'code visualaid | searchreplace | emoticons' }
    },
    menubar: 'favs file edit view insert format tools table help',
    content_css: 'css/content.css'
  });
  </script>
</head>

<body>
  <textarea id="myTextarea"></textarea>
</body>
</html>
```

### Break-down of the basic configuration example

The following section is a break-down of the options used in the basic configuration example.

Selects the `textarea` with the id `myTextarea` to be replaced by the editor.

```js
selector: '#myTextarea',
```
Sets the width and height of the editable area in pixels as numeric values.

```js
width: 600,
height: 300,
```
Selects the plugins to be included on load.

```js
plugins: [
  'advlist', 'autolink', 'link', 'image', 'lists', 'charmap', 'preview', 'anchor', 'pagebreak',
  'searchreplace', 'wordcount', 'visualblocks', 'visualchars', 'code', 'fullscreen', 'insertdatetime',
  'media', 'table', 'emoticons', 'template', 'help'
],
```
Selects the toolbar buttons displayed to the user. Use a comma or space as a separator.

```js
toolbar: 'undo redo | styles | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media | forecolor backcolor emoticons',
```
Adds an additional menu named "My Favorites" with `menu`, then adds it to the menu bar using `menubar`.

```js
menu: {
  favs: { title: 'My Favorites', items: 'code visualaid | searchreplace | emoticons' }
},
menubar: 'favs file edit view insert format tools table help',
```
Sets the styling of the editable area using `content_css`.

```js
content_css: 'css/content.css',
```
**Example**

```js
tinymce.init({
  selector: '#basic-conf',
  width: 600,
  height: 300,
  plugins: [
    'advlist', 'autolink', 'link', 'image', 'lists', 'charmap', 'preview', 'anchor', 'pagebreak',
    'searchreplace', 'wordcount', 'visualblocks', 'code', 'fullscreen', 'insertdatetime', 'media',
    'table', 'emoticons', 'template', 'help'
  ],
  toolbar: 'undo redo | styles | bold italic | alignleft aligncenter alignright alignjustify | ' +
    'bullist numlist outdent indent | link image | print preview media fullscreen | ' +
    'forecolor backcolor emoticons | help',
  menu: {
    favs: { title: 'My Favorites', items: 'code visualaid | searchreplace | emoticons' }
  },
  menubar: 'favs file edit view insert format tools table help',
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});
```

### Additional information

- For a full list of configuration options, review the following pages in the side navigation:

  - Initial configuration - For initial configuration and important settings.
  - Interface - For customizing the look and feel of the editor.
  - Content - For customizing the allowed content and the associated behaviors.
- For information on Plugins and their options, see: [Add plugins to TinyMCE](../work-with-plugins/).
- For information on the CSS required to render some TinyMCE elements outside of the editor, see: [Boilerplate content CSS](../editor-content-css/).