Very Basic Example of Editing Drupal Nodes in a Modal

I was playing with adding use-ajax class to a Drupal listing this evening, so I could open a node and edit it in a modal.

The reason I was doing this was because I was thinking about how we could preview making changes to microsites (colours, fonts, etc) in the LocalGov Drupal Microsites distribution. I think this approach is quite a nice and simple first attempt at an approach for that. 

The code to get the edit form in a modal was as simple as this:

<a href="/node/{{ node.id }}/edit" class="use-ajax" data-dialog-type="modal">Edit</a>

The JavaScript was very messy, so I won't post it. The general outline was: when the modal is open, if the value in the ckeditor changes, then update the corresponding field with the new value.

Here's a video of me editing some nodes; pretend instead of text, I'm changing the values for colours and fonts and layout, etc in a microsite.