Editor Javascript

Is there any way to include some specific javascript but only when editing a page? I suppose I could just add it to the theme JS, but it would be unnecessary most of the time.

Hi Jon,

We don’t currently have a built-in way to support this, but there are JS triggers that get called during the Page Editor loading process:

$body.trigger('pageBeforeEdit.lw'); // Edit Page has been clicked, TinyMCE editors have not been initialized yet
$body.trigger('pageEditReady.lw'); // Editable areas have been loaded and initialized
$body.trigger('stopEdit.lw'); // Editing toolbar has been closed at end of edit session

What you could do is hook into $('body').bind('pageBeforeEdit.lw', function() { .. } in your theme JS and inside of that, maybe you could trigger some JS, or asynchronously add it to the page in time for it to be used to affect the edit experience.

Thanks. That should do the trick.

Well, I tried $('body').bind('pageEditReady.lw', function()… but it didn’t work for me.

I am toying with the idea of adding accordion action buttons (+,-,↑,↓), similar to content layouts, so I am trying to detect table.lw_wysiwyg_accordion or div.lw_accordion when the editor is active. But neither one of those classes seem to be found using the pageEditReady function.

Any ideas?

Ah, hm, yeah there must be something else going on there (I don’t have examples offhand I can think of of past customizations using that trigger, so if it’s giving you trouble, might not be worth rabbit-holing on at the moment.) Alternatively, if you’re interested in more fluid accordion experience, my suggestion would maybe be to just rebuild a simple accordion as a content layout. If we didn’t already have so many legacy accordions done using the table approach, that would probably be my suggestion for core. Given an accordion CL you were happy with, you could pretty easily use CSS to hide the Insert > Accordion native button and go all-CL?

I actually did build a content layout accordion that looks and functions exactly like the native accordion. That was my first idea. But then I really didn’t like the idea of replacing all of our accordions manually.

I was also afraid that LW may eventually update the native accordions, and I might have to switch them all back. That’s why I was exploring the idea of just adding features to the native ones.

Do you think there is any reasonable expectation that native accordions will be getting any improvements, or would it be safe to move forward with the content layout option?

Thanks Jon – I too prefer the up/down/add/remove interface that CLs have, so the only improvement I could see us tackling to the current native (table/div style, behind the scenes) accordions would be replacing them essentially with CLs. While that might save you a bit of work if/when we do that, I don’t think if you set up a new CL for your own theming that has accordion functionality it’s going to be too big of a problem.

Put another way, any changes that we might make to native accordions I don’t currently envision as meaning you’d sacrifice anything major by having moved to CLs. We already have a few clients whose sites launched in the last few years who have themed accordions built as CLs, and we just hid the Insert > Accordion list button during theming.

As you mention, replacing old table-style accordions with a new CL one could be a bit of a pain, though I suspect that’s something that could be done without too much hassle once you had a new version in place (either with a jQuery script run after page load / while editor is open, by comparing old and new HTML markups), or by just letting it happen organically (i.e., new accordions get the new CL style, old ones use the original native version until they’re replaced).

Thanks Karl. I’m still hesitant to switch to CL accordions. We have over 600 pages with accordions on them, and I don’t look forward to switching them all.

That being said, I think I got things to work. I found that if I just wait 1 second after pageEditReady.lw, the table accordion markup is detected, and I can add my custom controls.

This is just on dev and is kind of just an experiment for now. I may move it over to prod after doing some more testing. If I do, it will be easy enough to remove this code if native accordions ever get their own improvements.

Ah great, glad adding that delay worked!