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

 

 

 

 

 

 

icc's picture

Hm, it appears the documentation is lacking this step. It should be quite straightforward. Try adding this code to your h5pmods.php and you should see the script appear inside the iframe:

function h5pmods_admin_footer() {
  wp_add_inline_script('h5p-editor', 
"H5PIntegration.editor.assets.js.push('http://example.com/myscript.js');");
}
add_action('admin_footer', 'h5pmods_admin_footer');

Thanks!

Added that code and I can now see that the javascript file (extraplugins.js) is loaded. However, the source button hasn't shown up yet.

Could you confirm that I'm adding the correct field tag for the source area button here?

$field->tags = array_merge($field->tags, array(
        'table',
        'thead',
        'tfoot',
        'tbody',
        'tr',
        'th',
        'td',
        'div',
        'span',
    'p',
'sourcearea'
      ));
icc's picture

You should not need to add 'sourcearea' to the tags list, I don't believe that it needs any tags.

If you are having trouble loading the plugin, you could try adding it directly to the h5peditor-html.js file first (adding it to the toolbar there) to check that the plugin works.

I did everything the same and "extraplugins.js" file is loaded, but CKEditor plugin's file is not. I don't understand why? The path is absolute and just fine, I checked it many times.. All other tags on my list are working, but no Sourcearea button nor js...

Any suggestions?

was hard to find and I am happy to share it. I need to use CKEditor Sourcearea plugin in H5P Multichoice to add css classes in my questions (for the answer fields it would be the same of course).

Thanks to FJRonH5P I repeated the steps 1 - 5 and had also no luck at the beginning.

Because there is a bad trap in the Sourcearea plugin (downloaded from https://ckeditor.com/cke4/addon/sourcearea and for the appropriate CKEditor version) - be aware that in the sourcearea plugin.js the code is

if ( editor.ui.addButton ) { 
editor.ui.addButton( 'Source', { ...

so that in your extraplugins.js you will need to alter "sourcearea" to "Source" for items as well: 

config.toolbar.push({
      name: "sourcearea",
       items: ['Source']
      });

Besides of that I had to add "sourcearea" in the tags list of my function h5pmods_alter_semantics(..., otherwise the sourcecode button did not appear in my multichoice question (so step 1 seems to be okay).

For step 6 you need the code as from icc to embed your extraplugins.js. 

Thanks, guys - I hope that my hints may help other people struggling with that special issue.

Thanks for sharing guys , but i have a problem !

No problem to add "table" button but for source code it's not the same !
For the first step no problem. I take care of 'Source' in extraplugins.js

But after this step it's too blur for me...
"Besides of that I had to add "sourcearea" in the tags list of my function h5pmods_alter_semantics(..., otherwise the sourcecode button did not appear in my multichoice question (so step 1 seems to be okay)."
"For step 6 you need the code as from icc to embed your extraplugins.js."

I try to follow all the explinations but for the 2 last steps it's too hard for my level i don't understand what exactly i must do

Please could you share all the code i must insert in each file ?

Thanks for you help