Multiple TinyMCE instances in Publii's WYSIWYG editor screen?

[grinklelot]

I'm trying to add some tabbed pages to my site, but have the editor set up so that it's not hard for people without coding knowledge to enter content.

Is there some way to have multiple WYSIWYG boxes? Basically, two separate MCE instances -- where one is for Tab 1 and the other is for Tab 2. Then I could call these via variables in my template.

I found the TinyMCE docs for this, but wasn't sure if it could be adapted. https://www.tiny.cloud/docs/tinymce/latest/multiple-editors/

[candidexmedia]

Do you mean tabs like this?

Unfortunately, there's no "graphical" way of displaying more complex layouts like that in a meaningful way in the WYSIWYG editor (AFAIK).

That said, I'd suggest the following:

Find an HTML + CSS code snippet for the tabbed groups that works for you, on Codepen or Free Frontend or the like.

Then, find a way for your user to easily insert it. The Template Plugin could be something to look into. The start and end of divs for each tab might be hard to distinguish in the editor, though, so consider creating some Post Editor CSS rules (they'll only appear in the editor).

Maybe @bjazmoore's plugin could help as well: https://github.com/bjazmoore/Key-Replacement. Your users would just have to enter the special "keyword" to designate where tab content starts and ends, and you could even combine this with the Template Plugin.

If the presence of tabs is consistent across many pages, and the number of tabs and position is the same (i.e. at the top of the page, below the title), you could consider hard-coding the tabbed group code in the post.hbs (in the theme files), and making the content editable via the Theme Settings API > Post Settings.

Last note: make sure tabbed groups are the right call, UX-wise.

[grinklelot]

Thank you so much.

Yes, that is the style of tabs I'm using. I will try some of these, I think they could all potentially work very well in combination.

For your last suggestion (editing post.hbs) -- it seems like I'd be able to call a WYSIWG field this way? The tabs are consistent across many pages, so I'll try that out.

Thanks again!

[candidexmedia]

@grinklelot I double-checked the docs, and WYSIWYG text fields are unfortunately only available for theme settings. For post settings, you get the following options:

The text area field accepts plain text, although HTML <tags> can be added if you add {{{ three sets of curly brackets }}} in your post.hbs.

So... a template plugin might be a better call if your user will need to add styling to the text?

I'd love to know what you settle on, and how it looks once you've implemented it :)

[grinklelot]

Thank you. I'll be trying a few things, you never know how "easy" they are to use until you get them in front of you haha.

The post settings thing seems like it'd be easiest... I kind of wish I could move the field underneath the main editor instead of leaving it on the side. But I'll live.

Thank you again! I'll follow up when I figure it out.