You are here

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:

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.

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:

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.

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:

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.

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.

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):

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.

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

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.

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

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.

Sure, first of all to prevent confusion it would be great to add some explanation of attaching new CKEditor plugins, such as:

The requirement of adding plugintag in semantics_alter in order to allow js interaction

The explenation of libraries dependencies (as for example modifying AdvancedText in order to affect CoursePresentation wasn't really obvious for me at first)

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.

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.

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 thefunction 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?

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.

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.

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?

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

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:

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.

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.

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.