0 results found

Editor Appearance

Configure the editor's appearance, including menu and toolbar controls.

Contribute to this page

color_picker_callback

This option enables you to provide your own color picker.

Type: JavaScript Function

Example
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  color_picker_callback: function(callback, value) {
    callback('#FF00FF');
  }
});

elementpath

This option allows you to disable the element path within the status bar at the bottom of the editor.

Type: Boolean

Default Value: true

Possible Values: true, false

Example
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  elementpath: false
});

event_root

This option enables you to specify a CSS selector for an element to be used as the event root when the editor is in inline mode.

By default all events gets bound to the editable area. But in some implementations where the DOM gets modified you want to bind these events to a container and then delegate the events down to the right editor, based on the element ID.

Type: String

Example
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  inline: true,
  event_root: '#root'
});

fixed_toolbar_container

Use this option to render the inline toolbar into a fixed positioned HTML element. For example, you could fix the toolbar to the top of the browser viewport.

Type: String

This example takes a CSS 3 selector named '#mytoolbar' and renders any inline toolbars into this element.

Example
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  inline: true,
  fixed_toolbar_container: '#mytoolbar'
});

height

Set the height of the editable area in pixels.

Note that this sets the height of the editable area only. It does not include the space required for the menubar, toolbars or status bar.

Type: Number

Example
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  height : 300
});

inline

This option allows you to specify whether TinyMCE should work in inline mode.

TinyMCE has two main integration modes - a "classic" form-based mode and an inline editing mode. The inline editing mode is useful when creating user experiences where you want the editing view of the page to be merged with the reading view of the page. This creates a seamless editing experience and true WYSIWYG behavior. Note that when in inline mode, the editor does not replace the selected element with it's own iframe, but instead edits the element's content in-place instead. Inline mode only operates against block elements.

Type: Boolean

Default Value: false

Possible Values: true, false

Example
tinymce.init({
  selector: '#myeditablediv',  // change this value according to your HTML
  inline: true
});

For more information on the differences between regular and inline editing modes please see this page here.

max_height

This option allows you to set the maximum height that a user can stretch the entire TinyMCE interface (by grabbing the dragable area in the bottom right of the editor interface) when using the modern theme.

Note that this behavior is different than the autoresize plugin, which controls the resizing of the editable area only, not the entire editor.

Type: Number

Example
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  max_height: 500
});

Pro tip: if you set the option resize to false the resize handle will be disabled and a user will not be able to resize the editor (by manual dragging).

max_width

This option allows you to set the maximum width that a user can stretch the entire TinyMCE interface (by grabbing the dragable area in the bottom right of the editor interface) when using the modern theme.

Note that this behavior is different than the autoresize plugin, which controls the resizing of the editable area only, not the entire editor.

Type: Number

Example
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  max_width: 500
});

Pro tip: by default the resize handle does not allow horizontal dragging and giving this key a value will not result in an observable behavior.

menu

This option allows you to specify which menus should appear on TinyMCE's menu bar and the items that should appear within the menus themselves.

To specify the menus that should appear on TinyMCE's menu bar, the menu option should be provided with a JavaScript object containing a property for each menu. These properties should contain a JavaScript object themselves with properties title and items.

The title property should contain a string with the name of the menu. The items field should contain a space separated list of the controls that should populate the menu.

If you would like to group these menu items, please insert a | pipe character between the menu items.

Type: Object

Example
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  menu: {
    file: {title: 'File', items: 'newdocument'},
    edit: {title: 'Edit', items: 'undo redo | cut copy paste pastetext | selectall'},
    insert: {title: 'Insert', items: 'link media | template hr'},
    view: {title: 'View', items: 'visualaid'},
    format: {title: 'Format', items: 'bold italic underline strikethrough superscript subscript | formats | removeformat'},
    table: {title: 'Table', items: 'inserttable tableprops deletetable | cell row column'},
    tools: {title: 'Tools', items: 'spellchecker code'}
  }
});

If all you need is to control which menus are available and/or in what order, see the menubar parameter.

menubar

This option allows you to specify which menus should appear and the order that they appear in the menu bar at the top of TinyMCE.

To specify the menus that should appear on TinyMCE's menu bar, the menubar option should be provided with a space separated list of menus.

Type: String

Example
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  menubar: 'file edit insert view format table tools'
});

To disable the menu bar, the menubar option should be provided a boolean value of false.

Type: Boolean

Default Value: true

Possible Values: true, false

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  menubar: false
});

If you need more control over the contents of the menus, see the menu parameter.

min_height

This option allows you to set the minimum height that a user can stretch the entire TinyMCE interface (by grabbing the dragable area in the bottom right of the editor interface) when using the modern theme.

Note that this behavior is different than the autoresize plugin, which controls the resizing of the editable area only, not the entire editor.

Type: Number

Example
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  min_height: 100
});

Pro tip: if you set the option resize to false the resize handle will be disabled and a user will not be able to resize the editor (by manual dragging).

min_width

This option allows you to set the minimum width that a user can stretch the entire TinyMCE interface (by grabbing the dragable area in the bottom right of the editor interface) when using the modern theme.

Note that this behavior is different than the autoresize plugin, which controls the resizing of the editable area only, not the entire editor.

Type: Number

Example
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  min_width: 400
});

Pro tip: by default the resize handle does not allow horizontal dragging and giving this key a value will not result in an observable behavior.

preview_styles

This option enables you to turn off the preview of styles in format/style listboxes.

Type: Boolean

Default Value: true

Possible Values: true, false

Example
tinyMCE.init({
  selector: 'textarea',  // change this value according to your HTML
  mode: 'textareas',
  preview_styles: false
});

removed_menuitems

This option allows you to remove items from TinyMCE's drop down menus. This is useful if you are using the menubar option to set your menus rather than the more specific menu option.

Type: String

Example
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  removed_menuitems: 'undo, redo'
});

resize

This option gives you the ability to disable the resize handle or set it to resize both horizontal and vertically. The option can be true, false or the string 'both'. False disables the resize, true enables vertical resizing only, 'both' makes it possible to resize in both directions horizontal and vertical.

Disabling the resize

Type: Boolean

Default Value: true

Possible Values: true, false, 'both'

Example
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  resize: false
});

Enabling both vertical and horizontal resize

Type: Boolean

Default Value: true

Possible Values: true, false, 'both'

Example
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  resize: 'both'
});

skin_url

If you are using TinyMCE skins, this option enables you to specify the location of the skin file. This is useful if you are loading TinyMCE from one URL, for example a CDN, while loading a skin on, say, a local server.

Type: String

Example
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  skin_url: '/css/mytinymceskin'
});

skin

This option allows you to specify the skin that TinyMCE should use. The default skin included with TinyMCE is named "lightgray".

Type: String

The name of the skin should match the name of the folder within the skins directory of TinyMCE. If the specified skin is not found, TinyMCE will not load.

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  skin: "lightgray"
});

If you would like to create your own skin, please see the guide here.

statusbar

This option allows you to specify whether or not TinyMCE should display the status bar at the bottom of the editor. To disable the status bar, the statusbar option should be provided with a boolean false value.

Type: Boolean

Default Value: true

Possible Values: true, false

Example
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  statusbar: false
});

theme_url

If you are using TinyMCE themes, this option enables you to specify the location of the theme file. This is useful if you are loading TinyMCE from one URL, for example a CDN, while loading a theme on, say, a local server.

Type: String

Example
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  theme_url: '/mytheme/mytheme.js'
});

theme

This option allows you to specify the theme that TinyMCE should use. The default theme included with TinyMCE is named "modern".

The name of the theme should match the name of the folder within the themes directory of TinyMCE. If the specified theme is not found, TinyMCE will not load.

Type: String

Example
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  theme: 'modern'
});

toolbar

This option allows you to specify the buttons and the order that they will appear on TinyMCE's toolbar.

Grouping toolbar controls

To specify the controls that should appear on TinyMCE's toolbar, the toolbar option should be provided with a space separated list of toolbar controls. To create groups within this list, please add | pipe characters between the groups of controls that you would like to create.

Type: String

Example grouped toolbar
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  toolbar: 'undo redo | styleselect | bold italic | link image'
});

Disabling the toolbar

To disable the toolbar, the toolbar option should be provided a boolean value of false.

Type: Boolean

Default Value: true

Possible Values: true, false

Example
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
    toolbar: false
});

Using multiple toolbars

To specify multiple toolbars, the toolbar option should be provided with an array of space separated strings.

Type: Array

Example
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  toolbar: [
    'undo redo | styleselect | bold italic | link image',
    'alignleft aligncenter alignright'
  ]
});

Alternatively, you may specify multiple toolbars through the use of the toolbar(n) option.

toolbar(n)

This option allows you to specify the buttons and the order that they will appear on instances of multiple toolbars.

Type: String

Example
tinymce.init({
  selector: 'textarea',  // change this value according to your html
  toolbar1: 'undo redo | styleselect | bold italic | link image',
  toolbar2: 'alignleft aligncenter alignright'
});

Please see the toolbar configuration option for details.

width

Set the width of the editor in pixels.

Type: Number

Example
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  width : 300
});

Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.