- Add: New button in the WYSIWYG editor and in the plain text editor to easily implement the footnotes tag (icon for WYSIWYG-button missing!!!)

git-svn-id: https://plugins.svn.wordpress.org/footnotes/trunk@920366 b8457f37-d9ea-0310-8a92-e5e31aec5664

includes/wysiwyg-editor.php

@@ -0,0 +1,110 @@
+<?php
+/**
+ * Created by PhpStorm.
+ * User: Stefan
+ * Date: 24.05.14
+ * Time: 14:47
+ * Version: 1.1.2
+ * Since: 1.1.2
+ */
+
+/**
+ * adds a new button to the WYSIWYG editor for pages and posts
+ * @param array $buttons
+ * @return array
+ * @since 1.1.2
+ */
+function footnotes_wysiwyg_editor_functions($buttons) {
+    array_push($buttons, FOOTNOTES_PLUGIN_NAME);
+    return $buttons;
+}
+
+/**
+ * includes a javascript file to have a on-click function for the new button in the WYSIWYG editor
+ * @param array $plugin_array
+ * @return array
+ * @since 1.1.2
+ */
+function footnotes_wysiwyg_editor_buttons($plugin_array) {
+    $plugin_array[FOOTNOTES_PLUGIN_NAME] = plugins_url('/../js/wysiwyg-editor.js', __FILE__);
+    return $plugin_array;
+}
+
+/**
+ * adds a new button to the plain text editor for pages and posts
+ * @since 1.1.2
+ */
+function footnotes_text_editor_buttons() {
+    ?>
+    <script type="text/javascript">
+        /**
+         * adds a tag in at the beginning and at the end of a selected text in the specific textarea
+         * @param string elementID
+         * @param string openTag
+         * @param string closeTag
+         */
+        function footnotes_wrapText(elementID, openTag, closeTag) {
+            var textArea = jQuery('#' + elementID);
+            var len = textArea.val().length;
+            var start = textArea[0].selectionStart;
+            var end = textArea[0].selectionEnd;
+            var selectedText = textArea.val().substring(start, end);
+            var replacement = openTag + selectedText + closeTag;
+            textArea.val(textArea.val().substring(0, start) + replacement + textArea.val().substring(end, len));
+        }
+        /**
+         * adds a new button to the plain text editor
+         */
+        QTags.addButton( 'footnotes_quicktag_button', 'Footnotes', footnotes_text_editor_callback );
+        /**
+         * callback function when the button is clicked
+         * executes a ajax call to get the start and end tag for the footnotes and
+         * adds them in before and after the selected text
+         */
+        function footnotes_text_editor_callback() {
+            jQuery.ajax({
+                type: 'POST',
+                url: '/wp-admin/admin-ajax.php',
+                data: {
+                    action: 'footnotes_getTags',
+                    data: ''
+                },
+                success: function(data, textStatus, XMLHttpRequest){
+                    var l_arr_Tags = JSON.parse(data);
+                    footnotes_wrapText("content", l_arr_Tags['start'], l_arr_Tags['end']);
+                },
+                error: function(MLHttpRequest, textStatus, errorThrown){
+                }
+            });
+        }
+    </script>
+    <?php
+}
+
+/**
+ * callback function for the WYSIWYG editor button and the plain text editor button
+ * to get the start and end tag for the footnotes
+ * echos the tags as json-string ("start" | "end")
+ */
+function footnotes_wysiwyg_ajax_callback() {
+    require_once(dirname(__FILE__) . '/../includes/defines.php');
+    require_once(dirname(__FILE__) . '/../includes/plugin-settings.php');
+
+    /* load footnote settings */
+    $g_arr_FootnotesSettings = footnotes_filter_options(FOOTNOTE_SETTINGS_CONTAINER, Class_FootnotesSettings::$a_arr_Default_Settings, false);
+
+    /* get footnote starting tag */
+    $l_str_StartingTag = $g_arr_FootnotesSettings[FOOTNOTE_INPUTFIELD_PLACEHOLDER_START];
+    /*get footnote ending tag */
+    $l_str_EndingTag = $g_arr_FootnotesSettings[FOOTNOTE_INPUTFIELD_PLACEHOLDER_END];
+
+    if ($l_str_StartingTag == "userdefined" || $l_str_EndingTag == "userdefined") {
+        /* get user defined footnote starting tag */
+        $l_str_StartingTag = $g_arr_FootnotesSettings[FOOTNOTE_INPUTFIELD_PLACEHOLDER_START_USERDEFINED];
+        /*get user defined footnote ending tag */
+        $l_str_EndingTag = $g_arr_FootnotesSettings[FOOTNOTE_INPUTFIELD_PLACEHOLDER_END_USERDEFINED];
+    }
+
+    echo json_encode(array("start" => $l_str_StartingTag, "end" => $l_str_EndingTag));
+    exit;
+}

index.php

@@ -47,6 +47,8 @@ require_once(dirname(__FILE__) . "/includes/scripts.php");
 /* include script and stylesheet functions */
 require_once(dirname(__FILE__) . "/includes/convert.php");
 /* include script and stylesheet functions */
+require_once(dirname(__FILE__) . "/includes/wysiwyg-editor.php");
+/* include script and stylesheet functions */
 require_once(dirname(__FILE__) . "/includes/replacer.php");
 
 /* require plugin class */
@@ -62,6 +64,25 @@ footnotes_RegisterReplacementFunctions();
 /* adds javascript and stylesheets to the public page */
 add_action('wp_enqueue_scripts', 'footnotes_add_public_stylesheet');
 
+/* defines the callback function for the editor buttons */
+add_action('wp_ajax_nopriv_footnotes_getTags', 'footnotes_wysiwyg_ajax_callback' );
+add_action('wp_ajax_footnotes_getTags', 'footnotes_wysiwyg_ajax_callback' );
+/* add new button to the WYSIWYG - editor */
+add_filter('mce_buttons', 'footnotes_wysiwyg_editor_functions');
+add_filter( "mce_external_plugins", "footnotes_wysiwyg_editor_buttons" );
+/* add new button to the plain text editor */
+add_action( 'admin_print_footer_scripts', 'footnotes_text_editor_buttons' );
+
+/* action to locate language and load the wordpress-specific language file */
+add_action('plugins_loaded', 'footnotes_load_language');
+
+/* add link to the settings page in plugin main page */
+$l_str_plugin_file = FOOTNOTES_PLUGIN_DIR_NAME . '/index.php';
+add_filter("plugin_action_links_{$l_str_plugin_file}", 'footnotes_plugin_settings_link', 10, 2);
+
+/* register footnotes widget */
+add_action('widgets_init', create_function('', 'return register_widget("Class_FootnotesWidget");'));
+
 /* only admin is allowed to execute the plugin settings */
 if (!function_exists('is_admin')) {
     header('Status: 403 Forbidden');
@@ -76,17 +97,6 @@ register_deactivation_hook(__FILE__, array('Class_Footnotes', 'deactivate'));
 /* register hook for uninstalling the plugin */
 register_uninstall_hook(__FILE__, array('Class_Footnotes', 'uninstall'));
 
-
-/* action to locate language and load the wordpress-specific language file */
-add_action('plugins_loaded', 'footnotes_load_language');
-
-/* add link to the settings page in plugin main page */
-$l_str_plugin_file = FOOTNOTES_PLUGIN_DIR_NAME . '/index.php';
-add_filter("plugin_action_links_{$l_str_plugin_file}", 'footnotes_plugin_settings_link', 10, 2);
-
-/* register footnotes widget */
-add_action('widgets_init', create_function('', 'return register_widget("Class_FootnotesWidget");'));
-
 /* initialize an object of the plugin class */
 global $g_obj_FootnotesPlugin;
 

js/wysiwyg-editor.js

@@ -0,0 +1,76 @@
+/**
+ * Created by Stefan on 24.05.14.
+ */
+
+(function() {
+    tinymce.create('tinymce.plugins.Footnotes', {
+        /**
+         * Initializes the plugin, this will be executed after the plugin has been created.
+         * This call is done before the editor instance has finished it's initialization so use the onInit event
+         * of the editor instance to intercept that event.
+         *
+         * @param {tinymce.Editor} ed Editor instance that the plugin is initialized in.
+         * @param {string} url Absolute URL to where the plugin is located.
+         */
+        init : function(ed, url) {
+            ed.addButton('footnotes', {
+                title : 'Footnotes',
+                cmd : 'footnotes'
+                //image : url + '/dropcap.jpg' TODO: add icon here
+            });
+
+            ed.addCommand('footnotes', function() {
+                jQuery.ajax({
+                    type: 'POST',
+                    url: '/wp-admin/admin-ajax.php',
+                    data: {
+                        action: 'footnotes_getTags',
+                        data: ''
+                    },
+                    success: function(data, textStatus, XMLHttpRequest){
+                        var l_arr_Tags = JSON.parse(data);
+                        var return_text = l_arr_Tags['start'] + ed.selection.getContent() + l_arr_Tags['end'];
+                        console.log(return_text);
+                        ed.execCommand('mceInsertContent', 0, return_text);
+                    },
+                    error: function(MLHttpRequest, textStatus, errorThrown){
+                        console.log("Error: " + errorThrown);
+                    }
+                });
+            });
+        },
+
+        /**
+         * Creates control instances based in the incomming name. This method is normally not
+         * needed since the addButton method of the tinymce.Editor class is a more easy way of adding buttons
+         * but you sometimes need to create more complex controls like listboxes, split buttons etc then this
+         * method can be used to create those.
+         *
+         * @param {String} n Name of the control to create.
+         * @param {tinymce.ControlManager} cm Control manager to use inorder to create new control.
+         * @return {tinymce.ui.Control} New control instance or null if no control was created.
+         */
+        createControl : function(n, cm) {
+            return null;
+        },
+
+        /**
+         * Returns information about the plugin as a name/value array.
+         * The current keys are longname, author, authorurl, infourl and version.
+         *
+         * @return {Object} Name/value array containing information about the plugin.
+         */
+        getInfo : function() {
+            return {
+                longname : 'Insert Footnotes tag',
+                author : 'media competence institute',
+                authorurl : 'http://cheret.co.uk/mci',
+                infourl : 'http://wordpress.org/plugins/footnotes/',
+                version : "1.1.2"
+            };
+        }
+    });
+
+    // Register plugin
+    tinymce.PluginManager.add( 'footnotes', tinymce.plugins.Footnotes );
+})();

readme.txt

@@ -46,6 +46,7 @@ No, this Plugin has been written from scratch. Of course some inspirations on ho
 - Add: Pre defined footnote short codes and possibility for a user defined short code
 - Add: Plugin Widget to define where the reference container shall appear when set to "widget area"
 - Update: Translation for new settings and for the Widget description
+- Add: New button in the WYSIWYG editor and in the plain text editor to easily implement the footnotes tag (icon for WYSIWYG-button missing!!!)
 
 = 1.1.1 =
 - Feature: Short code to not display the 'love me' slug on specific pages ( short code = [[no footnotes: love]] )