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
Swerv3
Mon, 08/08/2016 - 00:43
Permalink
WYSIWYG Modifications
Hi,
Is there a list of all the builtin tags that can be added using this method somewhere?
Thanks.
fnoks
Mon, 08/08/2016 - 10:24
Permalink
Tags
Here we go:
Source: https://github.com/h5p/h5p-editor-php-library/blob/master/scripts/h5peditor-html.js
Swerv3
Tue, 08/30/2016 - 01:33
Permalink
Thank you!
Sorry for the late reply, thank you for the list :)
JRDingwall
Fri, 10/20/2017 - 22:38
Permalink
Partial Success
First, thank-you very much to the developers that reply on this forum. With the guides provided I was able to add superscript and subscript to the accordion editor! I was thrilled with the success. However, when I try to implement other items on this list it does not appear to work. I am using the wordpress plug-in, and the h5p mods plug-in to make the edits. I just tried the "u" tag to try to get underlining as an option, but the button does not appear. The sub and sup buttons do appear though.
Any ideas as to why? Some of the other tags seemed to break my wordpress site all together as well.
icc
Tue, 10/24/2017 - 13:06
Permalink
Could you post your code? To
Could you post your code? To add underline to all of the "advanced" text fields you could do something like this:
JRDingwall
Thu, 10/26/2017 - 17:15
Permalink
code I used in H5P mods plug-in
I thought I would post the whole bit of code I added to the H5Pmods plug-in in case there's something I messed up there. I'm a super novice when it comes to PHP and I've just been using these forums to learn and then try it out on my WP install of H5P. Both "sub" and "sup" are working as I mentioned, but I'm trying to get underline and "insert image" working currently.
I also just tried dropping in the code you provided above but "underline" still does not exist. I copied the code above overtop of the part:
Thank-you, mymods h5p semantics alter code below:
icc
Wed, 10/25/2017 - 09:23
Permalink
No worries, I fixed the
No worries, I fixed the markup.
If you look at it you'll see that the u and the img isn't highlighted in green. This is because you're using the wrong type of quotation mark(apostrophe), you should be using ' but you're using ‘
It's a silly mistake, I know, but PHP is very sensitive to this stuff.
To avoid this kind of mistakes you could use a smart text editor like Atom with the linter-php package/plugin, and it will tell you about them.
CosmicLove
Fri, 12/24/2021 - 04:02
Permalink
Hi JRDingwall, (or any H5P
Hi JRDingwall, (or any H5P user who was able to implement successfully this code in Wordpress)
It's been over 4 years since u opened this thread, but here I am wanting badly any assistance I could get from anyone who's been successful at adding these buttons to the editor.
Like you, I use Wordpress and the native H5p editor.
I read and implemented dozens of times the instructions provided by the developers (hi guys!), but to no avail. Copied / Twisted the code but I can see nothing in the editor, whether it's the MultipleChoice library or the AdvancedText Library for compound content types (I'm using Question set content type, so I guess the AdvancedText library is the one to use (?))
From your answers, it looks like you were able to figure it out eventually. If this isn't too much of a burden, would you mind walking me through your code from the very first steps?
I'm hoping that I'd get more lucky getting helped directly from H5p users themselves, especially those who where once at the stage I'm at now.
If you could please be specific as to where you posted the code (I'm now using the "snippet" plugin to insert this custom php code but still no luck), and what code exactly you have in there, I will be eternally grateful.
Again, I know this thread if 4 years old, but i'm taking that chance. Hope to get an answer from you or anyone willing to assist me.
TIA
siddharth013
Thu, 10/15/2020 - 09:22
Permalink
Enable these tags in Moodle
Hello
I want to enable all the tags in Moodle H5P text editor but can not understand where to make the changes. Currently, if I am using the text editor of the H5P, there are no options in the text editor for adding table or the HTML code view. How they can be enabled?
Thanks in advance
Anjelo
Sun, 02/12/2017 - 08:01
Permalink
Hi, may I kindly ask for a more simpler
Hi, may I kindly ask for a more simpler instructions on how to do this? I am not much into drupal and I think it will also be beneficial to those who have slim knowledge on drupal and in need of this. Thanks.
icc
Mon, 02/13/2017 - 09:46
Permalink
I'm not really sure how to
I'm not really sure how to make them simpler. Which part are you struggling with?
If you are very unfamiliar with Drupal I would suggest some of the material available on module development over at Drupal.org, e.g. Creating custom modules.
DuncanH
Sun, 04/16/2017 - 18:11
Permalink
Is there any difference in
Is there any difference in the code for adding this to moodle?
tomaj
Tue, 04/18/2017 - 09:44
Permalink
Yes
Yes, there are some flavor differences between the different systems, but you can do the same things. Have you looked at the Moodle Customization page?
- Tom
siddharth013
Thu, 10/15/2020 - 09:10
Permalink
Enable HTML code view
Hello
I studied this document but there I could not find the solution of my requirement. In the default editor, I want to enable some options which I believe are disabled by the default H5P, like insert table and the HTML code view. Is there a direct way by which I can enable all those options in my H5P text type?
sanderaido
Wed, 07/05/2017 - 13:56
Permalink
Problem adding custom plugin
Hi!
For some reason the last section of this tutorial is not working for me. I can successfully add the existing table functionality but when I try to add a custom CKEditor plugin (eqneditor) I get stuck. It seems the last hook is not even fired (mymodule_h5p_content_node_form_after_build). Even this small function will not output anything to the console (h5p_ck_math is my module name):
Has there been a change in this hook? I can see it in the H5PEditor API but can't seem to run it.
Thank you!
icc
Fri, 07/07/2017 - 09:44
Permalink
Indeed, something is a miss
Indeed, something is a miss here – this isn't a hook but rather a callback that needs to be registered on a form, the following should make it work:
sanderaido
Fri, 07/07/2017 - 14:56
Permalink
Thank you for the fast reply
Thank you for the fast reply!
I am indeed now able to add my script in the iframe but unfortunately it seems to be added before H5P's own scripts (which makes H5P (and H5P.jQuery) undefined in the script under step 6). In the iframe's head it is placed after h5p's styles and before h5p's own scripts.
I also needed to add base_path() to extraplugins.js location otherwise it was relative and not found.
How can I make sure my scripts are added after H5P's own scripts?
Cheers!
icc
Fri, 07/07/2017 - 15:13
Permalink
Hm, I believe the drupal_add
Hm, I believe the drupal_add_js() function offers a weight option that can be used.
Other options are to change the weight of the module in Drupal's system table or to rename the module so that it appears after "h5p" when ordered.
icc
Fri, 07/07/2017 - 09:47
Permalink
I updated the example. Thank
I updated the example. Thank you for point out the mistake.
Darren Oh
Wed, 07/19/2017 - 21:35
Permalink
Further correction and simplification
This works for me:
BV52
Wed, 07/19/2017 - 06:52
Permalink
Thank you
Thanks for the tip Darren Oh.
-BV52
phaqlancs
Tue, 08/15/2017 - 12:37
Permalink
Adding custom JS in H5p Editor Iframe in Wordpress
I am struggling with the last part adapting the custom js to wordpress. How can I add my custiom CK plugin JS to the H5P backend editor iframe (and why is that an iframe at all!!!)?
I guess i need to call this somewhore, but since this is already javascript, it needs to be called at all in the backend. Is there a hook in WP for this? Where ios the right place for this call?
H5PEditor.assets.js.push(
'/wp-content/plugins/mymods/extraplugins.js'
);
thomasmars
Wed, 08/16/2017 - 11:03
Permalink
To add custom js to H5P in
To add custom js to H5P in wordpress use the "h5pmods_alter_scripts" hook. You can see an example and extend it from https://github.com/h5p/h5pmods-wordpress-plugin.
THREEPWOOD
Wed, 05/30/2018 - 13:50
Permalink
replacing js files
Hey Thomas!
I'm trying to replace some js files (like the h5p-action.bar.js) with this hook, but it's not working..
Could you help me please? I've posted the question here in the forum.
Thank you!!
soric
Tue, 10/17/2017 - 17:10
Permalink
External plugin isn't working
Hello, I've followed this guide and tried to add 'sourcearea' plugin. Unfortunately it's not working for me, even though the plugin seems to be loading just fine. Could you please point me what am I doing wrong? Here is the code
sanderaido
Wed, 10/18/2017 - 14:12
Permalink
Hi!The guide is indeed a
Hi!
The guide is indeed a little vague about this part, I also struggled with this a while ago before finding the logic behind it in the H5P source code. The
H5PEditor.HtmlAddons.text.sourcedialog =
function
(config) {}
line actually refers to the allowed tags of any field. So it only runs the function if it finds the "sourcedialog" tag in your fields tags array. For example I added a math editor to my CKEditor with this config:I'm not actually sure about the "double" eqneditor.eqneditor necessity, I just used it this way and it worked. Maybe someone can clarify this more and change the docs too, since this is clearly not explained clearly enough.
I also added the "eqneditor" tag with the h5p_semantics_alter function to any field I wanted to have my extra plugin.
Hope this clears it up a little.
soric
Wed, 10/18/2017 - 18:04
Permalink
Thanks for the reply
Thanks for the reply!
It was really helpful, but unfortunately the source button still doesn't appear. In fact it's loading properly, adding to config.extraPlugins and toolbar, but not appearing in toolbar.
Here is the code:
thomasmars
Thu, 10/19/2017 - 17:02
Permalink
Hi, thanks for reporting this
Hi, thanks for reporting this.
I tried following the guide myself and found a few faults:
That is MultiChoice with a capitalized "C".
That is $library_name must be passed in as the second argument.
Sorry about this, I have fixed the mentioned issues in the documentation now.
If all your files are loading properly there may be something wrong with the object you are pushing on the toolbar. You should do some googling to make sure you are using the correct "name", "items" and potentially "group".
You can find a working example of adding sourcedialog at https://github.com/thomasmars/h5p-add-source
thomasmars
Thu, 10/19/2017 - 17:11
Permalink
We would greatly appreciate
We would greatly appreciate it if you want to contribute some documentation for how we can improve this guide :)
soric
Thu, 10/19/2017 - 17:55
Permalink
Thanks Thomas
Thanks for the reply and the code provided. With a fix for plugin location path it works good. But unfortunately It does work for H5P.MultiChoice, but not for H5P.CoursePresentation, that was the reason my code didn't work.
soric
Mon, 10/23/2017 - 14:34
Permalink
It works!
Finally got how to make it working. Check here for more info
thomasmars
Tue, 10/24/2017 - 10:12
Permalink
I'm happy you got it working.
I'm happy you got it working. If you want to help others who may be struggling with this guide we would love to hear concrete suggestions for how the documentations could be improved.
soric
Wed, 10/25/2017 - 14:22
Permalink
Sure, first of all to prevent
Sure, first of all to prevent confusion it would be great to add some explanation of attaching new CKEditor plugins, such as:
Also there is one more quick question from my side. I've added style tag, and it works just fine, but when I add inline styles via html source edit, most of those are getting filtered out on submission. It looks like not a CKEditor config, but I'm not quite sure for now.
thomasmars
Tue, 10/31/2017 - 14:41
Permalink
Thank you for the suggestions
Thank you for the suggestions, I have made some minor improvements now.
For your styles tag issue, the style tag is likely being filtered away, because it is not allowed by default. To enable the style tag (and any other tag you would want) you have to add it to the $field->tags array, just like you did with your plugin tag in semantics_alter.
sanderaido
Thu, 10/19/2017 - 17:32
Permalink
It may also be the fault of
It may also be the fault of this line in your code, @soric
It may be that this line is not necessary at all, maybe you can just use
But I haven't tested this fully so I can't really comment on exactly why my double element worked.
papi Jo
Sun, 01/21/2018 - 16:12
Permalink
Not working in Drupal 7?
Hi there,
I am struggling with adding buttons to the text editor toolbar to some H5P contents on my local Drupal 7 site. I think the instructions given above would be much clearer if they were given on 2 separate pages, one dealing with Drupal and the other one dealing with Wordpress!
I have successfully created a new module in Drupal, and it does work for Visual Changes (CSS overrides). But I cannot get it to work for the toobar buttons.
I have followed the example provided for the Multiple Choice library (H5P.MultiChoice). I have copied-pasted the
function mymods_h5p_semantics_alter(&$semantics, $library_name = NULL) { // Check if this is the multichoice question type. if ($library_name !== 'H5P.MultiChoice') {etc.
function in my new module... but it does not work.
I am puzzled by this intruction: "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:" etc.
Is that for Drupal OR WordPress, and how and where do you put that script?
"Or if you're in Drupal you can add it through a hook which runs after the form has been built:"WHERE (in which file) do you add those lines?
Yours confused,papi Jo
sanderaido
Mon, 01/22/2018 - 12:17
Permalink
You put that code in your own
You put that code in your own module files, but you have to replace the "mymods" part in hooks with your own module name (module's folder name).
papi Jo
Mon, 01/22/2018 - 16:27
Permalink
Thanks sanderaido!
Just my mistake. Thanks for your correction. It's working now.
rleroux
Tue, 03/13/2018 - 18:54
Permalink
Add img tag to the Text Editor Drupal 7
Hello,
First of all, thanks for this very nice module.
I am a newbie and I want to add the <img> icon to the Ckeditor bar for the Text insert in Image hotspots. I would like to know what I have to change in the PHP code in point 4 above in order to do that.
Thank you!
Robert
thomasmars
Thu, 03/15/2018 - 14:14
Permalink
Hi, what have you tried so
Hi, what have you tried so far and what error messages did you get ?
Have you tried adding 'img' to the array of tags that is allowed ?
rleroux
Fri, 03/16/2018 - 17:10
Permalink
Here's what I did
Thanks for your reply.
I wrote a module with the code given at point 4 above.
function
mymods_h5p_semantics_alter with my module name (h5p_img_h5p_semantics_alter) on both instances.
if
(
$library_name
!==
'H5P.MultiChoice'
) with
if
(
$library_name
!==
'H5P.ImageHotspots'
)
$field->tags = array_merge($field->tags, array(
'table',
'thead',
'tfoot',
'tbody',
'tr',
'th',
'td',
'img'
Activated the module, cleared all caches, and no change, the img icon does not appear in the text field in the Popup content items.
thomasmars
Mon, 03/19/2018 - 15:31
Permalink
Hi,From the build-config.js
Hi,
From the build-config.js you can see which plugins are bundled with CKEditor by default. The 'Image' plugin is not one of them, this is why it is not showing up. If you want to add the image plugin you need to add it as an additional source, you can see examples of this from others in the comment field.
The rest of the code looks good, you can test that it works by changing 'img' with 'table', as that is one of the plugins that we have bundled by default.
- Thomas
Janek
Thu, 06/14/2018 - 12:56
Permalink
Build-config changes do not work
Hi Thomas,
Would it also be possible to add images to the Course Presentation - Advanced Text editor? I've tried to modify build-config.js and upload the CKEditor image plugin, but it won't work (even tried to modify the CKEditor itself in a testing enviroment). The modifications in the text editor for table (subscript, superscript and more...) are working, but I can't seem to be able to add an image button.
We would love to be able to make a button in Course Presentation where the student could find more information (text and image) about the subject. Would you advice me to make a custom library and add this to the Course Presentation library options, or do you have other suggestions?
Thank you
Janek
thomasmars
Fri, 06/15/2018 - 11:45
Permalink
Hi, I have not tried this
Hi, I have not tried this myself, so I don't know what complications you might meet.
A good place to start would be to check if the image is saved in the H5P parameters for the database, and what comes in to filterParameters(), in H5P core, and what comes out of it to debug where the image widget in CKEditor is failing.
Good luck, Thomas
meravjon
Sat, 12/08/2018 - 10:35
Permalink
adding buttons to the editor and user
Hi
I've been struggling for more than a year trying to create a custom toolbar. Can you refer me to someone who can help? A programmer who knows and will be able to produce a customized plugin? The site is built on WordPress.
I've used this for a while but now it's no longer warking. When I upload content it's stuck:
function mymods_h5p_semantics_alter(&$semantics, $content_type, $major_version, $minor_version) {
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); // Check 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 wysiwyg/CKEditor field. Add sub/sup buttons.
if (!isset($field->tags)) {
$field->tags = array();
}
if (!in_array('sub', $field->tags)) {
$field->tags[] = 'sub';
}
if (!in_array('sup', $field->tags)) {
$field->tags[] = 'sup';
}
}
}
}
add_action('h5p_alter_library_semantics', 'mymods_h5p_semantics_alter');
skshed
Fri, 02/08/2019 - 12:35
Permalink
Help needed please. I can
Help needed please. I can add buttons in Drupal easily enough if they are tags, but I would really like to add font size and color. Does anyone know the syntax for this please? I have tried adding them in the list and also changing "tags" to "fonts" but still no luck. Any help appreciated.
Pasupathi Ganesan
Fri, 02/15/2019 - 05:52
Permalink
Not working in Drupal 8
Hi,
I have created a new module in the name of h5padvance and added below code to include image inserting option in the text content item of popup content in Image hotspot content type. Since the image tag is not available in default tags as per your comment earlier, I am adding the image as an external plugin.
But still not able to get the image inserting option available in the text box.
Check this image for more details.
Is there something I missed in the process?
Code as below.
Created a module called h5padvance and enabled it.
Downloaded CKEditor image plugin from https://ckeditor.com/cke4/addon/image and kept it inside /modules/custom/h5padvance/plugins/image
modules/custom/h5padvance/h5padvance.module code as below.
modules/custom/h5padvance/js/custom.js code as below.
Please let me know if i am missing any trick inside.
Pasupathi Ganesan
Thu, 02/14/2019 - 11:29
Permalink
Is it possible to add attributes to popup content items.
This is for Image Hotspot Content type in Drupal 8.
Is it possible to add attributes to popup content items? For example, I have multiple images inside a hotspot popup, Currently, I am seeing both the images will have the same attributes. If I want to apply CSS properties to one of the images, It's not possible now. since all the similar type of content items are having the same attributes.
Please advise me how should I play around with the theming part of hotspot overlay contents. Particularly if multiple contents available of the same type.
Developer123
Fri, 05/10/2019 - 10:41
Permalink
How to add PPT button in H5p editor
How to add PPT button in H5p editor
Developer123
Fri, 05/10/2019 - 10:44
Permalink
How to add PPT button in H5p editor
Add PPT button H5P editor within moodle
Pages