Add customization to CKEditor for specific H5P plugin

Hey everyone,

we´re using the h5p-php-editor & h5p-php-library on a not official supported platform. I would like to override the CKEditor configuration to allow more html elements and add some new buttons to the toolbar for a specific plugin (Image Hotspot). But currently I don´t see the point were to start. I guess I have to repack some H5P library´s, but which one?

It seems that every plugin includes it´s own configuration for the CKEditor, but haven´t found yet where. Could someone please point me in the right direction? 

Best Regards

Okay, I recently found this: . I guess this could be the way to go here.

tim's picture

Hi, sorry for the late reply. Yes that is indeed the correct documentation. 

on gitter /h5p-community someone told me that I could also just generate a new ckeditor, replace it with the old one on my server and then change the semantics.json proper TAGs to allow the tags I want. What you think about this way?

Sidenote: it is currently not working ^^

timothylim23's picture

I haven't had any experience with generating a completely new ckeditor but you could definitely try and see if it works.

Could I ask what is not working?

Of course :) 

I´m trying since several days to allow more html tag´s in the editor, but any tries doesn´t seem to have an effect. I followed this!/guide/dev_acf documention.
Additional I´ve built a custom ckEditor in with the ckEditor-builder and I also changed the proper TAGs in the semantics.json of the plugin we´re using H5P.TEXT-1.1. But nothing worked so far.

Path of the config File i worked with: /h5p-resource/h5p-editor-php-library/ckeditor/config.js
I tried to disable ACF CKEDITOR.config.allowedContent = true;
I also tried to allowExtraContent config.extraAllowedContent = 'dl dt dd button';
and several other things.

So it seems that neither of my changes have an effect. The new generated editor doesn´t show up (still the old one) and the defined allowed tags are still escaped. 

Another Question:

I have tried several plugins and every plugins displays the editor with different functionallity (buttons). But I can´t find the place where this is defined. How does H5P plugins say the Editor which functionallty to show? For Example: Some include a button for making text bold and other do allow to include URL´s.

thomasmars's picture

The tags that are allowed for each library are defined in the semantics of the library. E.g. for H5P.AdvancedText the following tags are allowed:

  • strong
  • em
  • del
  • a
  • ul
  • ol
  • h2
  • h3
  • hr

And the following font attributes:

  • size
  • color
  • background

These are defined in the semantics.json file of the library that uses the "html" widget:

You can explore how this is handled on the back-end by looking at the html editor

This helped me solve my problem!

Hello ! 

When I create a new popup that opens with a button on an Interactive Video I only can add text content. I need to insert images, too. Can you tell me how to modify the CKeditor, please ? When I try to modify the config.js file nothing happen.

Thank you so much for your help !


BV52's picture

Hi maksjm,

What exactly would you like to achieve? The Interactive Video already provides an option to insert images.

On the other hand to help you with the issue of making changes to the code it is best to check the browser console for any errors.


Hello !

Thank you very much for your answer !

What I want to achieve exactly is to insert images in a text box. The wysiwyg editor ( CKEditor ) hasn't all the buttons to insert an image or other html code ( see screenshot ). I tried to customize the CKEditor config.js file but nothing happen. Can you help me, please ? I really need to insert image inside the same box of the text.

Thank you again !