Creating & Editing H5P Content

Rendering the H5P Editor

To render the editor blank to create new content call the renderEditor method on the global Lumi (window.Lumi) object with the HTMLElement in which to render as the first argument:

1. HTMLElement: The HTMLElement where the content should be rendered. For example document.getElementById('h5peditor')

2. contentId (optional): the contentId of the content to edit.

3. options (optional): an object with the following fields:

   1. onEditorLoaded: callback that is called when the editor is loaded. (This will be called as soon as the user has a content type selected from the content selection.)

   2. onEditorSaved: callback that is called when the content is saved. The first argument is the contentId.

   3. onEditorSaveError: callback that is called when there was an error while saving the content.

Lumi.renderEditor(<HTMLElement>, <contentId>, {
    onEditorLoaded: () => console.log('Editor loaded'),
    onEditorSaved: (contentId) => console.log('Editor saved', contentId),
    onEditorSaveError: (error) => console.log('Editor error', error)
});

The most basic editor can be rendered with:

Lumi.renderEditor(document.getElementById('h5peditor'));

Saving H5P content

To save the content call the saveEditor-method on the global Lumi (window.Lumi) object:

// without callback
Lumi.saveEditor();

// with callback
Lumi.saveEditor((content) => console.log(content)); 

Codepen example

Editing existing H5P Content

To edit existing content you need to pass the contentId as second argument to the renderEditor-method:

Lumi.renderEditor(document.getElementById('h5peditor'), <contentId>);

To save the edited content see Saving H5P Content.