WYSIWYG Text Editor Buttons

Please note that when you're adding custom buttons on your site, other people might have issues downloading the content and using it on their site. This is because the custom HTML you allow on your site might not be allowed on theirs, i.e. it is stripped away for security reasons.

Let's say we want to add a button for inserting tables into the multichoice question type.

1. We need a place in the CMS where we can put our custom code. This could be a plugin, module or theme. Modifying the H5P code is discouraged as you'll have issues upgrading and maintaining your patch. We recommend putting the code in a separate "mods" module or plugin, where you keep all the custom code for your CMS.
2. See your CMS's documentation on how to create and set up a simple module or plugin, and activating it without any errors.
3. Implement the "hook" that will modify the semantics of the content types.
   In Drupal this is done by naming convention, like so:
   

   function mymods_h5p_semantics_alter(&$semantics) {
     // Code that alters semantics goes here.
   }

   Remember that in Drupal you have to clear the cache before the function starts working.
   On WordPress, you can add the same function, but you'll have to register it as an action listener:
   

   function mymods_h5p_semantics_alter(&$semantics) {
     // Code that alters semantics goes here.
   }
   add_action('h5p_alter_library_semantics', 'mymods_h5p_semantics_alter');

4. Inside the function, we need to look for text fields that use the html editor:
   Observe that this example only changes semantics for the Multiple Choice library (H5P.MultiChoice). If you want to change texts for compound content types (content types that uses other libraries within itself) such as H5P.CoursePresentation be aware that if you want to change the text interaction that is used inside H5P.CoursePresentation, you should make sure that you actually alter H5P.AdvancedText library, which is the text library used inside H5P.CoursePresentation, and not actually the H5P.CoursePresentation library. This is valid for all compound libraries.
   

   function mymods_h5p_semantics_alter(&$semantics, $library_name = NULL) {
     // Check if this is the multichoice question type.
     if ($library_name !== 'H5P.MultiChoice') {
       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.
         if (!isset($field->tags)) {
           $field->tags = array();
         }
         $field->tags = array_merge($field->tags, array(
           'table',
           'thead',
           'tfoot',
           'tbody',
           'tr',
           'th',
           'td'
         ));
       }
     }
   }

5. Now if you open up your H5P editor and select the multichoice question type, you should be able to insert tables! 
   
   Are you using a custom plugin? Then there's an additional step you'll have to take. This is because the table plugin is already built into the editor and you simply have to declare the tags. With a custom plugin, you'll have to add the plugin to CKEditor's config as well.
   
   
6. You have to add a custom JS file that will add the extra plugin to the CKEditor config. This file might look something like this:
   

   (function ($) {
     $(document).ready(function () {
       if (!window.CKEDITOR) {
         return;
       }
   
       // Register our plugin
       CKEDITOR.plugins.addExternal('cooltext', '/wp-content/plugins/mymods/cooltext');
       H5PEditor.HtmlAddons = H5PEditor.HtmlAddons || {};
       H5PEditor.HtmlAddons.text = H5PEditor.HtmlAddons.text || {};
       H5PEditor.HtmlAddons.text.cool = function (config, tags) {
         // Add the plugin.
         config.extraPlugins = (config.extraPlugins ? ',' : '') + 'cooltext';
   
         // Add plugin to toolbar.
         config.toolbar.push({
           name: "cooltext",
           items: ['CooltextButton']
         });
   
         // Add our special tag
         tags.push('cooltext');
       };
     });
   })(H5P.jQuery);

   
   And in order for this file to load inside the H5P editor's iframe it has to be registered like this:
   

   H5PEditor.assets.js.push('/wp-content/plugins/mymods/extraplugins.js');

   
   Or if you're in Drupal you can add it through a hook which runs after the form has been built:
   

   function mymods_form_h5p_content_node_form_alter(&$form, &$form_state) {
     $form['#after_build'][] = 'mymods_h5p_content_node_form_after_build';
   }
   
   function mymods_h5p_content_node_form_after_build($form, &$form_state) {
     $settings = array(
       'cooltextPath' => base_path() . drupal_get_path('module', 'mymods') . '/cooltext/',
       'h5peditor' => array(
         'assets' => array(
           'js' => array(
             drupal_get_path('module', 'mymods') . '/extraplugins.js'
           )
         ),
       ),
     );
     drupal_add_js($settings, 'setting');
     return $form;
   }

NB: Be sure to add the newly created field tag to semantics_alter, in order to allow it:

$field->tags = array_merge($field->tags, array(
	'table',
	'thead',
	'tfoot',
	'tbody',
	'tr',
	'th',
	'td',
	'text'
));

Code Snippets

Some plugins such as inline code and code snippets are already present and supported but have been disabled by default due to very specific use cases. To enable these plugins you need only load the following JavaScript:

H5PIntegration.editor.wysiwygButtons = ['inlineCode', 'codeSnippet'];