H5P Text Editor - using HTML code

H5P Text Editor - using HTML code

by Siddharth Patel -
Number of replies: 7

Hello Moodlers

I have installed the Moodle H5P plugin. I am making contents using the H5P editor.

Unfortunately, the way we are having the option of HTML view and other options on the Moodle WYSIWYG editor, they are not being visible on the H5P text editor. Also, from the H5P forum, there was not a clear answer for overcoming this situation. 

The contents which are used over here is having tables, rich text, alignment etc. but no option is there right now as shown up here. Is there any method to upgrade them?

Moodle version: 3.8

H5P module Plugin version: 1.20.1

Average of ratings: Useful (1)
In reply to Siddharth Patel

Re: H5P Text Editor - using HTML code

by Stuart Mealor -
If you are using Moodle 3.8, then H5P is available in core.
I'm not sure why you are also adding the H5P plugin?
Whatever you do:
"HTML view and other options on the Moodle WYSIWYG" and "not being visible on the H5P text editor"
The editor in Moodle (Atto) and the editor within H5P are different.
Average of ratings: -
In reply to Stuart Mealor

Re: H5P Text Editor - using HTML code

by Siddharth Patel -
Thanks for the reply

  • 'If you are using Moodle 3.8, then H5P is available in core. I'm not sure why you are also adding the H5P plugin?' - I want to create the H5P content like column structure including a quiz and all in the Moodle, not just to embed them. So the H5P plugin is installed.
  • 'The editor in Moodle (Atto) and the editor within H5P are different' - yes. But while checking I found out that the default H5P editor has hidden some features by default which mentioned above. But I can not find a way to enable them in Moodle.
Average of ratings: -
In reply to Siddharth Patel

Re: H5P Text Editor - using HTML code

by Stuart Mealor -
I think you still do not understand.
1. You said "I want to create the H5P content ... all in the Moodle, not just to embed them. So the H5P plugin is installed."
OK, so you could upgrade to Moodle 3.9, and then H5P is in core, no need for a plugin:
https://docs.moodle.org/39/en/H5P
But let's assume you cannot do this, and still using Moodle 3.8.
2. "I found out that the default H5P editor has hidden some features by default which mentioned above."
If you think some H5P features are hidden, and you are using the H5P plugin, then your question should be to the H5P developers.

Personally I am not aware of H5P menu buttons that are restricted by Moodle.
But you should note that when editing H5P some items do not appear in the menus (which are dynamic) because it doesn't make sense to have them - e.g. embedding a 360 virtual tour would not make sense within a Dialog Cards content type.
Again, I will say there is no relationship between the Moodle editor (Atto) and the H5P editor, which is self-contained within the H5P code.
Average of ratings: -
In reply to Stuart Mealor

Re: H5P Text Editor - using HTML code

by Oliver Tacke -
Hi all!

I think what Siddharth is trying to say (Siddharth, please correct me if I am wrong): The Atto editor has a way larger number of features (buttons) than the CKEditor that H5P uses. Both resemble each other visually, so I assume Siddharth was under the impression that some setting in moodle might allow to use other features in H5P.

Siddarth also wrote a post on the H5P forum already where he went into more detail and where I already answered that not offering all the options in all the HTML widgets is not a technical problem, but it was a deliberate choice by the content type developers in order to keep the interface simpler.

What I did not mention there, but what I am adding here now: Siddharth, if you're lacking a button from the CKEditor: You can use the H5P plugin's alter_semantics hook to add those that are used thoughout H5P, and you can even use the alter_scripts hook to add extra plugins to the CKEditor. Please visit the developer documentation on that topic. Please mind however, that your content will not run on other people's H5P instances unless they have made the same customizations. H5P will filter out HTML tags that are not allowed to be used in a content type.

Cheers,
Oliver 
Average of ratings: Useful (7)
In reply to Oliver Tacke

Re: H5P Text Editor - using HTML code

by Stuart Mealor -
Awesome post - thanks for detailing the possible options here Oliver smile
Average of ratings: -
In reply to Oliver Tacke

Re: H5P Text Editor - using HTML code

by Siddharth Patel -
Thank you, Oliver!!
That was very kind of you for such a reply!

I have been studying that developer documentation related to alter_sementics for a long time, but could not find the files in which I should make the changes. I just keep getting lost in finding the file located inside the Moodle module directory of H5P for making change in the CKEditor buttons.

I got till this page, but could not understand should I make the changes in the same page - mod/hvp/renderers.php and if yes then what would be the code for enabling the HTML code for that one? Here someone has applied the  MathJax by applying some changes. But it is tough to find it for Moodle.

Challange I am facing: 
  • I am using the tables used in the H5P, but they are not giving good output and also have bugs. So I am having the styling already created. I just need to give ID to the respective tables. 
  • I also have some HTML contents in which I need to give ID to DIVs, but also not seem possible without it.
  • I need to use SVG in place of PNG, which are not supported in the H5P default as well.
Average of ratings: -
In reply to Siddharth Patel

Re: H5P Text Editor - using HTML code

by Oliver Tacke -
Hi Siddharth!

You're halfway there, but the first step would be to use the alter_semantics hook. You'd use the $name variable to determine for what library H5P is about to render the editor (in $major_version and $minor_version). The $semantics variable will contain the complete editor structure that you can parse for the text elements that you'd like to alter - and when you have found them, you simple amend its tag property with the values that you want and are allowed to use. It's not specific to moodle, but works the same way on WordPress and Drupal.

All the best for finding solutions to your challenges! I don't know what the chances are, but I created the code to solve the SVG one just yesterday and filed in a pull-request.

Cheers,
Oliver
Average of ratings: Useful (1)