Content Layout Accordions

LiveWhale
1

I am adding a new Content Layout accordion to replace the native LW accordions. While they will look and behave just like the native ones, they will have the added benefit of having the +, -, up, and down buttons.

We will use the new ones going forward, but there will be no need to change all the old ones immediately. We’ll just work through updating them slowly as time permits or as we edit existing pages.

I would like to make it easy for admins to convert them, though. I was thinking about creating a browser bookmarklet that runs some JS to replace existing accordions with new ones. I have that working if the user inserts a new accordion first. The script can copy content from the old to the new and delete the old.

I tried having the script just insert the content layout markup automatically, but I ran into an issue. The content layout doesn’t get “registered” or something, so the controls do not get added.

Is there a way to have the editor recognize that a new content layout has been added via JS, or should I stick with the working method of manually inserting a CL before running the script?

Or is there a better way I have not thought of? With ~700 pages with accordions on the site, the last thing I want to do is copy/paste everything manually.

1 Like
2

Hi Jon,

Hmm yes this gets rather deep into the TinyMCE/wysiwyg.js functionality (and is a thing I’ve dreamt of doing in core, but you’re beating me to it! :slight_smile: ).

As a shortcut, if you try clicking the <> View Source tool and then hitting save changes on that modal, does that help? That should take all the existing HTML in the WYSIWYG editor and re-processing it (including placeholders + the move/remove buttons for content layouts).

If that works, that might imply that there’d be a way using the TinyMCE JS API to trigger a “Hey this field has been updated” from outside, which could be a way of triggering it to re-process the markup? :thinking:

3

Yikes. When I tried clicking View Source and hitting Save, the browser became unresponsive. There is obviously something it doesn’t like about a CL being inserted this way.

I can stick with my working method of inserting the CL via the toolbar first and then running the JS to copy content to it. I haven’t had any issues with that. It just takes more clicks.