H5PEditor Library with multiple fields



My new content editor will need two news editor fields.

I started creating a new widger following this tutorial : https://h5p.org/creating-editor-widgets

But this tutorial is only for one field.

How can I handle two fields ? These fields can't work in standalone, they both need each other.

The first field will be a field in order to select a shortcut : the user will focus the field, then push keys and it will fill the input with pressed key.

The second field will be a text field that will mirror the first field but that will be editable in order to rename keys name (for exemple, to rename Control + A shortcut to Ctrl + A).

A solution that might work is to only put the first field in my library, and to use a classic text field for the second field and access it from the first field that will handle all the logic. But this seems very dirty I think.



edit : just after sending this post i found the duration widget that look similar in structur to what I need to do. I will check it.

serettig's picture


I'm guessing here as I haven't tried this before: you probably have to put your fields into a group and have the custom editor widget for the group.

otacke's picture

Hi Degrange!

You could e.g. bundle your fields in a group and add the editor widget to the group.

If your data structure allows, you could also go for a solution as in https://github.com/h5p/h5p-editor-timecode where you have multiple input fields that together return one of the primitive field types (text).

If you're widgets in theory could work standalone, you can also create single widgets that have access to the semantics structure and thus other widgets via the parent argument that's passed to you in the constructor. There are also some convenience functions. See, for instance, how you can use H5P.editor.findField to retrieve a different field.

Most likely not relevant in your case, but keep in mind that your widget may be instantiated before the editor has been fully completed, so you may need to wait for parent components to be ready by using their ready() function that will accept your callbacks.


Thanks for you answer.

I should have made my edit more visible (but your answer help me to confirm that this was the good solution :p).

I did some great progress on what I wanted to do. For now I have two fields in the fields parameters of a group.