H5P Text Editor - using HTML code

Re: H5P Text Editor - using HTML code

by Oliver Tacke -
Number of replies: 3
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)