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:
A note about code snippet examples
Code snippets are provided as example implementations throughout the TinyMCE documentation.
Example code snippet:
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugin: '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 a 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 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:
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:
tinymce.init({
selector: 'textarea#default'
});
Providing a TinyMCE editor with the default configuration, such as:
-
TinyMCE
-
HTML
-
JS
-
Edit on CodePen
<textarea id="default">Hello, World!</textarea>
tinymce.init({
selector: 'textarea#default'
});
The selector can target most block elements when the editor is used in inline editing mode. 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'
:
tinymce.init({
selector: 'div#editable',
inline: true
});
For information on the differences between the classic and inline editing modes, see: Setup inline editing mode.
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.
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.
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:
tinymce.init({
selector: 'textarea', // change this value according to the HTML
toolbar: 'undo redo | styleselect | 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.
-
For a list of all available toolbar items, see: Toolbar Buttons Available for TinyMCE.
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:
tinymce.init({
selector: 'textarea', // change this value according to your HTML
menubar: 'file edit view'
});
To create an Edit
menu that only contains the Undo, Redo, and Select all items.
tinymce.init({
selector: 'textarea', // change this value according to your HTML
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:
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
});
Default menu controls
The default menus are as follows:
tinymce.init({
selector: 'textarea', // change this value according to your HTML
menu: {
file: { title: 'File', items: 'newdocument restoredraft | preview | print ' },
edit: { title: 'Edit', items: 'undo redo | cut copy paste | selectall | searchreplace' },
view: { title: 'View', items: 'code | visualaid visualchars visualblocks | spellchecker | preview fullscreen' },
insert: { title: 'Insert', items: 'image link media template codesample inserttable | charmap emoticons hr | pagebreak nonbreaking anchor toc | insertdatetime' },
format: { title: 'Format', items: 'bold italic underline strikethrough superscript subscript codeformat | formats blockformats fontformats fontsizes align lineheight | forecolor backcolor | removeformat' },
tools: { title: 'Tools', items: 'spellchecker spellcheckerlanguage | code wordcount' },
table: { title: 'Table', items: 'inserttable | cell row column | tableprops deletetable' },
help: { title: 'Help', items: 'help' }
}
});
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. -
For information on the
menubar
setting, see: User interface options - menubar. -
For a list of all available menu items, see: Menu Items Available for TinyMCE.
Basic configuration example
The following example is a basic TinyMCE configuration.
<!DOCTYPE html>
<html>
<head>
<script
type="text/javascript"
src='https://cdn.tiny.cloud/1/no-api-key/tinymce/5/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 print preview hr anchor pagebreak',
'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
'table emoticons template paste help'
],
toolbar: 'undo redo | styleselect | 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.
selector: '#myTextarea',
Sets the width and height of the editable area in pixels as numeric values.
width: 600,
height: 300,
Selects the plugins to be included on load.
plugins: [
'advlist autolink link image lists charmap print preview hr anchor pagebreak',
'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
'table emoticons template paste help'
],
Selects the toolbar buttons displayed to the user. Use a comma or space as a separator.
toolbar: 'insertfile undo redo | styleselect | 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
.
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
.
content_css: 'css/content.css',
-
TinyMCE
-
HTML
-
JS
-
Edit on CodePen
<textarea id="basic-conf">
This editor uses the Basic configuration example.
</textarea>
tinymce.init({
selector: '#basic-conf',
width: 600,
height: 300,
plugins: [
'advlist autolink link image lists charmap print preview hr anchor pagebreak',
'searchreplace wordcount visualblocks code fullscreen insertdatetime media nonbreaking',
'table emoticons template paste help'
],
toolbar: 'undo redo | styleselect | 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:14px }'
});
Additional information
-
For a full list of configuration options, see: the Configuration options reference.
-
For a full list of Plugins and their options, see: Add plugins to TinyMCE.
-
For information on the UI elements, see: User interface components.
-
For information on the CSS required to render some TinyMCE elements outside of the editor, see: Boilerplate content CSS.