H5PEditor - Drag and Drop Element creation


Hi there,

I try to create a Drag'n'Drop question with an advancedText-Element as draggable. In the advancedText-Element theres MathJax-Markup that has to be processed by MathJax instantly AFTER creation.

For that I am looking for a event/hook or even Line in the code that is ran when adding a new Draggable in the H5PEditor. Despite intensive search in the code-base I couldn't find any Line thats does the job I am looking for. But I found a Virtual File in Chrome (VMxxxx) that seems to be dynamically created with these line of code in it (excerpt):

H5P.AdvancedText = (function ($) {

   * A simple library for displaying text with advanced styling.
   * @class H5P.AdvancedText
   * @param {Object} parameters
   * @param {Object} [parameters.text='New text']
   * @param {number} id
  function AdvancedText(parameters, id) {
    var self = this;

    var html = (parameters.text === undefined ? '<em>New text</em>' : parameters.text);

     * Wipe container and add text html.
     * @alias H5P.AdvancedText#attach
     * @param {H5P.jQuery} $container
    self.attach = function ($container) {

  return AdvancedText;



Can someone help me with ths Problem?

thomasmars's picture


If you want to add a script that runs immediately as content is initialized you could add it with the alter_scripts hook. Instructions for this can be found in the customization pages for your respective platform in the "customize and extend" documentation.

The lines you have found correspond to the Advanced Text library, and will not be found in the Drag 'n Drop library, but rather in the Advanced Text library: https://github.com/h5p/h5p-advanced-text/blob/master/text.js

Just to prevent from misunderstanding. In the front-end everything is working fine already. I need to do MathJax precessing in the back-end. We already have a JavaScript file running in the back-end. The problem is, that I can't figure out what event is triggered by adding a new draggable in the editor.

thomasmars's picture

I see, this code is rather old and not particularly friendly to work with and hook into, but the function for adding a new draggable is insertElement(). It generates the semantics of a draggable and inserts it into the DOM. There may be some callback or event passed from 'drag-n-bar' or 'drag-n-drop', which are the utility libraries responsible for handling the toolbar with dropzones and draggables, that you can listen for.However I'm not positive of this. Hopefully this can get you on the right track. Good luck :)

Hi Thomas,
thanks so far. I found out, that the code is kind of sideloaded and located inside "files-managed"/h5p/libraries/H5PEditor.DragNDrop-1.1 this is from my understanding since the Dependency to that H5PEditor.DragNDrop-1.1 is defined inside the library.json of DragNDrop.

Now: Is there a way to use a different H5PEditor.DragNDrop-x.x library and have it locally hosted somehow? Then we could write our own stuff into the H5PEditor library and finally implement some event-triggers.

thomasmars's picture

Hi, that is correct, library.json defines the dependencies of a library, and the editor of DragNDrop is a dependency to the DragNDrop library.

I'm not sure what you want to accomplish here, if you are developing a new feature you could use the "development mode" in Drupal, which would allow you to have a /h5p/development folder with your own version of H5PEditor.DragNDrop where you could make your changes. This would not require any changes to the DragNDrop library, and your changes will be immediately visible on your site during development. However making local changes would mean you won't get the benefit of official updates, since your local codebase has changed and will be overwritten by official releases. In these cases you are encouraged to make a pull request to the official repository, or create a alter_scripts hook instead of modifying the library directly.

My suggestion would be to fork H5PEditor.DragNDrop and create some event-triggers at generic appropriate places, make a pull request with this so it becomes included in the official library, then finally create your own specific hooks that listens for these triggered events and does the logic that is essential for you.

To read more about setting up a development environment I suggest reading the dev guides.

Thanks Thomas for the explanation. I'll try to follow that way and give feedback when done.