/* global getUserSetting, setUserSetting */
// Set the minimum value for the modals z-index higher than #wpadminbar (100000).
if ( ! tinymce.ui.FloatPanel.zIndex || tinymce.ui.FloatPanel.zIndex < 100100 ) {
tinymce.ui.FloatPanel.zIndex = 100100;
tinymce.PluginManager.add( 'wordpress', function( editor ) {
__ = editor.editorManager.i18n.translate,
hasWpautop = ( wp && wp.editor && wp.editor.autop && editor.getParam( 'wpautop', true ) ),
// Runs as soon as TinyMCE has started initializing, while plugins are loading.
// Handlers attached after the `tinymce.init()` call may not get triggered for this instance.
$( document ).triggerHandler( 'tinymce-editor-setup', [ editor ] );
function toggleToolbars( state ) {
var initial, toolbars, iframeHeight,
classicBlockToolbar = tinymce.$( '.block-library-classic__toolbar' );
if ( state === 'hide' ) {
} else if ( classicBlockToolbar.length && ! classicBlockToolbar.hasClass( 'has-advanced-toolbar' ) ) {
// Show the second, third, etc. toolbar rows in the Classic block instance.
classicBlockToolbar.addClass( 'has-advanced-toolbar' );
if ( editor.theme.panel ) {
toolbars = editor.theme.panel.find('.toolbar:not(.menubar)');
if ( toolbars && toolbars.length > 1 ) {
if ( ! state && toolbars[1].visible() ) {
each( toolbars, function( toolbar, i ) {
if ( state === 'hide' ) {
// Resize editor iframe, not needed for iOS and inline instances.
// Don't resize if the editor is in a hidden container.
if ( pixels && ! tinymce.Env.iOS && editor.iframeElement && editor.iframeElement.clientHeight ) {
iframeHeight = editor.iframeElement.clientHeight + pixels;
if ( iframeHeight > 50 ) {
DOM.setStyle( editor.iframeElement, 'height', iframeHeight );
if ( state === 'hide' ) {
setUserSetting( 'hidetb', '0' );
wpAdvButton && wpAdvButton.active( false );
setUserSetting( 'hidetb', '1' );
wpAdvButton && wpAdvButton.active( true );
editor.fire( 'wp-toolbar-toggle' );
// Add the kitchen sink button :)
editor.addButton( 'wp_adv', {
tooltip: 'Toolbar Toggle',
onPostRender: function() {
wpAdvButton.active( getUserSetting( 'hidetb' ) === '1' );
// Hide the toolbars after loading.
editor.on( 'PostRender', function() {
if ( editor.getParam( 'wordpress_adv_hidden', true ) && getUserSetting( 'hidetb', '0' ) === '0' ) {
toggleToolbars( 'hide' );
tinymce.$( '.block-library-classic__toolbar' ).addClass( 'has-advanced-toolbar' );
editor.addCommand( 'WP_Adv', function() {
editor.on( 'focus', function() {
window.wpActiveEditor = editor.id;
editor.on( 'BeforeSetContent', function( event ) {
if ( event.content.indexOf( '<!--more' ) !== -1 ) {
title = __( 'Read more...' );
event.content = event.content.replace( /<!--more(.*?)-->/g, function( match, moretext ) {
return '<img src="' + tinymce.Env.transparentSrc + '" data-wp-more="more" data-wp-more-text="' + moretext + '" ' +
'class="wp-more-tag mce-wp-more" alt="' + title + '" data-mce-resize="false" data-mce-placeholder="1" />';
if ( event.content.indexOf( '<!--nextpage-->' ) !== -1 ) {
title = __( 'Page break' );
event.content = event.content.replace( /<!--nextpage-->/g,
'<img src="' + tinymce.Env.transparentSrc + '" data-wp-more="nextpage" class="wp-more-tag mce-wp-nextpage" ' +
'alt="' + title + '" data-mce-resize="false" data-mce-placeholder="1" />' );
if ( event.load && event.format !== 'raw' ) {
event.content = wp.editor.autop( event.content );
// Prevent creation of paragraphs out of multiple HTML comments.
event.content = event.content.replace( /-->\s+<!--/g, '--><!--' );
if ( event.content.indexOf( '<script' ) !== -1 || event.content.indexOf( '<style' ) !== -1 ) {
event.content = event.content.replace( /<(script|style)[^>]*>[\s\S]*?<\/\1>/g, function( match, tag ) {
'src="' + tinymce.Env.transparentSrc + '" ' +
'data-wp-preserve="' + encodeURIComponent( match ) + '" ' +
'data-mce-resize="false" ' +
'data-mce-placeholder="1" '+
'class="mce-object mce-object-' + tag + '" ' +
'width="20" height="20" '+
'alt="<' + tag + '>" ' +
editor.on( 'setcontent', function() {
// Remove spaces from empty paragraphs.
editor.$( 'p' ).each( function( i, node ) {
if ( node.innerHTML && node.innerHTML.length < 10 ) {
var html = tinymce.trim( node.innerHTML );
if ( ! html || html === ' ' ) {
node.innerHTML = ( tinymce.Env.ie && tinymce.Env.ie < 11 ) ? '' : '<br data-mce-bogus="1">';
editor.on( 'PostProcess', function( event ) {
event.content = event.content.replace(/<img[^>]+>/g, function( image ) {
if ( image.indexOf( 'data-wp-more="more"' ) !== -1 ) {
if ( match = image.match( /data-wp-more-text="([^"]+)"/ ) ) {
string = '<!--more' + moretext + '-->';
} else if ( image.indexOf( 'data-wp-more="nextpage"' ) !== -1 ) {
string = '<!--nextpage-->';
} else if ( image.indexOf( 'data-wp-preserve' ) !== -1 ) {
if ( match = image.match( / data-wp-preserve="([^"]+)"/ ) ) {
string = decodeURIComponent( match[1] );
// Display the tag name instead of img in element path.
editor.on( 'ResolveName', function( event ) {
if ( event.target.nodeName === 'IMG' && ( attr = editor.dom.getAttrib( event.target, 'data-wp-more' ) ) ) {
editor.addCommand( 'WP_More', function( tag ) {
classname = 'wp-more-tag',
node = editor.selection.getNode(),
rootNode = editor.getBody();
classname += ' mce-wp-' + tag;
title = tag === 'more' ? 'Read more...' : 'Next page';
html = '<img src="' + tinymce.Env.transparentSrc + '" alt="' + title + '" class="' + classname + '" ' +
'data-wp-more="' + tag + '" data-mce-resize="false" data-mce-placeholder="1" />';
if ( node === rootNode || ( node.nodeName === 'P' && node.parentNode === rootNode ) ) {
editor.insertContent( html );
// Get the top level parent node.
parent = dom.getParent( node, function( found ) {
if ( found.parentNode && found.parentNode === rootNode ) {
if ( parent.nodeName === 'P' ) {
parent.appendChild( dom.create( 'p', null, html ).firstChild );
dom.insertAfter( dom.create( 'p', null, html ), parent );
editor.addCommand( 'WP_Code', function() {
editor.formatter.toggle('code');
editor.addCommand( 'WP_Page', function() {
editor.execCommand( 'WP_More', 'nextpage' );
editor.addCommand( 'WP_Help', function() {
var access = tinymce.Env.mac ? __( 'Ctrl + Alt + letter:' ) : __( 'Shift + Alt + letter:' ),
meta = tinymce.Env.mac ? __( '⌘ + letter:' ) : __( 'Ctrl + letter:' ),
labels = editor.settings.wp_shortcut_labels,
header, html, dialog, $wrap;
function tr( row, columns ) {
each( row, function( text, key ) {
out += '<td><kbd>' + key + '</kbd></td><td>' + __( text ) + '</td>';
out += '<td></td><td></td>';
each ( labels, function( label, name ) {
if ( label.indexOf( 'meta' ) !== -1 ) {
letter = label.replace( 'meta', '' ).toLowerCase();
table1.push( tr( row1, 2 ) );
} else if ( label.indexOf( 'access' ) !== -1 ) {
letter = label.replace( 'access', '' ).toLowerCase();
table2.push( tr( row2, 2 ) );
// Add remaining single entries.
table1.push( tr( row1, 2 ) );
table2.push( tr( row2, 2 ) );
header = [ __( 'Letter' ), __( 'Action' ), __( 'Letter' ), __( 'Action' ) ];
header = '<tr><th>' + header.join( '</th><th>' ) + '</th></tr>';
html = '<div class="wp-editor-help">';
// Main section, default and additional shortcuts.
'<h2>' + __( 'Default shortcuts,' ) + ' ' + meta + '</h2>' +
'<table class="wp-help-th-center fixed">' +
'<h2>' + __( 'Additional shortcuts,' ) + ' ' + access + '</h2>' +
'<table class="wp-help-th-center fixed">' +
if ( editor.plugins.wptextpattern && ( ! tinymce.Env.ie || tinymce.Env.ie > 8 ) ) {
'<h2>' + __( 'When starting a new paragraph with one of these formatting shortcuts followed by a space, the formatting will be applied automatically. Press Backspace or Escape to undo.' ) + '</h2>' +
'<table class="wp-help-th-center fixed">' +
tr({ '*': 'Bullet list', '1.': 'Numbered list' }) +
tr({ '-': 'Bullet list', '1)': 'Numbered list' }) +
'<h2>' + __( 'The following formatting shortcuts are replaced when pressing Enter. Press Escape or the Undo button to undo.' ) + '</h2>' +
'<table class="wp-help-single">' +
tr({ '>': 'Blockquote' }) +
tr({ '##': 'Heading 2' }) +
tr({ '###': 'Heading 3' }) +
tr({ '####': 'Heading 4' }) +
tr({ '#####': 'Heading 5' }) +
tr({ '######': 'Heading 6' }) +
tr({ '---': 'Horizontal line' }) +
// Focus management section.
'<h2>' + __( 'Focus shortcuts:' ) + '</h2>' +
'<table class="wp-help-single">' +
tr({ 'Alt + F8': 'Inline toolbar (when an image, link or preview is selected)' }) +
tr({ 'Alt + F9': 'Editor menu (when enabled)' }) +
tr({ 'Alt + F10': 'Editor toolbar' }) +
tr({ 'Alt + F11': 'Elements path' }) +
'<p>' + __( 'To move focus to other buttons use Tab or the arrow keys. To return focus to the editor press Escape or use one of the buttons.' ) + '</p>';
dialog = editor.windowManager.open( {
title: editor.settings.classic_block_editor ? 'Classic Block Keyboard Shortcuts' : 'Keyboard Shortcuts',
dialog.$el.find( 'div[role="application"]' ).attr( 'role', 'document' );
$wrap = dialog.$el.find( '.mce-wp-help' );
$wrap.attr( 'tabindex', '0' );
$wrap.on( 'keydown', function( event ) {
// Prevent use of: page up, page down, end, home, left arrow, up arrow, right arrow, down arrow
// in the dialog keydown handler.
if ( event.keyCode >= 33 && event.keyCode <= 40 ) {
editor.addCommand( 'WP_Medialib', function() {
if ( wp && wp.media && wp.media.editor ) {
wp.media.editor.open( editor.id );
editor.addButton( 'wp_more', {
tooltip: 'Insert Read More tag',
editor.execCommand( 'WP_More', 'more' );
editor.addButton( 'wp_page', {
editor.execCommand( 'WP_More', 'nextpage' );
editor.addButton( 'wp_help', {
tooltip: 'Keyboard Shortcuts',
editor.addButton( 'wp_code', {
if ( wp && wp.media && wp.media.editor ) {
editor.addButton( 'wp_add_media', {
icon: 'dashicon dashicons-admin-media',
editor.addMenuItem( 'add_media', {
icon: 'wp-media-library',
// Insert "Read More...".
editor.addMenuItem( 'wp_more', {
text: 'Insert Read More tag',
editor.execCommand( 'WP_More', 'more' );
editor.addMenuItem( 'wp_page', {
editor.execCommand( 'WP_More', 'nextpage' );
editor.on( 'BeforeExecCommand', function(e) {
if ( tinymce.Env.webkit && ( e.command === 'InsertUnorderedList' || e.command === 'InsertOrderedList' ) ) {
style = editor.dom.create( 'style', {'type': 'text/css'},
'#tinymce,#tinymce span,#tinymce li,#tinymce li>span,#tinymce p,#tinymce p>span{font:medium sans-serif;color:#000;line-height:normal;}');
editor.getDoc().head.appendChild( style );
editor.on( 'ExecCommand', function( e ) {
if ( tinymce.Env.webkit && style &&
( 'InsertUnorderedList' === e.command || 'InsertOrderedList' === e.command ) ) {
editor.dom.remove( style );
editor.on( 'init', function() {
bodyClass = ['mceContentBody'], // Back-compat for themes that use this in editor-style.css...