Port wphelp plugin to tinyMCE 3.0. Props azaozz. see #5703

git-svn-id: http://svn.automattic.com/wordpress/trunk@6641 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-includes/js/tinymce/plugins/autosave/langs/en.js

@@ -1,5 +0,0 @@
-// EN lang variables
-
-tinyMCE.addToLang('',{
-autosave_unload_msg : 'The changes you made will be lost if you navigate away from this page.'
-});

wp-includes/js/tinymce/plugins/wordpress/langs/en.js

@@ -12,7 +12,7 @@ else {
 	var metaKey = 'Alt';
 }
 
-tinyMCE.addToLang('',{
+tinyMCE.addI18n('',{
 wordpress_more_button : 'Split post with More tag (' + metaKey + '+t)',
 wordpress_page_button : 'Split post with Page tag',
 wordpress_adv_button : 'Show/Hide Advanced Toolbar (' + metaKey + '+v)',

wp-includes/js/tinymce/plugins/wphelp/editor_plugin.js

@@ -1,57 +1,50 @@
-/* Import plugin specific language pack */
-tinyMCE.importPluginLanguagePack('wphelp', '');
+/* WordPress Help plugin for TinyMCE 3.x */
 
-function TinyMCE_wphelp_getControlHTML(control_name) {
-	switch (control_name) {
-		case "wphelp":
-			var titleHelp = tinyMCE.getLang('lang_help_button_title');
-			var buttons = '<a href="javascript:tinyMCE.execInstanceCommand(\'{$editor_id}\',\'mceWordPressHelp\')" target="_self" onclick="tinyMCE.execInstanceCommand(\'{$editor_id}\',\'mceWordPressHelp\');return false;"><img id="{$editor_id}_help" src="{$pluginurl}/images/help.gif" title="'+titleHelp+'" width="20" height="20" class="mceButtonNormal" onmouseover="tinyMCE.switchClass(this,\'mceButtonOver\');" onmouseout="tinyMCE.restoreClass(this);" onmousedown="tinyMCE.restoreAndSwitchClass(this,\'mceButtonDown\');" /></a>';
-			var hiddenControls = '<div class="zerosize">'
-			+ '<input type="button" accesskey="b" onclick="tinyMCE.execInstanceCommand(\'{$editor_id}\',\'Bold\',false);" />'
-			+ '<input type="button" accesskey="i" onclick="tinyMCE.execInstanceCommand(\'{$editor_id}\',\'Italic\',false);" />'
-			+ '<input type="button" accesskey="d" onclick="tinyMCE.execInstanceCommand(\'{$editor_id}\',\'Strikethrough\',false);" />'
-			+ '<input type="button" accesskey="l" onclick="tinyMCE.execInstanceCommand(\'{$editor_id}\',\'InsertUnorderedList\',false);" />'
-			+ '<input type="button" accesskey="o" onclick="tinyMCE.execInstanceCommand(\'{$editor_id}\',\'InsertOrderedList\',false);" />'
-			+ '<input type="button" accesskey="w" onclick="tinyMCE.execInstanceCommand(\'{$editor_id}\',\'Outdent\',false);" />'
-			+ '<input type="button" accesskey="q" onclick="tinyMCE.execInstanceCommand(\'{$editor_id}\',\'Indent\',false);" />'
-			+ '<input type="button" accesskey="f" onclick="tinyMCE.execInstanceCommand(\'{$editor_id}\',\'JustifyLeft\',false);" />'
-			+ '<input type="button" accesskey="c" onclick="tinyMCE.execInstanceCommand(\'{$editor_id}\',\'JustifyCenter\',false);" />'
-			+ '<input type="button" accesskey="r" onclick="tinyMCE.execInstanceCommand(\'{$editor_id}\',\'JustifyRight\',false);" />'
-			+ '<input type="button" accesskey="a" onclick="tinyMCE.execInstanceCommand(\'{$editor_id}\',\'mceLink\',true);" />'
-			+ '<input type="button" accesskey="s" onclick="tinyMCE.execInstanceCommand(\'{$editor_id}\',\'unlink\',false);" />'
-			+ '<input type="button" accesskey="m" onclick="tinyMCE.execInstanceCommand(\'{$editor_id}\',\'mceImage\',true);" />'
-			+ '<input type="button" accesskey="t" onclick="tinyMCE.execInstanceCommand(\'{$editor_id}\',\'mcewordpressmore\');" />'
-			+ '<input type="button" accesskey="u" onclick="tinyMCE.execInstanceCommand(\'{$editor_id}\',\'Undo\',false);" />'
-			+ '<input type="button" accesskey="y" onclick="tinyMCE.execInstanceCommand(\'{$editor_id}\',\'Redo\',false);" />'
-			+ '<input type="button" accesskey="e" onclick="tinyMCE.execInstanceCommand(\'{$editor_id}\',\'mceCodeEditor\',false);" />'
-			+ '<input type="button" accesskey="h" onclick="tinyMCE.execInstanceCommand(\'{$editor_id}\',\'mceWordPressHelp\',false);" />'
-			+ '</div>';
-			return buttons+hiddenControls;
-    }
+(function() {
 
-    return "";
-}
+//    tinymce.PluginManager.requireLangPack('wphelp');
+    
+    tinymce.create('tinymce.plugins.WP_Help', {
+    
+        init : function(ed, url) {
+			// Register the command so that it can be invoked by using tinyMCE.activeEditor.execCommand('mceExample');
+			ed.addCommand('wpHelp', function() {
+				ed.windowManager.open({
+					file : tinymce.baseURL + '/wp-mce-help.php',
+					width : 450,
+					height : 420,
+					inline : 1
+				}, {
+					plugin_url : url, // Plugin absolute URL
+					resizable : 'yes',
+				    scrollbars : 'yes'
+				});
+			});
 
-function TinyMCE_wphelp_execCommand(editor_id, element, command, user_interface, value) {
+			// Register example button
+			ed.addButton('wphelp', {
+				title : ed.getLang('advanced.help_desc'),
+				cmd : 'wpHelp',
+				image : url + '/images/help.gif'
+			});
 
-	// Handle commands
-	switch (command) {
-		case "mceWordPressHelp":
-			var template = new Array();
-
-			template['file']   = tinyMCE.baseURL + '/wp-mce-help.php';
-			template['width']  = 480;
-			template['height'] = 380;
-
-			args = {
-				resizable : 'yes',
-				scrollbars : 'yes'
+			// Add a node change handler, selects the button in the UI when a image is selected
+			ed.onNodeChange.add(function(ed, cm, n) {
+				cm.setActive('wphelp', n.nodeName == 'IMG');
+			});
+		},
+		
+		getInfo : function() {
+			return {
+				longname : 'WordPress Help plugin',
+				author : 'WordPress',
+				authorurl : 'http://wordpress.org',
+				infourl : 'http://wordpress.org',
+				version : "3.0"
 			};
+		}
+	});
 
-			tinyMCE.openWindow(template, args);
-			return true;
-	}
-
-	// Pass to next handler in chain
-	return false;
-}
+	// Register plugin
+	tinymce.PluginManager.add('wphelp', tinymce.plugins.WP_Help);
+})();

wp-includes/js/tinymce/plugins/wphelp/langs/en.js

@@ -1,5 +0,0 @@
-// EN lang variables
-
-tinyMCE.addToLang('',{
-help_button_title : 'Help (Alt+h)'
-});

wp-includes/js/tinymce/tiny_mce_config.php

@@ -27,7 +27,7 @@
 	
 	$invalid_elements = apply_filters('mce_invalid_elements', '');
 
-	$plugins = array( 'safari', 'inlinepopups', 'autosave', 'spellchecker', 'paste', 'wordpress', 'media' );
+	$plugins = array( 'safari', 'inlinepopups', 'autosave', 'spellchecker', 'paste', 'wordpress', 'wphelp', 'media' );
 	$plugins = apply_filters('mce_plugins', $plugins);
 	$plugins = implode($plugins, ',');
 

wp-includes/js/tinymce/wp-mce-help.php

@@ -6,22 +6,22 @@ header('Content-Type: text/html; charset=' . get_bloginfo('charset'));
 <head>
 <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php echo get_option('blog_charset'); ?>" />
 <title><?php _e('Rich Editor Help') ?></title>
+<script type="text/javascript" src="tiny_mce_popup.js"></script>
 <?php wp_admin_css(); ?>
 <style type="text/css">
 	#wphead {
 		padding-top: 5px;
-		padding-bottom: 5px;
 		padding-left: 15px;
-		font-size: 90%;
+		font-size: 80%;
 	}
 	#adminmenu {
 		padding-top: 2px;
-		padding-bottom: 2px;
 		padding-left: 15px;
-		font-size: 94%;
+		font-size: 80%;
 	}
 	#user_info {
-		margin-top: 15px;
+		right: 5%;
+		top: 5px;
 	}
 	h2 {
 		font-size: 2em;
@@ -35,8 +35,14 @@ header('Content-Type: text/html; charset=' . get_bloginfo('charset'));
 		margin-bottom: 0px;
 	}
 	#flipper {
-		margin: 5px 10px 3px;
+		margin: 0;
+		padding: 5px 20px 10px;
+		background-color: #fff;
 	}
+	* html {
+        overflow-x: hidden;
+        overflow-y: scroll;
+    }
 	#flipper div p {
 		margin-top: 0.4em;
 		margin-bottom: 0.8em;
@@ -72,6 +78,7 @@ header('Content-Type: text/html; charset=' . get_bloginfo('charset'));
 	}
 	#buttoncontainer {
 		text-align: center;
+		margin-bottom: 20px;
 	}
 	#buttoncontainer a, #buttoncontainer a:hover {
 		border-bottom: 0px;
@@ -106,7 +113,7 @@ header('Content-Type: text/html; charset=' . get_bloginfo('charset'));
 			c = d('content'+i.toString());
 			t = d('tab'+i.toString());
 			if ( n == i ) {
-				c.className = '';
+				c.className = 'vizible';
 				t.className = 'current';
 			} else {
 				c.className = 'hidden';
@@ -114,6 +121,16 @@ header('Content-Type: text/html; charset=' . get_bloginfo('charset'));
 			}
 		}
 	}
+    
+    function init() {
+        document.getElementById('version').innerHTML = tinymce.majorVersion + "." + tinymce.minorVersion;
+        document.getElementById('date').innerHTML = tinymce.releaseDate;
+    }
+    tinyMCEPopup.onInit.add(init);
+    
+    // For modal dialogs in IE
+    if (tinymce.isIE)
+	   document.write('<base target="_self" />');
 </script>
 </head>
 <body>
@@ -132,7 +149,9 @@ header('Content-Type: text/html; charset=' . get_bloginfo('charset'));
 <div id="content1">
 	<h2><?php _e('Rich Editing Basics') ?></h2>
 	<p><?php _e('<em>Rich editing</em>, also called WYSIWYG for What You See Is What You Get, means your text is formatted as you type. The rich editor creates HTML code behind the scenes while you concentrate on writing. Font styles, links and images all appear approximately as they will on the internet.') ?></p>
-	<p><?php _e('WordPress includes a rich HTML editor that works well in most web browsers used today. It is powerful but it has limitations. Pasting text from other word processors may not give the results you expect. If you do not like the way the rich editor works, you may turn it off in the Your Profile and Personal Options form, under Users in the admin menu.') ?></p>
+	<p><?php _e('WordPress includes a rich HTML editor that works well in most web browsers used today. It is powerful but it has limitations. Pasting text from other word processors may not give the results you expect. For best compatibility, use the "Paste as Plain Text" or "Paste from Word" buttons located on the extended (second) toolbar row.') ?></p>
+	<p><?php _e('While using the editor, most basic keyboard shortcuts work like in any other text editor. For example: Shift+Enter inserts line break, Ctrl+C = copy, Ctrl+X = cut, Ctrl+Z = undo, Ctrl+Y = redo, Ctrl+B = bold, Ctrl+I = italic, Ctrl+U = underline, etc. (on Mac use the Apple key instead of Ctrl).') ?></p>
+    <p><?php _e('If you do not like the way the rich editor works, you may turn it off in the Your Profile and Personal Options form, under Users in the admin menu.') ?></p>
 </div>
 
 <div id="content2" class="hidden">
@@ -146,7 +165,7 @@ header('Content-Type: text/html; charset=' . get_bloginfo('charset'));
 
 <div id="content3" class="hidden">
 	<h2><?php _e('Writing at Full Speed') ?></h2>
-	<p><?php _e('Rather than reaching for your mouse to click on the toolbar, use these access keys. Windows and Linux use Alt+&lt;letter>. Macintosh uses Ctrl+&lt;letter>.') ?></p>
+    <p><?php _e('Rather than reaching for your mouse to click on the toolbar, use these access keys. Windows and Linux use Alt+&lt;letter>. Macintosh uses Ctrl+&lt;letter>.') ?></p>
 	<table id="keys" width="100%" border="0">
 		<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>n</th><td><?php _e('Check Spelling') ?></td><th>f</th><td class="align left"><?php _e('Align Left') ?></td></tr>
@@ -163,9 +182,10 @@ header('Content-Type: text/html; charset=' . get_bloginfo('charset'));
 
 <div id="content4" class="hidden">
 	<h2><?php _e('About TinyMCE'); ?></h2>
-	<p><?php printf(__('Version: %s'), '2.0.9') ?></p>
+	
+    <p><?php _e('Version:'); ?> <span id="version"></span> (<span id="date"></span>)</p>
 	<p><?php printf(__('TinyMCE is a platform independent web based Javascript HTML WYSIWYG editor control released as Open Source under %sLGPL</a>	by Moxiecode Systems AB. It has the ability to convert HTML TEXTAREA fields or other HTML elements to editor instances.'), '<a href="'.get_bloginfo('url').'/wp-includes/js/tinymce/license.txt" target="_blank" title="'.__('GNU Library General Public Licence').'">') ?></p>
-	<p><?php _e('Copyright &copy; 2005, <a href="http://www.moxiecode.com" target="_blank">Moxiecode Systems AB</a>, All rights reserved.') ?></p>
+	<p><?php _e('Copyright &copy; 2003-2007, <a href="http://www.moxiecode.com" target="_blank">Moxiecode Systems AB</a>, All rights reserved.') ?></p>
 	<p><?php _e('For more information about this software visit the <a href="http://tinymce.moxiecode.com" target="_blank">TinyMCE website</a>.') ?></p>
 
 	<div id="buttoncontainer">