Accordion block for TinyMCE in PW

[TomPich]

Hey,
The new version of PW (3.0.244/246) is great, and it uses TinyMCE 6.8.
I saw that in this version of TinyMCE, there is a plugin that manages <detail> and <summary> tags. That was not possible in TinyMCE 6.4, used in the former version of PW (3.0.224).
However, this plugin is not displayed in the TinyMCE input fields configuration interface. It’s just completely ignored.
It can be activated though if you add it directly in the input field config in the database and it works perfectly. So it’s just a matter of user interface to get it straight in PW.
Would it be possible to take it into account in the admin interface? That means see this plugin in the plugin lists of TinyMCE, and add the "accordion" button in the tool bar.
Thanks

[BrendonKoz]

Have you already added the plugin into the InputfieldTinyMCE's External Plugin Files section, and then configured both the module and the field to use it? I'm just wondering if the module, and then field config would take care of your manual database edit.

[TomPich]

Didn’t try it yet, no.
I’ll do that and let the community know about it.
Thanks for the lead.

[BrendonKoz]

Hey @TomPich, I don't know if you gave it a try, but I just did. Although I was able to get the button to work after manually modifying InputfieldTinyMCEConfig.php, I wasn't able to get it to actually work using the default interface of a Textarea field's Input config for TinyMCE fields. As the Accordion plugin is not an external plugin, there doesn't seem to be a simple way to use the UI of the field's Input config settings to enable the accordion.

I played around a bit, and did get it to work, but after saving the injected "accordion" (details/summary elements), the HTML of those elements got stripped via HTMLPurifier, so there's another problem. Turning off HTMLPurifier allowed it to work, though I'm not sure if you'd want to do that. There's another recent topic where someone is attempting to adjust HTMLPurifier a bit.

Currently, it seems that to get the Accordion plugin to work until/unless the core TinyMCE module is updated to include it, you'd currently have to migrate your customized settings via the field's UI into a custom JSON that overrides what you have set via the field UI.

Example "Custom Settings JSON" (PW default + accordion):

{
  "plugins": ["anchor", "code", "link", "lists", "pwimage", "pwlink", "table", "accordion"],
  "toolbar": ["styles bold italic pwlink pwimage blockquote hr bullist numlist table anchor code accordion"]
}

After playing around with the accordion interface, I don't find it quite as intuitive as some other elements, but it does work.

[TomPich]

Hey @BrendonKoz,

Thanks for the tip. No, I haven’t tried anything yet. Been busy these last weeks.
I’ll try your solution. Thanks again.

[TomPich]

Hi @BrendonKoz

I tried your solution and couldn’t configure HTML purifier. Or maybe I didn’t manage to clear its cache (I don’t use Tracy Console)...
But no matter what I do, allowing <details> and <summary> in both HTMLPurifier config and TinyMCE settings, these tags get ripped off after page save...

Let’s just hope that there will be an update on this topic in PW soon. Meanwhile, it’s easy to use a workaround.

[BrendonKoz]

Yeah, I was unable to get it to work while HTMLPurifier was enabled. Having it officially supported in PW would make things easier, for sure. 👍

[TomPich]

I manage to configure the HTMLPurifier.
In site/ready.php, I put this:

$wire->addHookAfter('MarkupHTMLPurifier::initConfig', function (HookEvent $event) {
	$config = $event->arguments(0);
	$def = $event->arguments(1);

	$def->addElement('details', 'Flow', 'Flow', 'Common');
	$def->addElement('summary', 'Flow', 'Flow', 'Common');
});

I got that addElement method from there: https://github.com/processwire/processwire-requests/issues/226

Don’t ask me about the three other arguments (Flow, Flow, Common). 😅

That + a config.json file for this specific field where you specify the accordion plugin and the accordion button in the toolbar, as you mentioned above, and it works fine.