Editor: Customizing HTML of edit form

davem

Hello,

Love your product, it is amazing. Running into an issue that I don't know how to resolve though; some professional help would be great!

I'm creating a new custom display controller for the editor based on the bootstrap file available with the editor(editor.bootstrap.js).

This works perfectly however the design I'm being asked to implement is much more complex than the simple form being injected into the modal.

Basically they want the edit form to be broken up into three tabs inside the modal, where some of the options for row show up under each tab.

I can almost accomplish this by injecting the code into a modal manually(using the append variable's outerHTML property), but then I lose all the great data binding, multi-row edit, etc. features of the Editor. Even then it isn't a perfect solution because I'm just getting a big block of HTML that I would still need to manipulate and it would get messy I'm sure.

Is there a built in function for customizing the existing HTML? Or perhaps options for recreating the dynamic features of the editor on my own custom HTML? I looked through the docs and searched the forums but didn't find much.

If this isn't possible with the existing features, can you give me any hints on using the editor api to recreate this functionality?

I've attached two pics, one of the current form(edit_form) and one of the basic design desired.

Thanks!
Dave

allan

Hi,

Great question! Unfortunately tabbed forms aren't something that Editor currently offers out of the box, although that is planned for a future release. Until then it is possible to do using the API and events.

There are essentially two ways that I would recommend for approaching this:

1) Use the displayOrder event to know when Editor modifies the DOM for the displayed form, and then modify it to suit your needs (as you have seen, try to use append / prepend / etc, rather than inner/outerHTML).

What you would need to do typically is:

a) Insert the tab bar (which already has event handlers assigned to it)
b) Use the show() and hide() methods to show / hide fields as the user changes tabs (so it isn't showing / hiding a complete tab container like traditional tabs would, but the visual effect is identical).

2) The second option is to create a custom field type plug-in that will basically just show your tab bar (instead of injecting it into the DOM). Then use b) from above with the show() and hide() methods to show / hide fields as needed.

Hope this helps! Let me know what you think and how you get on with that.

Regards,
Allan

davem

Awesome, thank you for the great explanation.