The following tables show all available toolbar items, including items provided by plugins. The Table of Contents plugin provides the following toolbar buttons: For information on the Table of Contents plugin, see: Plugins - The Table of Contents plugin. This option works in classic editor (Iframe) mode and inline mode. The Quick Insert toolbar is intended for buttons related to inserting content, but any TinyMCE toolbar buttons or custom toolbar buttons are allowed. The quickbars_image_toolbar option configures the Quick Image toolbar provided by the quickbars plugin. To specify the buttons that should appear on TinyMCEs toolbar, the toolbar option should be provided with a space separated list of toolbar buttons. Youll notice they are configured in much the same way as the toolbar. (Youll even get a free trial of our premium plugins! A split button contains a basic button and a menu button, wrapped up into one toolbar item. The fetch function is called when the toolbar menu buttons menu is opened. The Quick Insert toolbar is intended for buttons related to inserting content, but any TinyMCE toolbar buttons or custom toolbar buttons are allowed. When in plain text mode, all rich content is converted into plain text.

To disable the Quick Image toolbar, set quickbars_image_toolbar to false. The vars argument controls which variables are used to match the content when determining whether to run the callback. In this example, onAction calls editor.insertContent(value) which inserts the given content into the editor. Dropdown list with languages to apply to the selection. To disable the Quick Selection toolbar, set quickbars_selection_toolbar to false. Note: This feature is only available for TinyMCE 5.2 and later. Applies superscript format to the current selection. This option allows you to specify the buttons and the order that they will appear on instances of multiple toolbars.

It is a function that takes a callback and passes it an array of menu items to be rendered in the drop-down menu. The toolbar_groups option creates a toolbar button that displays a collection of other toolbar buttons as a pop-up toolbar. This ensures it is not possible to insert a time element into another time element. Can't find what you're looking for? Adds or removes (toggles) a row numbering column on the selected table. The Visual Characters plugin provides the following toolbar buttons: For information on the Visual Characters plugin, see: Plugins - The Visual Characters plugin. The Spell Checker Pro plugin provides the following toolbar buttons: For information on the Spell Checker Pro plugin, see: Plugins - The Spell Checker Pro plugin. Tip 2. The Visual Blocks plugin provides the following toolbar buttons: For information on the Visual Blocks plugin, see: Plugins - The Visual Blocks plugin. This example takes a CSS 3 selector named '#mytoolbar' and renders any inline toolbars into this element. Any event listeners should be unbound in the teardown callback. Dropdown list with font sizes to apply to selection. The Emoticons plugin provides the following toolbar buttons: For information on the Emoticons plugin, see: Plugins - The Emoticons plugin. Note: To enable automatic upload of images on insertion, image upload must be configured. Get a free API Key. The second button is an example of how onSetup works. The Advanced Code Editor plugin provides the following toolbar buttons: For information on the Advanced Code Editor plugin, see: Plugins - The Advanced Code Editor plugin. The Print plugin provides the following toolbar buttons: For information on the Print plugin, see: Plugins - The Print plugin. This context toolbar contains fields to modify, remove and open the selected link. Updates the Table of Contents block element. If the toolbar_mode is configured to scrolling, the overflow toolbar buttons will remain on the toolbar, but will be hidden from view. Function invoked when the button is clicked. editor.on('init', callback). Try these configurations by modifying the init script in your own instance of TinyMCE or by using a TinyMCE Fiddle. Opens the table properties dialog for creating a new table. default: false - Represents the buttons state. Check out the full-featured demos in our documentation for more examples. For example, if the cursor is moved into editor content that has strikethrough formatting the button will become active and if it is moved into content that does not have strikethrough formatting the button will become inactive. The Template plugin provides the following toolbar buttons: For information on the Template plugin, see: Plugins - The Template plugin. Sets the directionality of contents to rtl. To disable Sticky Toolbars, set toolbar_sticky as false. Changes current line to the Heading 3 style. Cancels/Resets the editor contents to its initial state. A group toolbar button is a toolbar button that contains a collection of other toolbar buttons that are displayed in a pop-up when clicked. The Format Painter plugin provides the following toolbar buttons: For information on the Format Painter plugin, see: Plugins - The Format Painter plugin. onSetup is used to listen to the editors NodeChange event to disable the button when the cursor is inside a time element (or node). Potentially, all menubar menu items could be moved into toolbar menu buttons, allowing for the editor to be used without a menubar at all. Shows/hides comments present in the editor. This method executes the specified callback function when the selected content has the specified formatting.

To disable the Quick Selection toolbar, set quickbars_selection_toolbar to false. The example above adds two custom strikethrough buttons with the same onAction configuration. Toggled by the buttons API. Let us know. This can be useful when a site has a sticky header navigation bar, allowing the TinyMCE toolbar to "stick" below the sites navigation bar. This editor method toggles the specified format on and off, but only works for formats that are already registered with the editor. Also, see our full range of core and premium plugins. Alternatively, you may specify multiple toolbars through the use of the toolbar(n) option. The quickbars_selection_toolbar option configures the Quick Selection toolbar provided by the quickbars plugin. You might also like to know how to configure: Also, see how to configure TinyMCE for mobile. Two situations to consider when organising the toolbar: When there are two or more toolbar button groups, the main toolbar will show as many complete, sequential toolbar groups as possible within the width of the editor. The Page Embed plugin provides the following toolbar buttons: For information on the Page Embed plugin, see: Plugins - The Page Embed plugin. To disable the table toolbar, set the value to an empty string. Default value: 'alignleft aligncenter alignright'.

A callback function that should be passed a list of, Function invoked when a dropdown list option is clicked. default: () => () => {} - Function invoked when the button is rendered. Center aligns the current block or image. Removes the alignment of the current block or image. The following is a simple toolbar menu button example: This example configures a toolbar menu button with the label My Button that opens the specified menu when clicked. The Spell Checker plugin provides the following toolbar buttons: For information on the Spell Checker plugin, see: Plugins - The Spell Checker plugin. In this example, weve declared three toolbar groups - formatgroup, paragraphgroup, and insertgroup. A toggle button gives the user visual feedback for its state through CSS styling. The callback given to editor.formatter.formatChanged is a function that takes a state boolean representing whether the currently selected content contains the applied format. The Chase Law Group, LLC | 1447 York Road, Suite 505 | Lutherville, MD 21093 | (410) 928-7991, Easements and Related Real Property Agreements. The Quick Image toolbar is intended for image-related buttons, but any TinyMCE toolbar buttons or custom toolbar buttons are allowed. It is a function that takes a callback and passes it an array of menu items to be rendered in the buttons drop-down menu. The quickbars_insert_toolbar option configures the Quick Insert toolbar provided by the quickbars plugin. For details on configuring toolbar groups, see: group toolbar button configuration. Use the following settings to configure a Scrolling toolbar: If the toolbar_mode is configured to wrap, the overflow toolbar buttons will be shown on one or more toolbars below the primary toolbar. A toggle button triggers an action when clicked but also has a concept of state. The Search and Replace plugin provides the following toolbar buttons: For information on the Search and Replace plugin, see: Plugins - The Search and Replace plugin. Changes the case of text in a block selection to uppercase, lowercase, or title case. >, Toggle a column between being a table header column and a table body column. To create groups on the toolbar, use the | pipe character to add a separator between toolbar buttons. To register a shortcut, see: A string of space separated toolbar button names, or an array of, We also offer enterprise grade support as part of. Toggles the visual aids for invisible elements. The Comments plugin provides the following toolbar buttons: For information on the Comments plugin, see: Plugins - The Comments plugin. default: false - Represents the menu items state. This button requires the, Dropdown list with line heights to apply to selection. Would you mind opening an issue or helping us out? Enables and disables Permanent Pen formatting. To change the buttons on the Quick Insert toolbar, provide a space-separated string of toolbar button names. Defaults: alignleft aligncenter alignright. If the first toolbar button group is wider than the editor, the whole toolbar will be shown in the toolbar drawer. Sets the spellchecker language for the current selection. TinyMCE and Tiny are registered trademarks of Tiny Technologies, Inc. Spelling service - Using Hunspell dictionaries, Recommended and optional configuration options, Dropbox and Google Drive integration options, Accompanying Premium Skins and Icon Packs changes, TinyMCE Mobile - Configuration options with mobile defaults, The size of toolbar groups affects the behavior of the toolbar drawer when the. The Horizontal Rule plugin provides the following toolbar buttons: For information on the Horizontal Rule plugin, see: Plugins - The Horizontal Rule plugin. The Full Page plugin provides the following toolbar buttons: Important: The Full Page plugin (fullpage) was deprecated with the release of TinyMCE 5.9. Use this option to make the toolbar and menu bar persistent for inline editors. ), Computer scientist, storyteller, teacher, and an advocate of TinyMCE. This option allows the toolbar to stick or dock at the specified offset from the top or bottom of the viewport depending on the toolbar location (toolbar_location). You should consult with an attorney licensed to practice in your jurisdiction before relying upon any of the information presented here. Use this option to render the inline toolbar into a fixed positioned HTML element. To enable Sticky Toolbars, set toolbar_sticky as true in the tinymce.init script. Tip 1. Getting started with TinyMCE is super easy. Tip 5. Removes the formatting from the current selection. The default behavior is to position the toolbar and menu bar above the content area. Let us know. Defaults: bold italic | quicklink h2 h3 blockquote. Emulating an online document editor with TinyMCE in React, How to make your email app: Self-hosted with TinyMCE Cloud, How to create an email app with TinyMCE Cloud. The Quick Toolbars plugin provides the following toolbar buttons: For information on the Quick Toolbars plugin, see: Plugins - The Quick Toolbars plugin. External links will be opened in a separate tab, while relative links scroll to a target within the editor (if the target is found). This argument will default to false. So Ive included that in this example too. This button inserts a time element containing the current date into the editor using a toTimeHtml() helper function - a simplified version of TinyMCEs insertdatetime plugin. The Paste plugin provides the following toolbar buttons: For information on the Paste plugin, see: Plugins - The Paste plugin. To change the buttons on the Quick Selection toolbar, provide a space-separated string of toolbar button names. Of course, in the case that you want to take full advantage of the menu bar, check out the related documentation on the menu bar and how to configure it. This option disables the automatic show and hide behavior of the toolbar and menu bar for inline editors. The. Function invoked when the basic button section is clicked. The Insert Date/Time plugin provides the following toolbar buttons: For information on the Insert Date/Time plugin, see: Plugins - The Insert Date/Time plugin. For an example of how choice menu items are used in split toolbar buttons, see: Split button example and explanation. TinyMCE is a registered trademark of Tiny Technologies, Inc. Configuring the Permanent Pen toolbar button, powerpaste_clean_filtered_inline_elements, Launching a context toolbar programmatically, Supported Application Servers: Self-hosted Enterprise, Features of TinyMCE Real-time Collaboration, Overview of how TinyMCE Real-time Collaboration works, Getting started with Real-time Collaboration, TinyMCE features (plugins) support when using RTC, Options that are not available when RTC is enabled, 2. This menu can also contain submenus. The Tiny Drive plugin provides the following toolbar buttons: For information on the Tiny Drive plugin, see: Plugins - The Tiny Drive plugin. Certain parts of this website require Javascript to work. The Quick Image (quickimage) toolbar button allows users to quickly insert images from their computer into the editor. Opens a word count dialog showing word and character counts. Dont yet have a cloud subscription? >, Sets the style of border for all selected cells. This allows for asynchronous fetching of the menu items. Saves the current editor contents to a form or ajax call. >, Adds or removes pre-defined classes to the selected table. >, Toggles the caption on the selected table. disabled is set to true so that the button is disabled when it is first rendered. 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. Use the following demo here for help using the menu toolbar button. Would you mind opening an issue or helping us out? The first menu item inserts content when clicked and the second menu item opens a submenu containing two menu items which insert content when clicked. The Advanced Tables plugin provides the following toolbar buttons: For information on the Advanced Tables plugin, see: Plugins - The Advanced Tables plugin. Note: The format name given to mceToggleFormat via editor.execCommand(command, ui, args) and to editor.formatter.formatChanged(formatName, callback) is the same. Toggles the visibility of non breaking character elements. Developed in open source. >. This ensures the customToggleStrikethrough button is only active when the selected content contains the strikethrough formatting. The Image Tools plugin provides the following toolbar buttons: For information on the Image Tools plugin, see: Plugins - The Image Tools plugin. The fetch function is called whenever the split buttons drop-down menu is opened. Configure the required TinyMCE RTC options, General advice on generating a secure encryption key, Setting up JWT authentication for Real-time Collaboration, Add a public key to the Tiny Cloud API key, Recommended and optional configuration options, What we do to maintain security for TinyMCE, General security risks for user input elements, TinyMCE Angular integration quick start guide, TinyMCE Blazor integration quick start guides, TinyMCE Blazor integration technical reference, TinyMCE in Ruby on Rails using the Tiny Cloud, TinyMCE in Ruby on Rails using TinyMCE self-hosted, The third-party TinyMCE Ruby on Rails gem, TinyMCE React integration quick start guide, TinyMCE Svelte integration quick start guide, TinyMCE Svelte integration technical reference, TinyMCE Vue.js integration quick start guide, TinyMCE Web Component technical reference, Migrating a Basic Froala Configuration to TinyMCE, Migrating Custom Drop-down Toolbar Buttons, Upgrading to the latest version of TinyMCE 5, Accompanying Premium self-hosted server-side component changes, Accompanying Premium Skins and Icon Packs changes, TinyMCE 5.5 new features and enhancements, TinyMCE 5.4 new features and enhancements, Accompanying premium self-hosted server-side component changes, TinyMCE 5.3 new features and enhancements, TinyMCE 5.2 new features and enhancements, Group toolbar button example and explanation, Name of the icon to be displayed.