TinyMCE: update the Keyboard Shortcuts help modal, use the TinyMCE UI API instead of an iframe.

Props iseulde, azaozz. Fixes #31913.
Built from https://develop.svn.wordpress.org/trunk@32951


git-svn-id: http://core.svn.wordpress.org/trunk@32922 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrew Ozz 2015-06-26 04:40:24 +00:00
parent 4df2bd0b2a
commit 561ca94998
10 changed files with 231 additions and 159 deletions

View File

@ -1018,14 +1018,30 @@ final class _WP_Editors {
'Format' => _x( 'Format', 'TinyMCE menu' ),
// WordPress strings
'Keyboard Shortcuts' => __( 'Keyboard Shortcuts' ),
'Toolbar Toggle' => __( 'Toolbar Toggle' ),
'Insert Read More tag' => __( 'Insert Read More tag' ),
'Insert Page Break tag' => __( 'Insert Page Break tag' ),
'Read more...' => __( 'Read more...' ), // Title on the placeholder inside the editor
'Distraction-free writing mode' => __( 'Distraction-free writing mode' ),
'No alignment' => __( 'No alignment' ), // Tooltip for the 'alignnone' button in the image toolbar
'Remove' => __( 'Remove' ), // Tooltip for the 'remove' button in the image toolbar
'Edit ' => __( 'Edit' ), // Tooltip for the 'edit' button in the image toolbar
// Shortcuts help modal
'Keyboard Shortcuts' => __( 'Keyboard Shortcuts' ),
'Default shortcuts,' => __( 'Default shortcuts,' ),
'Additional shortcuts,' => __( 'Additional shortcuts,' ),
'Focus shortcuts:' => __( 'Focus shortcuts:' ),
'Inline toolbar (when an image, link or preview is selected)' => __( 'Inline toolbar (when an image, link or preview is selected)' ),
'Editor menu (when enabled)' => __( 'Editor menu (when enabled)' ),
'Editor toolbar' => __( 'Editor toolbar' ),
'Elements path' => __( 'Elements path' ),
'Ctrl + Alt + letter:' => __( 'Ctrl + Alt + letter:' ),
'Shift + Alt + letter:' => __( 'Shift + Alt + letter:' ),
'Cmd + letter:' => __( 'Cmd + letter:' ),
'Ctrl + letter:' => __( 'Ctrl + letter:' ),
'Letter' => __( 'Letter' ),
'Action' => __( 'Action' ),
);
/**

View File

@ -79,8 +79,8 @@
width: calc( 100% - 36px );
}
.mce-wp-help .mce-window-head {
border-bottom: none;
.mce-window .mce-foot {
border-top: 1px solid #dfdfdf;
}
.mce-textbox,
@ -104,6 +104,69 @@
box-shadow: 0 0 2px rgba(30,140,190,0.8);
}
.mce-window .mce-wp-help {
height: 320px;
width: 360px;
overflow: auto;
}
.mce-window .mce-wp-help * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.mce-window .mce-wp-help .mce-container-body.mce-undefined {
width: auto !important;
}
.mce-window .wp-editor-help {
width: 340px;
padding: 10px 15px 0;
}
.mce-window .wp-editor-help p {
margin: 7px 0;
}
.mce-window .wp-editor-help table {
width: 320px;
margin-bottom: 20px;
}
.mce-window .wp-editor-help td,
.mce-window .wp-editor-help th {
font-size: 13px;
vertical-align: middle;
}
.mce-window .wp-editor-help td {
padding: 5px;
word-wrap: break-word;
white-space: normal;
}
.mce-window .wp-editor-help th {
font-weight: bold;
padding: 5px 0 0;
text-align: center;
}
.mce-window .wp-editor-help kbd {
font-family: monospace;
padding: 2px 7px;
font-weight: bold;
margin: 0 1px;
background: #eaeaea;
background: rgba(0,0,0,0.08);
}
.mce-window .wp-help-header td {
font-weight: bold;
padding: 0 5px;
}
/* TinyMCE menus */
.mce-menu,
.mce-floatpanel.mce-popover {

File diff suppressed because one or more lines are too long

View File

@ -79,8 +79,8 @@
width: calc( 100% - 36px );
}
.mce-wp-help .mce-window-head {
border-bottom: none;
.mce-window .mce-foot {
border-top: 1px solid #dfdfdf;
}
.mce-textbox,
@ -104,6 +104,69 @@
box-shadow: 0 0 2px rgba(30,140,190,0.8);
}
.mce-window .mce-wp-help {
height: 320px;
width: 360px;
overflow: auto;
}
.mce-window .mce-wp-help * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.mce-window .mce-wp-help .mce-container-body.mce-undefined {
width: auto !important;
}
.mce-window .wp-editor-help {
width: 340px;
padding: 10px 15px 0;
}
.mce-window .wp-editor-help p {
margin: 7px 0;
}
.mce-window .wp-editor-help table {
width: 320px;
margin-bottom: 20px;
}
.mce-window .wp-editor-help td,
.mce-window .wp-editor-help th {
font-size: 13px;
vertical-align: middle;
}
.mce-window .wp-editor-help td {
padding: 5px;
word-wrap: break-word;
white-space: normal;
}
.mce-window .wp-editor-help th {
font-weight: bold;
padding: 5px 0 0;
text-align: center;
}
.mce-window .wp-editor-help kbd {
font-family: monospace;
padding: 2px 7px;
font-weight: bold;
margin: 0 1px;
background: #eaeaea;
background: rgba(0,0,0,0.08);
}
.mce-window .wp-help-header td {
font-weight: bold;
padding: 0 5px;
}
/* TinyMCE menus */
.mce-menu,
.mce-floatpanel.mce-popover {

File diff suppressed because one or more lines are too long

View File

@ -201,15 +201,87 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) {
});
editor.addCommand( 'WP_Help', function() {
editor.windowManager.open({
url: tinymce.baseURL + '/wp-mce-help.php',
var access = tinymce.Env.mac ? __( 'Ctrl + Alt + letter:' ) : __( 'Shift + Alt + letter:' ),
meta = tinymce.Env.mac ? __( 'Cmd + letter:' ) : __( 'Ctrl + letter:' ),
table1 = [],
table2 = [],
header;
each( [
{ c: 'Copy', x: 'Cut' },
{ v: 'Paste', a: 'Select all' },
{ z: 'Undo', y: 'Redo' },
{ b: 'Bold', i: 'Italic' },
{ u: 'Underline', k: 'Insert/edit link' }
], function( row ) {
table1.push( tr( row ) );
} );
each( [
{ 1: 'Heading 1', 2: 'Heading 2' },
{ 3: 'Heading 3', 4: 'Heading 4' },
{ 5: 'Heading 5', 6: 'Heading 6' },
{ l: 'Align left', c: 'Align center' },
{ r: 'Align right', j: 'Justify' },
{ d: 'Strikethrough', q: 'Blockquote' },
{ u: 'Bullet list', o: 'Numbered list' },
{ a: 'Insert/edit link', s: 'Remove link' },
{ m: 'Insert/edit image', t: 'Insert Read More tag' },
{ h: 'Keyboard Shortcuts', x: 'Code' },
{ p: 'Insert Page Break tag', w: 'Distraction-free writing mode' }
], function( row ) {
table2.push( tr( row ) );
} );
function tr( row ) {
var out = '<tr>';
each( row, function( text, key ) {
if ( ! text ) {
out += '<th></th><td></td>';
} else {
out += '<th><kbd>' + key + '</kbd></th><td>' + __( text ) + '</td>';
}
});
return out + '</tr>';
}
header = [ __( 'Letter' ), __( 'Action' ), __( 'Letter' ), __( 'Action' ) ];
header = '<tr class="wp-help-header"><td>' + header.join( '</td><td>' ) + '</td></tr>';
editor.windowManager.open( {
title: 'Keyboard Shortcuts',
width: 450,
height: 420,
classes: 'wp-help',
buttons: { text: 'Close', onclick: 'close' }
});
});
items: {
type: 'container',
classes: 'wp-help',
html: (
'<div class="wp-editor-help">' +
'<p>' + __( 'Default shortcuts,' ) + ' ' + meta + '</p>' +
'<table>' +
header +
table1.join('') +
'</table>' +
'<p>' + __( 'Additional shortcuts,' ) + ' ' + access + '</p>' +
'<table>' +
header +
table2.join('') +
'</table>' +
'<p>' + __( 'Focus shortcuts:' ) + '</p>' +
'<table>' +
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' }) +
'</table></div>'
)
},
buttons: {
text: 'Close',
onclick: 'close'
}
} );
} );
editor.addCommand( 'WP_Medialib', function() {
if ( wp && wp.media && wp.media.editor ) {

File diff suppressed because one or more lines are too long

View File

@ -1,142 +0,0 @@
<?php
/**
* @package TinyMCE
* @author Moxiecode
* @copyright Copyright © 2005-2006, Moxiecode Systems AB, All rights reserved.
*/
/** @ignore */
require_once( dirname( dirname( dirname( dirname( __FILE__ ) ) ) ) . '/wp-load.php' );
header('Content-Type: text/html; charset=' . get_bloginfo('charset'));
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php echo get_option('blog_charset'); ?>" />
<title><?php _e('Keyboard Shortcuts'); ?></title>
<?php wp_admin_css( 'wp-admin', true ); ?>
<style type="text/css">
html {
background: #fcfcfc;
overflow: hidden;
}
body {
min-width: 0;
}
.wrap {
background-color: #fff;
border-top: 1px solid #ddd;
height: 390px;
margin: 0;
overflow: auto;
padding: 10px 16px;
}
th {
text-align: center;
}
.top th {
text-decoration: underline;
}
.top .key {
text-align: center;
width: 5em;
}
.keys {
border: 0 none;
margin-bottom: 15px;
width: 100%;
}
.keys p {
display: inline-block;
margin: 0px;
padding: 0px;
}
.keys .left {
text-align: left;
}
.keys .center {
text-align: center;
}
.keys .right {
text-align: right;
}
</style>
<?php if ( is_rtl() ) : ?>
<style type="text/css">
.keys .left {
text-align: right;
}
.keys .right {
text-align: left;
}
</style>
<?php endif; ?>
</head>
<body class="windows wp-core-ui">
<div class="wrap">
<div>
<p><?php _e('Rather than reaching for your mouse to click on the toolbar, use these access keys. Windows and Linux use Ctrl + letter. Macintosh uses Command + letter.'); ?></p>
<table class="keys">
<tr class="top"><th class="key center"><?php _e('Letter'); ?></th><th class="left"><?php _e('Action'); ?></th><th class="key center"><?php _e('Letter'); ?></th><th class="left"><?php _e('Action'); ?></th></tr>
<tr><th>c</th><td><?php _e('Copy'); ?></td><th>v</th><td><?php _e('Paste'); ?></td></tr>
<tr><th>a</th><td><?php _e('Select all'); ?></td><th>x</th><td><?php _e('Cut'); ?></td></tr>
<tr><th>z</th><td><?php _e('Undo'); ?></td><th>y</th><td><?php _e('Redo'); ?></td></tr>
<tr><th>b</th><td><?php _e('Bold'); ?></td><th>i</th><td><?php _e('Italic'); ?></td></tr>
<tr><th>u</th><td><?php _e('Underline'); ?></td><th>k</th><td><?php _e('Insert/edit link'); ?></td></tr>
</table>
<p>
<?php _e('The following shortcuts use different access keys: Alt + Shift + letter.'); ?>
<?php _e('Macintosh uses Ctrl + Alt + letter.'); ?>
</p>
<table class="keys">
<tr class="top"><th class="key center"><?php _e('Letter'); ?></th><th class="left"><?php _e('Action'); ?></th><th class="key center"><?php _e('Letter'); ?></th><th class="left"><?php _e('Action'); ?></th></tr>
<tr><th>1</th><td><?php _e('Heading 1'); ?></td><th>2</th><td><?php _e('Heading 2'); ?></td></tr>
<tr><th>3</th><td><?php _e('Heading 3'); ?></td><th>4</th><td><?php _e('Heading 4'); ?></td></tr>
<tr><th>5</th><td><?php _e('Heading 5'); ?></td><th>6</th><td><?php _e('Heading 6'); ?></td></tr>
<tr><th>n</th><td><?php _e('Check Spelling'); ?></td><th>l</th><td><?php _e('Align Left'); ?></td></tr>
<tr><th>j</th><td><?php _e('Justify Text'); ?></td><th>c</th><td><?php _e('Align Center'); ?></td></tr>
<tr><th>d</th><td><span style="text-decoration: line-through;"><?php _e('Strikethrough'); ?></span></td><th>r</th><td><?php _e('Align Right'); ?></td></tr>
<tr><th>u</th><td><strong>&bull;</strong> <?php _e('List'); ?></td><th>a</th><td><?php _e('Insert/edit link'); ?></td></tr>
<tr><th>o</th><td>1. <?php _e('List'); ?></td><th>s</th><td><?php _e('Remove link'); ?></td></tr>
<tr><th>q</th><td><?php _e('Quote'); ?></td><th>m</th><td><?php _e('Insert Image'); ?></td></tr>
<tr><th>w</th><td><?php _e('Distraction-free writing mode'); ?></td><th>t</th><td><?php _e('Insert More Tag'); ?></td></tr>
<tr><th>p</th><td><?php _e('Insert Page Break tag'); ?></td><th>h</th><td><?php _e('Help'); ?></td></tr>
<tr><th>x</th><td><?php _e('Add/remove code tag'); ?></td><th> </th><td>&nbsp;</td></tr>
</table>
<p><?php _e('Focus shortcuts:'); ?></p>
<table class="keys focus">
<tr><th class="left">Alt + F8</th><td><?php _e('Image toolbar (when an image is selected)'); ?></td></tr>
<tr><th class="left">Alt + F9</th><td><?php _e('Editor menu (when enabled)'); ?></td></tr>
<tr><th class="left">Alt + F10</th><td><?php _e('Editor toolbar'); ?></td></tr>
<tr><th class="left">Alt + F11</th><td><?php _e('Elements path'); ?></td></tr>
</table>
<p><?php _e('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>
</div>
</div>
</body>
</html>

View File

@ -4,7 +4,7 @@
*
* @global string $wp_version
*/
$wp_version = '4.3-alpha-32950';
$wp_version = '4.3-alpha-32951';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.