Adding Source Button in Wordpress

Hi, 

I'm looking to add a plugin to the CKeditor for fill in the blank questions. I've followed these instructions: https://h5p.org/adding-text-editor-buttons but I'm not sure how to execute the final step. I'll try to explain every step I've taken so far, in case anyone else comes across this.

1. Created a file called h5p-mods.php with the following code:

<?php
/**
 * H5P Mods Plugin.
 *
 * Alters the way the H5P plugin works.
 *
 * @package   H5P
 * @author    Joubel <[email protected]>
 * @license   MIT
 * @link      http://joubel.com
 * @copyright 2015 Joubel
 *
 * @wordpress-plugin
 * Plugin Name:       H5P Mods
 * Plugin URI:        http://h5p.org/
 * Description:       Allows you to alter how the H5P plugin works.
 * Version:           0.0.1
 * Author:            Joubel
 * Author URI:        http://joubel.com
 * Text Domain:       h5pmods
 * License:           MIT
 * License URI:       http://opensource.org/licenses/MIT
 * Domain Path:       /languages
 * GitHub Plugin URI: https://github.com/h5p/h5pmods-wordpress-plugin
 */

// If this file is called directly, abort.
if (!defined('WPINC')) {
  die;
}


/**
 * Allows you to alter which stylesheets are loaded for H5P. This is
 * useful for adding your own custom styles or replacing existing once.
 *
 * In this example we're going add a custom script which keeps track of the
 * scoring for drag 'n drop tasks.
 *
 * @param object &styles List of stylesheets that will be loaded.
 * @param array $libraries The libraries which the styles belong to.
 * @param string $embed_type Possible values are: div, iframe, external, editor.
 */
function h5pmods_alter_styles(&$styles, $libraries, $embed_type) {
  $styles[] = (object) array(
    // Path can be relative to wp-content/uploads/h5p or absolute.
    'path' => 'https://www.staging3.stringkick.com/wp-content/plugins/h5p-mods/custom-h...',
    'version' => '?ver=1.3.7' // Cache buster
  );
}
add_action('h5p_alter_library_styles', 'h5pmods_alter_styles', 10, 3);


function mymods_h5p_semantics_alter(&$semantics, $library_name = NULL) {
  // Check if this is the fill in the blanks question type.
  if ($library_name !== 'H5P.Blanks') {
    return; // Nope, do not continue.
  }
  
  foreach ($semantics as $field) {
    // Go through list fields
    while ($field->type === 'list') {
      $field = $field->field;
    }
  
    // Go through group fields
    if ($field->type === 'group') {
      mymods_h5p_semantics_alter($field->fields, $library_name); // Check your function name!
      continue;
    }
  
    // Check to see if we have the correct type and widget
    if ($field->type === 'text' && isset($field->widget) && $field->widget === 'html') {
      // Found a field. Add support for table tags. And other HTML tags.
      if (!isset($field->tags)) {
        $field->tags = array();
      }
      $field->tags = array_merge($field->tags, array(
        'table',
        'thead',
        'tfoot',
        'tbody',
        'tr',
        'th',
        'td',
        'div',
        'span',
	'p',
'sourcearea'
      ));
    }
  }
}
add_action('h5p_alter_library_semantics', 'mymods_h5p_semantics_alter', 10, 2);

2. Added the file to wp-content/plugins/h5p-mods/

 At this point I had a tables button in the editor, great!

3. Next, I also wanted support for more HTML. So I went to Ckeditor.com and used the online builder to create a version of CkEditor with all the extra plugins I needed. Most importantly, the source dialog plugin: https://ckeditor.com/cke4/addon/sourcearea

4. Replaced the ‘ckeditor’ folder in wp-content/plugins/h5p/h5p-editor-php-library with the one I downloaded from ckeditor.com

 5. Next, as far as I understood, I need to add the extra plugin to the CKEditor config. So, I a file called extraplugins.js and placed it in wp-content/plugins/h5p-mods/

The file contains the following code.

(function ($) {

  $(document).ready(function () {

    if (!window.CKEDITOR) {

      return;

    }

 

    // Register our plugin

    CKEDITOR.plugins.addExternal('sourcearea', '/wp-content/plugins/h5p/h5p-editor-php-library/ckeditor/plugins/sourcearea/plugin.js');

    H5PEditor.HtmlAddons = H5PEditor.HtmlAddons || {};

    H5PEditor.HtmlAddons.sourcearea = H5PEditor.HtmlAddons.text || {};

    H5PEditor.HtmlAddons.sourcearea.sourcearea = function (config, tags) {

      // Add the plugin.

      config.extraPlugins = (config.extraPlugins ? ',' : '') + 'sourcearea';

 

      // Add plugin to toolbar.

      config.toolbar.push({

        name: "sourcearea",

        items: ['sourcearea']

      });

 

      // Add our special tag

      tags.push('sourcearea');

    };

  });

})(H5P.jQuery);

6. I hope I’ve done everything correct so far. It’s the next step that I’m really unsure about. The extraplugins.js file needs to be loaded inside the H5P editor’s iframe.

 If I understand correctly, I need to use this code:

H5PEditor.assets.js.push('https://www.staging3.stringkick.com/wp-content/plugins/h5p-mods/extraplu...');

And I’d need to use the  "h5pmods_alter_scripts" hook. 

However, I’m really not sure how to do it. Hope someone could point me in the right direction.

Thanks, Freek