dom.addClass( doc.documentElement, 'ios' );
if ( editor.getParam( 'directionality' ) === 'rtl' ) {
dom.setAttrib( doc.documentElement, 'dir', 'rtl' );
dom.setAttrib( doc.documentElement, 'lang', editor.getParam( 'wp_lang_attr' ) );
if ( parseInt( env.ie, 10 ) === 9 ) {
} else if ( parseInt( env.ie, 10 ) === 8 ) {
} else if ( env.ie < 8 ) {
} else if ( env.webkit ) {
bodyClass.push('webkit');
bodyClass.push('wp-editor');
each( bodyClass, function( cls ) {
dom.addClass( doc.body, cls );
// Remove invalid parent paragraphs when inserting HTML.
editor.on( 'BeforeSetContent', function( event ) {
event.content = event.content.replace( /<p>\s*<(p|div|ul|ol|dl|table|blockquote|h[1-6]|fieldset|pre)( [^>]*)?>/gi, '<$1$2>' )
.replace( /<\/(p|div|ul|ol|dl|table|blockquote|h[1-6]|fieldset|pre)>\s*<\/p>/gi, '</$1>' );
// Run on DOM ready. Otherwise TinyMCE may initialize earlier and handlers attached
// on DOM ready of after the `tinymce.init()` call may not get triggered.
$( document ).triggerHandler( 'tinymce-editor-init', [editor] );
if ( window.tinyMCEPreInit && window.tinyMCEPreInit.dragDropUpload ) {
dom.bind( doc, 'dragstart dragend dragover drop', function( event ) {
// Trigger the jQuery handlers.
$( document ).trigger( new $.Event( event ) );
if ( editor.getParam( 'wp_paste_filters', true ) ) {
editor.on( 'PastePreProcess', function( event ) {
// Remove trailing <br> added by WebKit browsers to the clipboard.
event.content = event.content.replace( /<br class="?Apple-interchange-newline"?>/gi, '' );
// In WebKit this is handled by removeWebKitStyles().
if ( ! tinymce.Env.webkit ) {
// Remove all inline styles.
event.content = event.content.replace( /(<[^>]+) style="[^"]*"([^>]*>)/gi, '$1$2' );
// Put back the internal styles.
event.content = event.content.replace(/(<[^>]+) data-mce-style=([^>]+>)/gi, '$1 style=$2' );
editor.on( 'PastePostProcess', function( event ) {
// Remove empty paragraphs.
editor.$( 'p', event.node ).each( function( i, node ) {
if ( dom.isEmpty( node ) ) {
editor.$( 'a', event.node ).find( 'font, u' ).each( function( i, node ) {
dom.remove( node, true );
editor.on( 'SaveContent', function( event ) {
// If editor is hidden, we just want the textarea's value to be saved.
if ( ! editor.inline && editor.isHidden() ) {
event.content = event.element.value;
// Keep empty paragraphs :(
event.content = event.content.replace( /<p>(?:<br ?\/?>|\u00a0|\uFEFF| )*<\/p>/g, '<p> </p>' );
event.content = wp.editor.removep( event.content );
// Restore formatting of block boundaries.
event.content = event.content.replace( /-->\s*<!-- wp:/g, '-->\n\n<!-- wp:' );
editor.on( 'preInit', function() {
var validElementsSetting = '@[id|accesskey|class|dir|lang|style|tabindex|' +
'title|contenteditable|draggable|dropzone|hidden|spellcheck|translate],' + // Global attributes.
'i,' + // Don't replace <i> with <em> and <b> with <strong> and don't remove them when empty.
'script[src|async|defer|type|charset|crossorigin|integrity]'; // Add support for <script>.
editor.schema.addValidElements( validElementsSetting );
editor.settings.height = 300;
u: 'InsertUnorderedList',
}, function( command, key ) {
editor.shortcuts.add( 'access+' + key, '', command );
editor.addShortcut( 'meta+s', '', function() {
if ( wp && wp.autosave ) {
wp.autosave.server.triggerSave();
// Alt+Shift+Z removes a block in the block editor, don't add it to the Classic block.
if ( ! editor.settings.classic_block_editor ) {
editor.addShortcut( 'access+z', '', 'WP_Adv' );
// Workaround for not triggering the global help modal in the block editor by the Classic block shortcut.
editor.on( 'keydown', function( event ) {
match = event.ctrlKey && event.altKey && event.code === 'KeyH';
match = event.shiftKey && event.altKey && event.code === 'KeyH';
editor.execCommand( 'WP_Help' );
event.stopImmediatePropagation();
if ( window.getUserSetting( 'editor_plain_text_paste_warning' ) > 1 ) {
editor.settings.paste_plaintext_inform = false;
// Change the editor iframe title on MacOS, add the correct help shortcut.
tinymce.$( editor.iframeElement ).attr( 'title', __( 'Rich Text Area. Press Control-Option-H for help.' ) );
editor.on( 'PastePlainTextToggle', function( event ) {
// Warn twice, then stop.
if ( event.state === true ) {
var times = parseInt( window.getUserSetting( 'editor_plain_text_paste_warning' ), 10 ) || 0;
window.setUserSetting( 'editor_plain_text_paste_warning', ++times );
editor.on( 'beforerenderui', function() {
if ( editor.theme.panel ) {
each( [ 'button', 'colorbutton', 'splitbutton' ], function( buttonType ) {
replaceButtonsTooltips( editor.theme.panel.find( buttonType ) );
function prepareTooltips() {
var access = 'Shift+Alt+';
// For MacOS: ctrl = \u2303, cmd = \u2318, alt = \u2325.
// Some tooltips are translated, others are not...
if ( editor.settings.wp_shortcut_labels ) {
each( editor.settings.wp_shortcut_labels, function( value, tooltip ) {
var translated = editor.translate( tooltip );
value = value.replace( 'access', access ).replace( 'meta', meta );
wpTooltips[ tooltip ] = value;
// Add the translated so we can match all of them.
if ( tooltip !== translated ) {
wpTooltips[ translated ] = value;
function getTooltip( tooltip ) {
var translated = editor.translate( tooltip );
if ( wpTooltips.hasOwnProperty( translated ) ) {
label = wpTooltips[ translated ];
} else if ( wpTooltips.hasOwnProperty( tooltip ) ) {
label = wpTooltips[ tooltip ];
return label ? translated + ' (' + label + ')' : translated;
function replaceButtonsTooltips( buttons ) {
each( buttons, function( button ) {
if ( button && button.settings.tooltip ) {
tooltip = getTooltip( button.settings.tooltip );
button.settings.tooltip = tooltip;
// Override the aria label with the translated tooltip + shortcut.
if ( button._aria && button._aria.label ) {
button._aria.label = tooltip;
function addShortcutsToListbox() {
// listbox for the "blocks" drop-down.
each( editor.theme.panel.find( 'listbox' ), function( listbox ) {
if ( listbox && listbox.settings.text === 'Paragraph' ) {
each( listbox.settings.values, function( item ) {
if ( item.text && wpTooltips.hasOwnProperty( item.text ) ) {
item.shortcut = '(' + wpTooltips[ item.text ] + ')';
* Experimental: create a floating toolbar.
* This functionality will change in the next releases. Not recommended for use by plugins.
editor.on( 'preinit', function() {
var Factory = tinymce.ui.Factory,
settings = editor.settings,
container = editor.getContainer(),
wpAdminbar = document.getElementById( 'wpadminbar' ),
mceIframe = document.getElementById( editor.id + '_ifr' ),
mceToolbar = tinymce.$( '.mce-toolbar-grp', container )[0];
mceStatusbar = tinymce.$( '.mce-statusbar', container )[0];
if ( editor.id === 'content' ) {
wpStatusbar = document.getElementById( 'post-status-info' );
function create( buttons, bottom ) {
each( buttons, function( item ) {
function bindSelectorChanged() {
var selection = editor.selection;
if ( itemName === 'bullist' ) {
selection.selectorChanged( 'ul > li', function( state, args ) {
var i = args.parents.length,
nodeName = args.parents[ i ].nodeName;
if ( nodeName === 'OL' || nodeName == 'UL' ) {
item.active( state && nodeName === 'UL' );
if ( itemName === 'numlist' ) {
selection.selectorChanged( 'ol > li', function( state, args ) {
var i = args.parents.length,
nodeName = args.parents[ i ].nodeName;
if ( nodeName === 'OL' || nodeName === 'UL' ) {
item.active( state && nodeName === 'OL' );
if ( item.settings.stateSelector ) {
selection.selectorChanged( item.settings.stateSelector, function( state ) {
if ( item.settings.disabledStateSelector ) {
selection.selectorChanged( item.settings.disabledStateSelector, function( state ) {
if ( Factory.has( item ) ) {
if ( settings.toolbar_items_size ) {
item.size = settings.toolbar_items_size;
toolbarItems.push( item );
toolbarItems.push( buttonGroup );
if ( editor.buttons[ item ] ) {
item = editor.buttons[ itemName ];
if ( typeof item === 'function' ) {
item.type = item.type || 'button';
if ( settings.toolbar_items_size ) {
item.size = settings.toolbar_items_size;
tooltip = item.tooltip || item.title;
item.tooltip = getTooltip( tooltip );
item = Factory.create( item );
buttonGroup.items.push( item );
if ( editor.initialized ) {
editor.on( 'init', bindSelectorChanged );
toolbar = Factory.create( {
classes: 'toolbar-grp inline-toolbar-grp',
if ( ! currentSelection ) {
var scrollX = window.pageXOffset || document.documentElement.scrollLeft,
scrollY = window.pageYOffset || document.documentElement.scrollTop,
windowWidth = window.innerWidth,
windowHeight = window.innerHeight,
iframeRect = mceIframe ? mceIframe.getBoundingClientRect() : {
toolbarWidth = toolbar.offsetWidth,
toolbarHeight = toolbar.clientHeight,
selection = currentSelection.getBoundingClientRect(),
selectionMiddle = ( selection.left + selection.right ) / 2,
spaceNeeded = toolbarHeight + buffer,
wpAdminbarBottom = wpAdminbar ? wpAdminbar.getBoundingClientRect().bottom : 0,
mceToolbarBottom = mceToolbar ? mceToolbar.getBoundingClientRect().bottom : 0,
mceStatusbarTop = mceStatusbar ? windowHeight - mceStatusbar.getBoundingClientRect().top : 0,
wpStatusbarTop = wpStatusbar ? windowHeight - wpStatusbar.getBoundingClientRect().top : 0,
blockedTop = Math.max( 0, wpAdminbarBottom, mceToolbarBottom, iframeRect.top ),
blockedBottom = Math.max( 0, mceStatusbarTop, wpStatusbarTop, windowHeight - iframeRect.bottom ),
spaceTop = selection.top + iframeRect.top - blockedTop,
spaceBottom = windowHeight - iframeRect.top - selection.bottom - blockedBottom,
editorHeight = windowHeight - blockedTop - blockedBottom,
if ( spaceTop >= editorHeight || spaceBottom >= editorHeight ) {
// Add offset in iOS to move the menu over the image, out of the way of the default iOS menu.
if ( tinymce.Env.iOS && currentSelection.nodeName === 'IMG' ) {
if ( spaceBottom >= spaceNeeded ) {
className = ' mce-arrow-up';
top = selection.bottom + iframeRect.top + scrollY - iosOffsetBottom;
} else if ( spaceTop >= spaceNeeded ) {
className = ' mce-arrow-down';
top = selection.top + iframeRect.top + scrollY - toolbarHeight + iosOffsetTop;