<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[21300] trunk: TinyMCE: fix tabbig in and out of the editor, fixes #20834</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg > ul, #logmsg > ol { margin-left: 0; margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://core.trac.wordpress.org/changeset/21300">21300</a></dd>
<dt>Author</dt> <dd>azaozz</dd>
<dt>Date</dt> <dd>2012-07-22 02:33:53 +0000 (Sun, 22 Jul 2012)</dd>
</dl>
<h3>Log Message</h3>
<pre>TinyMCE: fix tabbig in and out of the editor, fixes <a href="http://core.trac.wordpress.org/ticket/20834">#20834</a></pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkwpadmineditformadvancedphp">trunk/wp-admin/edit-form-advanced.php</a></li>
<li><a href="#trunkwpadminincludespostphp">trunk/wp-admin/includes/post.php</a></li>
<li><a href="#trunkwpincludesclasswpeditorphp">trunk/wp-includes/class-wp-editor.php</a></li>
<li><a href="#trunkwpincludesjsautosavedevjs">trunk/wp-includes/js/autosave.dev.js</a></li>
<li><a href="#trunkwpincludesjstinymcepluginstabfocuseditor_pluginjs">trunk/wp-includes/js/tinymce/plugins/tabfocus/editor_plugin.js</a></li>
<li><a href="#trunkwpincludesjstinymcepluginstabfocuseditor_plugin_srcjs">trunk/wp-includes/js/tinymce/plugins/tabfocus/editor_plugin_src.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkwpadmineditformadvancedphp"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/edit-form-advanced.php (21299 => 21300)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/edit-form-advanced.php 2012-07-21 20:24:21 UTC (rev 21299)
+++ trunk/wp-admin/edit-form-advanced.php 2012-07-22 02:33:53 UTC (rev 21300)
</span><span class="lines">@@ -312,7 +312,7 @@
</span><span class="cx"> <?php if ( post_type_supports($post_type, 'editor') ) { ?>
</span><span class="cx"> <div id="postdivrich" class="postarea">
</span><span class="cx">
</span><del>-<?php wp_editor($post->post_content, 'content', array('dfw' => true, 'tabindex' => 1) ); ?>
</del><ins>+<?php wp_editor($post->post_content, 'content', array('dfw' => true, 'tabindex' => 1, 'tabfocus_elements' => 'sample-permalink,post-preview') ); ?>
</ins><span class="cx">
</span><span class="cx"> <table id="post-status-info" cellspacing="0"><tbody><tr>
</span><span class="cx"> <td id="wp-word-count"><?php printf( __( 'Word count: %s' ), '<span class="word-count">0</span>' ); ?></td>
</span></span></pre></div>
<a id="trunkwpadminincludespostphp"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/includes/post.php (21299 => 21300)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/includes/post.php 2012-07-21 20:24:21 UTC (rev 21299)
+++ trunk/wp-admin/includes/post.php 2012-07-22 02:33:53 UTC (rev 21300)
</span><span class="lines">@@ -1091,7 +1091,7 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> if ( false === strpos($permalink, '%postname%') && false === strpos($permalink, '%pagename%') ) {
</span><del>- $return = '<strong>' . __('Permalink:') . "</strong>\n" . '<span id="sample-permalink">' . $permalink . "</span>\n";
</del><ins>+ $return = '<strong>' . __('Permalink:') . "</strong>\n" . '<span id="sample-permalink" tabindex="-1">' . $permalink . "</span>\n";
</ins><span class="cx"> if ( '' == get_option( 'permalink_structure' ) && current_user_can( 'manage_options' ) && !( 'page' == get_option('show_on_front') && $id == get_option('page_on_front') ) )
</span><span class="cx"> $return .= '<span id="change-permalinks"><a href="options-permalink.php" class="button" target="_blank">' . __('Change Permalinks') . "</a></span>\n";
</span><span class="cx"> if ( isset($view_post) )
</span><span class="lines">@@ -1120,7 +1120,7 @@
</span><span class="cx"> $display_link = str_replace(array('%pagename%','%postname%'), $post_name_html, $permalink);
</span><span class="cx"> $view_link = str_replace(array('%pagename%','%postname%'), $post_name, $permalink);
</span><span class="cx"> $return = '<strong>' . __('Permalink:') . "</strong>\n";
</span><del>- $return .= '<span id="sample-permalink">' . $display_link . "</span>\n";
</del><ins>+ $return .= '<span id="sample-permalink" tabindex="-1">' . $display_link . "</span>\n";
</ins><span class="cx"> $return .= '&lrm;'; // Fix bi-directional text display defect in RTL languages.
</span><span class="cx"> $return .= '<span id="edit-slug-buttons"><a href="#post_name" class="edit-slug button hide-if-no-js" onclick="editPermalink(' . $id . '); return false;">' . __('Edit') . "</a></span>\n";
</span><span class="cx"> $return .= '<span id="editable-post-name-full">' . $post_name . "</span>\n";
</span></span></pre></div>
<a id="trunkwpincludesclasswpeditorphp"></a>
<div class="modfile"><h4>Modified: trunk/wp-includes/class-wp-editor.php (21299 => 21300)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-includes/class-wp-editor.php 2012-07-21 20:24:21 UTC (rev 21299)
+++ trunk/wp-includes/class-wp-editor.php 2012-07-22 02:33:53 UTC (rev 21300)
</span><span class="lines">@@ -34,6 +34,7 @@
</span><span class="cx"> 'textarea_name' => $editor_id, // set the textarea name to something different, square brackets [] can be used here
</span><span class="cx"> 'textarea_rows' => get_option('default_post_edit_rows', 10), // rows="..."
</span><span class="cx"> 'tabindex' => '',
</span><ins>+ 'tabfocus_elements' => ':prev,:next', // the previous and next element ID to move the focus to when pressing the Tab key in TinyMCE
</ins><span class="cx"> 'editor_css' => '', // intended for extra styles for both visual and Text editors buttons, needs to include the <style> tags, can use "scoped".
</span><span class="cx"> 'editor_class' => '', // add extra class(es) to the editor textarea
</span><span class="cx"> 'teeny' => false, // output the minimal editor config used in Press This
</span><span class="lines">@@ -311,7 +312,6 @@
</span><span class="cx"> 'keep_styles' => false,
</span><span class="cx"> 'entities' => '38,amp,60,lt,62,gt',
</span><span class="cx"> 'accessibility_focus' => true,
</span><del>- 'tabfocus_elements' => 'title,publish',
</del><span class="cx"> 'media_strict' => false,
</span><span class="cx"> 'paste_remove_styles' => true,
</span><span class="cx"> 'paste_remove_spans' => true,
</span><span class="lines">@@ -398,6 +398,7 @@
</span><span class="cx"> 'theme_advanced_buttons2' => implode($mce_buttons_2, ','),
</span><span class="cx"> 'theme_advanced_buttons3' => implode($mce_buttons_3, ','),
</span><span class="cx"> 'theme_advanced_buttons4' => implode($mce_buttons_4, ','),
</span><ins>+ 'tabfocus_elements' => $set['tabfocus_elements'],
</ins><span class="cx"> 'body_class' => $body_class
</span><span class="cx"> );
</span><span class="cx">
</span></span></pre></div>
<a id="trunkwpincludesjsautosavedevjs"></a>
<div class="modfile"><h4>Modified: trunk/wp-includes/js/autosave.dev.js (21299 => 21300)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-includes/js/autosave.dev.js 2012-07-21 20:24:21 UTC (rev 21299)
+++ trunk/wp-includes/js/autosave.dev.js 2012-07-22 02:33:53 UTC (rev 21300)
</span><span class="lines">@@ -1,7 +1,6 @@
</span><span class="cx"> var autosave, autosaveLast = '', autosavePeriodical, autosaveOldMessage = '', autosaveDelayPreview = false, notSaved = true, blockSave = false, fullscreen, autosaveLockRelease = true;
</span><span class="cx">
</span><span class="cx"> jQuery(document).ready( function($) {
</span><del>- var dotabkey = true;
</del><span class="cx">
</span><span class="cx"> autosaveLast = $('#post #title').val() + $('#post #content').val();
</span><span class="cx"> autosavePeriodical = $.schedule({time: autosaveL10n.autosaveInterval * 1000, func: function() { autosave(); }, repeat: true, protect: true});
</span><span class="lines">@@ -29,7 +28,7 @@
</span><span class="cx"> });
</span><span class="cx">
</span><span class="cx"> window.onbeforeunload = function(){
</span><del>- var mce = typeof(tinyMCE) != 'undefined' ? tinyMCE.activeEditor : false, title, content;
</del><ins>+ var mce = typeof(tinymce) != 'undefined' ? tinymce.activeEditor : false, title, content;
</ins><span class="cx">
</span><span class="cx"> if ( mce && !mce.isHidden() ) {
</span><span class="cx"> if ( mce.isDirty() )
</span><span class="lines">@@ -97,17 +96,15 @@
</span><span class="cx"> $('input#wp-preview').val('');
</span><span class="cx"> }
</span><span class="cx">
</span><del>- // This code is meant to allow tabbing from Title to Post if tinyMCE is defined.
- if ( typeof tinyMCE != 'undefined' ) {
- $('#title')[$.browser.opera ? 'keypress' : 'keydown'](function (e) {
- if ( e.which == 9 && !e.shiftKey && !e.controlKey && !e.altKey ) {
- if ( ($('#auto_draft').val() == '1') && ($("#title").val().length > 0) ) { autosave(); }
- if ( tinyMCE.activeEditor && ! tinyMCE.activeEditor.isHidden() && dotabkey ) {
- e.preventDefault();
- dotabkey = false;
- tinyMCE.activeEditor.focus();
- return false;
- }
</del><ins>+ // This code is meant to allow tabbing from Title to Post if tinymce is defined.
+ if ( typeof tinymce != 'undefined' ) {
+ $('#title').bind('keydown.focus-tinymce', function(e) {
+ if ( e.which != 9 )
+ return;
+
+ if ( !e.ctrlKey && !e.altKey && !e.shiftKey && tinymce.activeEditor && !tinymce.activeEditor.isHidden() ) {
+ $('td.mceToolbar > a').focus();
+ e.preventDefault();
</ins><span class="cx"> }
</span><span class="cx"> });
</span><span class="cx"> }
</span><span class="lines">@@ -244,7 +241,7 @@
</span><span class="cx"> autosave = function() {
</span><span class="cx"> // (bool) is rich editor enabled and active
</span><span class="cx"> blockSave = true;
</span><del>- var rich = (typeof tinyMCE != "undefined") && tinyMCE.activeEditor && !tinyMCE.activeEditor.isHidden(),
</del><ins>+ var rich = (typeof tinymce != "undefined") && tinymce.activeEditor && !tinymce.activeEditor.isHidden(),
</ins><span class="cx"> post_data, doAutoSave, ed, origStatus, successCallback;
</span><span class="cx">
</span><span class="cx"> autosave_disable_buttons();
</span><span class="lines">@@ -269,16 +266,16 @@
</span><span class="cx"> if ( jQuery("#TB_window").css('display') == 'block' )
</span><span class="cx"> doAutoSave = false;
</span><span class="cx">
</span><del>- /* Gotta do this up here so we can check the length when tinyMCE is in use */
</del><ins>+ /* Gotta do this up here so we can check the length when tinymce is in use */
</ins><span class="cx"> if ( rich && doAutoSave ) {
</span><del>- ed = tinyMCE.activeEditor;
- // Don't run while the TinyMCE spellcheck is on. It resets all found words.
</del><ins>+ ed = tinymce.activeEditor;
+ // Don't run while the tinymce spellcheck is on. It resets all found words.
</ins><span class="cx"> if ( ed.plugins.spellchecker && ed.plugins.spellchecker.active ) {
</span><span class="cx"> doAutoSave = false;
</span><span class="cx"> } else {
</span><span class="cx"> if ( 'mce_fullscreen' == ed.id || 'wp_mce_fullscreen' == ed.id )
</span><del>- tinyMCE.get('content').setContent(ed.getContent({format : 'raw'}), {format : 'raw'});
- tinyMCE.triggerSave();
</del><ins>+ tinymce.get('content').setContent(ed.getContent({format : 'raw'}), {format : 'raw'});
+ tinymce.triggerSave();
</ins><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre></div>
<a id="trunkwpincludesjstinymcepluginstabfocuseditor_pluginjs"></a>
<div class="modfile"><h4>Modified: trunk/wp-includes/js/tinymce/plugins/tabfocus/editor_plugin.js (21299 => 21300)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-includes/js/tinymce/plugins/tabfocus/editor_plugin.js 2012-07-21 20:24:21 UTC (rev 21299)
+++ trunk/wp-includes/js/tinymce/plugins/tabfocus/editor_plugin.js 2012-07-22 02:33:53 UTC (rev 21300)
</span><span class="lines">@@ -1 +1 @@
</span><del>-(function(){var c=tinymce.DOM,a=tinymce.dom.Event,d=tinymce.each,b=tinymce.explode;tinymce.create("tinymce.plugins.TabFocusPlugin",{init:function(f,g){function e(i,j){if(j.keyCode===9){return a.cancel(j)}}function h(l,p){var j,m,o,n,k;function q(t){n=c.select(":input:enabled,*[tabindex]:not(iframe)");function s(v){return v.nodeName==="BODY"||(v.type!="hidden"&&!(v.style.display=="none")&&!(v.style.visibility=="hidden")&&s(v.parentNode))}function i(v){return v.attributes.tabIndex.specified||v.nodeName=="INPUT"||v.nodeName=="TEXTAREA"}function u(){return tinymce.isIE6||tinymce.isIE7}function r(v){return((!u()||i(v)))&&v.getAttribute("tabindex")!="-1"&&s(v)}d(n,function(w,v){if(w.id==l.id){j=v;return false}});if(t>0){for(m=j+1;m<n.length;m++){if(r(n[m])){return n[m]}}}else{for(m=j-1;m>=0;m--){if(r(n[m])){return n[m]}}}r
eturn null}if(p.keyCode===9){k=b(l.getParam("tab_focus",l.getParam("tabfocus_elements",":prev,:next")));if(k.length==1){k[1]=k[0];k[0]=":prev"}if(p.shiftKey){if(k[0]==":prev"){n=q(-1)}else{n=c.get(k[0])}}else{if(k[1]==":next"){n=q(1)}else{n=c.get(k[1])}}if(n){if(n.id&&(l=tinymce.get(n.id||n.name))){l.focus()}else{window.setTimeout(function(){if(!tinymce.isWebKit){window.focus()}n.focus()},10)}return a.cancel(p)}}}f.onKeyUp.add(e);if(tinymce.isGecko){f.onKeyPress.add(h);f.onKeyDown.add(e)}else{f.onKeyDown.add(h)}},getInfo:function(){return{longname:"Tabfocus",author:"Moxiecode Systems AB",authorurl:"http://tinymce.moxiecode.com",infourl:"http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/tabfocus",version:tinymce.majorVersion+"."+tinymce.minorVersion}}});tinymce.PluginManager.add("tabfocus",tinymce.plugins.TabFocusPlugin)})();
</del><span class="cx">\ No newline at end of file
</span><ins>+(function(){var c=tinymce.DOM,a=tinymce.dom.Event,d=tinymce.each,b=tinymce.explode;tinymce.create("tinymce.plugins.TabFocusPlugin",{init:function(f,g){function e(i,j){if(j.keyCode===9){return a.cancel(j)}}function h(l,p){var j,m,o,n,k;function q(t){n=c.select(":input:enabled,*[tabindex]:not(iframe)");function s(v){return v.nodeName==="BODY"||(v.type!="hidden"&&!(v.style.display=="none")&&!(v.style.visibility=="hidden")&&s(v.parentNode))}function i(v){return v.attributes.tabIndex.specified||v.nodeName=="INPUT"||v.nodeName=="TEXTAREA"}function u(){return tinymce.isIE6||tinymce.isIE7}function r(v){return((!u()||i(v)))&&v.getAttribute("tabindex")!="-1"&&s(v)}d(n,function(w,v){if(w.id==l.id){j=v;return false}});if(t>0){for(m=j+1;m<n.length;m++){if(r(n[m])){return n[m]}}}else{for(m=j-1;m>=0;m--){if(r(n[m])){return n[m]}}}r
eturn null}if(p.keyCode===9){k=b(l.getParam("tab_focus",l.getParam("tabfocus_elements",":prev,:next")));if(k.length==1){k[1]=k[0];k[0]=":prev"}if(p.shiftKey){if(k[0]==":prev"){n=q(-1)}else{n=c.get(k[0])}}else{if(k[1]==":next"){n=q(1)}else{n=c.get(k[1])}}if(n){if(n.id&&(l=tinymce.get(n.id||n.name))){l.focus()}else{window.setTimeout(function(){if(!tinymce.isWebKit){window.focus()}n.focus()},10)}return a.cancel(p)}}}f.onKeyUp.add(e);f.onKeyDown.add(h);if(tinymce.isGecko){f.onKeyPress.add(e)}},getInfo:function(){return{longname:"Tabfocus",author:"Moxiecode Systems AB",authorurl:"http://tinymce.moxiecode.com",infourl:"http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/tabfocus",version:tinymce.majorVersion+"."+tinymce.minorVersion}}});tinymce.PluginManager.add("tabfocus",tinymce.plugins.TabFocusPlugin)})();
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkwpincludesjstinymcepluginstabfocuseditor_plugin_srcjs"></a>
<div class="modfile"><h4>Modified: trunk/wp-includes/js/tinymce/plugins/tabfocus/editor_plugin_src.js (21299 => 21300)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-includes/js/tinymce/plugins/tabfocus/editor_plugin_src.js 2012-07-21 20:24:21 UTC (rev 21299)
+++ trunk/wp-includes/js/tinymce/plugins/tabfocus/editor_plugin_src.js 2012-07-22 02:33:53 UTC (rev 21300)
</span><span class="lines">@@ -97,13 +97,10 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> ed.onKeyUp.add(tabCancel);
</span><ins>+ ed.onKeyDown.add(tabHandler);
</ins><span class="cx">
</span><del>- if (tinymce.isGecko) {
- ed.onKeyPress.add(tabHandler);
- ed.onKeyDown.add(tabCancel);
- } else
- ed.onKeyDown.add(tabHandler);
-
</del><ins>+ if (tinymce.isGecko)
+ ed.onKeyPress.add(tabCancel);
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> getInfo : function() {
</span></span></pre>
</div>
</div>
</body>
</html>