Adding an Editor Button for Easy Footnotes

Origin Story

I saw Alan’s post this morning about footnotes in SPLOTs. He mentioned adding buttons to the WYSIWYG editor to help use Easy Footnotes . . . more easily . . . because, like me, he often forgets the shortcode structures.

I figured I’d better get it made fast before Gutenberg renders all my current knowledge obsolete. Additionally, I like to try to pay Alan back for all the work he’s helped me with over the years. So here’s a plugin that should behave fairly well assuming you have Easy Footnotes installed and active.

PHP Land

A bit of scanning led me to this tutorial and from there we were off. This is mostly just enqueueing various scripts and pretty much copy/paste. I’m not currently doing anything with the admin CSS but likely will in the near future.

//adds css for admin
function load_custom_wp_admin_style() {
        wp_register_style( 'fnbutton_wp_admin_css', plugin_dir_url( __FILE__) . 'css/fnbutton-main.css', false, '1.0.0' );
        wp_enqueue_style( 'fnbutton_wp_admin_css' );
}
add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' );

// hooks your functions into the correct filters
function fnbutton_add_mce_button() {
            // check user permissions
            if ( !current_user_can( 'edit_posts' ) &&  !current_user_can( 'edit_pages' ) ) {
                       return;
               }
           // check if WYSIWYG is enabled
           if ( 'true' == get_user_option( 'rich_editing' ) ) {
               add_filter( 'mce_external_plugins', 'fnbutton_add_tinymce_plugin' );
               add_filter( 'mce_buttons', 'fnbutton_register_mce_button' );
               }
}
add_action('admin_head', 'fnbutton_add_mce_button');

// register new button in the editor
function fnbutton_register_mce_button( $buttons ) {
            array_push( $buttons, 'fnbutton_mce_button' );
            return $buttons;
}


// declare a script for the new button
// the script will insert the shortcode on the click event
function fnbutton_add_tinymce_plugin( $plugin_array ) {
          $plugin_array['fnbutton_mce_button'] = plugin_dir_url( __FILE__)  .'/js/fnbutton-main.js';
          return $plugin_array;
}

Javascript Land

The following JS builds the modal and assigns a tinymce editor to it. I’m debating whether that’s a good idea or not at this point. I can see some advantages to keeping bold and italic but maybe dropping everything else. You can see I’m using ?as the button text which might not be appreciated as the feet are very tiny and it is a very corny¹ joke.

This stuff feels closer to learning a templating language than programming to me. I didn’t really think much but it took me a while to mesh together the right patterns. I’ve annotated it a bit to help explain what things do.

(function() {
       tinymce.PluginManager.add('fnbutton_mce_button', function( editor, url ) {
           editor.addButton('fnbutton_mce_button', {
                       text: '?',//button text 
                       icon: false,//no icon currently
                       onclick: function() {
                         editor.windowManager.open({
                            title: 'Add Footnote',//header for modal
                            id: 'footnote-maker',
                            width: 550,
                            height: 220,
                            body: [{
                              type: 'textbox',
                              name: 'footnote',
                              label: '',//label seemed unnecessary
                              multiline : true,
                              minHeight: 150,
                            }],
                            onsubmit: function( e ) {
                              let foot = '[efn_note]' + tinyMCE.activeEditor.getContent() + '[/efn_note]';
                              editor.insertContent( foot );//set shortcodes and add content
                            }                           
                          });    
//attach the editor
                          tinymce.init({ 
                            selector: '#footnote-maker-body textarea', 
                            themes: 'modern', 
                            height: 200, 
                            forced_root_block : "" ,
                            toolbar: 'bold italic | alignleft alignright | bullist numlist outdent indent ',
                            menubar: false,
                            });                        
                      //forced_root_block : "" removes forced p elements
                      }
             });
       });
})();