h5p ckeditor more tags


I would like to add more tags to the h5peditor's ckeditor and among them "code snippet" .

I understand I can alter a library's semantics through h5p.api.php or directly add more tags to semantics.json .

Is that correct ?

If I do it that way can I add any tag I want or am I limited by h5peditor-html.js ?

And if i am limited by h5peditor-html.js can I just add something like this ?

if (this.inTags("pre")) inserts.push("CodeSnippet");



falcon's picture

By adding the tags to h5p.api.php they'll be validated and some tags will be added to the editor automatically but you're also limited by h5peditor-html.js and might try

if (this.inTags("pre")) inserts.push("CodeSnippet");

I'm not sure if it will work, but please feel free to add a pull request or patch to H5P core if you find a solution for this. We'll also be adding more buttons to the CKEditor in upcoming releases and will hopefully be able to improve the API while we're at it.

OK so i have made the above addition to h5peditor-html.js and also uploaded ckeditor's last version (including the code snippet plugin) which supports code snippet.

It worked fine in edit mode i.e. the button worked and it added <pre><code>....</code></pre> .

But when I save the content it does not save <code> and </code> and it does not highlight the code.

Any ideas? Thanks.

falcon's picture

Then there is something wrong with the way you added the code to the semantics. Could you paste in your implementation of hook_h5p_semantics_alter?

I tried this in h5p.api.php 

<code>function hook_h5p_semantics_alter(&$semantics, $machine_name, $major_version, $minor_version) {

  // In this example implementation we add <h4> as an allowed tag in H5P.Text 1.0

  if ($machine_name == 'H5P.Text' && $major_version == 1 && $minor_version == 0) {

    $semantics[0]->tags[] = 'code';




but it did not work. Then I manually added in the database Text semantics the code tag and it worked

falcon's picture

Yeah, ok. h5p.api.php is just a documentation file showing you what hooks H5P makes available for other modules. You'll have to create your own module and name it for instance "custom". And the function name will be custom_h5p_semantics_alter. After installing such a custom module the code should start working.

Hi, Thank you for your efforts. I want to use H5P as part of my educational website and need to add mathmatical equations such as square roots and raising numbers to a power. However, I'm not able to do this using the available text block editor. Can you please let me kow how to add HTML code to the editor as there is no access to a text editor.

Thanks for your help


AR Tawil


0 0 1 11 66 UEL 1 1 76 14.0 Normal 0 false false false EN-US JA X-NONE /* Style Definitions */ table.MsoNormalTable {mso-style-name:"Table Normal"; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0; mso-style-noshow:yes; mso-style-priority:99; mso-style-parent:""; mso-padding-alt:0cm 5.4pt 0cm 5.4pt; mso-para-margin:0cm; mso-para-margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:12.0pt; font-family:Cambria; mso-ascii-font-family:Cambria; mso-ascii-theme-font:minor-latin; mso-hansi-font-family:Cambria; mso-hansi-theme-font:minor-latin; mso-ansi-language:EN-US;}

I'm trying to add mathematical equations (symbols) to "fill in the blanks".


AR Tawil 

falcon's picture

Link to answer for math question: http://h5p.org/comment/1707#comment-1707