Skip to main content

Initialisation options

The TinyMCEManager class sets some default options for TinyMCE editor initialisation. These can be overridden by providing custom options to the TinyMCEManager.createEditor function, which will then merge the custom options with the existing options.

let initOpts = {
    // The selector for the DOM element to create this editor in
	selector: options.selector,
    // Removes the "powered by TinyMCE" text
	branding: false,
    // Removes the "upgrade to TinyMCE Premium" display
	promotion: false,
    // Remove the statusbar from the bottom of the editor, which shows word count etc
	statusbar: false,
    // Force all iframes within the editor into sandbox mode
	sandbox_iframes: true,
    // The number of undo/redo actions to remember during editing
	custom_undo_redo_levels: 25,
    // Fill the height of the parent container
	height: '100%',
    // By default, use only the emoticons and link plugins (required to display correctly)
	plugins: 'emoticons link autolink',
    // Don't show the menubar with File, Edit etc (not the same as the toolbar,
    // which contains buttons and options)
	menubar: false,
    // Use Twemoji images for the emoticons plugin
	emoticons_database: 'emojiimages',
    // Specify the URL to load the emojis from, in this case our own CDN url
	emoticons_images_url: twEmoji72pxImagesURL,
	// Make links open in a new window by default
	link_default_target: '_blank',
	// Do not allow users to set custom titles for links
	link_title: false,
    // Force all links to have the "standard-link" class
	link_class_list: [
		{title: 'Default', value: 'standard-link'},
	],
    // Add a horizontal flexbox formatting option to the toolbar, if the toolbar is used
	style_formats: [
		{title: 'Horizontal Block (Flexbox)', selector: 'div', styles: {'display': 'flex', 'flex-wrap': 'wrap'}},
	],
    // Keep the existing styles, just add our specified ones to the normal list
	style_formats_merge: true,
    // Specify which help tabs are available via the Help button
	help_tabs: [
		'shortcuts',
		'keyboardnav',
	],
};

// If no special toolbar options have been provided, include only these toolbar options
if (!useDefaultToolbar && !options.hasOwnProperty('toolbar')) {
    initOpts.toolbar = 'emoticons link unlink';
}

See the TinyMCEManager class for other initialisation configuration items, such as content_css and post-initialisation customisation.

Back to top