Add customization to CKEditor for specific H5P plugin
Submitted by Dev0x on Tue, 11/08/2016 - 09:01
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
Dev0x
Tue, 11/08/2016 - 09:40
Permalink
Okay, I recently found this:
Okay, I recently found this: https://h5p.org/adding-text-editor-buttons . I guess this could be the way to go here.
tim
Tue, 11/08/2016 - 14:35
Permalink
Hi, sorry for the late reply.
Hi, sorry for the late reply. Yes that is indeed the correct documentation.
Dev0x
Tue, 11/08/2016 - 15:05
Permalink
on gitter /h5p-community
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
Wed, 11/09/2016 - 09:47
Permalink
I haven't had any experience
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?
Dev0x
Wed, 11/09/2016 - 10:38
Permalink
Of course :) I´m trying since
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 http://docs.ckeditor.com/#!/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
Mon, 11/14/2016 - 09:49
Permalink
Hi
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:
And the following font attributes:
These are defined in the semantics.json file of the library that uses the "html" widget: https://github.com/h5p/h5p-advanced-text/blob/master/semantics.json
You can explore how this is handled on the back-end by looking at the html editor
epineda
Wed, 06/01/2022 - 16:40
Permalink
Thank you!
This helped me solve my problem!
maksjm
Mon, 09/30/2019 - 23:50
Permalink
image upload for Interactive Video content
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
Tue, 10/01/2019 - 18:44
Permalink
Hi maksjm,What exactly would
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.
-BV52
maksjm
Wed, 10/02/2019 - 13:05
Permalink
Hello !Thank you very much
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 !