WYSIWYG Text Editor Buttons
In this short guide, we'll go through the process of adding extra buttons to the WYSIWYG text editor. This can be useful if you wish to allow a custom plugin in the text editor, or if you simply wish to add a formula editor.
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.
- 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.
- See your CMS's documentation on how to create and set up a simple module or plugin, and activating it without any errors.
- 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');
- 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' )); } } }
- 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. - 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'];
Comments
Developer123
Fri, 05/10/2019 - 10:44
Permalink
How to add PPT button in H5p editor
Add PPT button H5P editor within moodle
xurija@fast-ema...
Thu, 07/18/2019 - 12:19
Permalink
Not working on Wordpress
I have added steps from 1 to 4 into h5p.php in a plugin directory, but table or any other buttons did not appeared on a Multiple choice question Ckeditor.
The end results needed is a base64 image upload or actual image upload.
Any suggestion or advice would be very helpful
derickarts
Fri, 01/24/2020 - 19:57
Permalink
Editing h5p text editor
Hi developers is there a video tutorial on youtube on how to edit or replace the text editor, the fault seems limited a little bit
siddharth013
Wed, 10/14/2020 - 13:40
Permalink
Apply WYSIWYG in Moodle
I want to apply these features in Moodle H5P Plugin, but for that could not find any guidelines that shows where to make changes.
I got the guidelines showing the theme changing, but the only change I want to make is update my text editor and nothing in the theme.
Alvaromuda
Thu, 12/15/2022 - 12:49
Permalink
Any updates? Where you able
Any updates? Where you able to do it?
oscar_rockalingua
Fri, 04/16/2021 - 08:37
Permalink
Invoking the hook from inside itself?
Hi,
Not a super expert on Drupal so I might be missing something obvious, but I don't understand why you call this from inside the hook:
Mariko Owens
Fri, 07/30/2021 - 08:23
Permalink
CKeditor
Is there a way to customize ckeditor inside h5p course presenation when you click text ckeditor appears
Mariko Owens
Fri, 07/30/2021 - 08:36
Permalink
add style to CKEditor
is there a way to customize CKEditor on h5p course presentation when u click the text button a field with CKEditor appears i wanna customize that editor is there a way ?
shruticb
Thu, 11/11/2021 - 11:43
Permalink
h5p editor toolbar
Want to add few more buttons in h5p editor (toolbar) for drupal 8. can you tell exact filename and path shall we add code?
mjwareha
Thu, 02/03/2022 - 15:30
Permalink
Going round in circles!
I've been trying to run through this and not getting very far!
I'm using Wordpress and I alreay have a Mods Plugin that I use for CSS tweaks.
My ambition is to add tables to the Fill the Blanks content type, but first I'm just trying to follow these instructions.
I'm not sure if the javascript bit applies to me. It says 'Are you using a custom plugin?', but I don't know if that is more than just the mods plugin I'm already using for CSS or something else, it's not clear! Do I need to do the Javascript bit or should the PHP in the mods plugin I've created work just fine?
jofori
Tue, 10/25/2022 - 12:22
Permalink
Test H5P.MultiChoice HTML button sample code broken
Hi Everyone,
testing the above code on just the MultiChoice Widget (not embedded in anything else like presentation)
I am using 'Code Snippets' plugin to add my code.
I just tried the code above with no modifications in WordPress 6.0.3 and it fails - It only works if I comment out the return value;
In essence it cannot identify the $library_name 'H5P.MultiChoice'
H5P Developers: Can some please explain what could be wrong, this should work as is.. What has changed?
Kind Regards.
Pages