Docs MediaHub Version 1.x Front-end Editing

Front-end Editing

Use the MediaHub TinyMCE toolbar button and image alignment on PageFrontEdit. Available from MediaHub 1.19.51; still marked Beta.

MediaHub includes a TinyMCE plugin for inserting assets from the library in rich text fields. That integration works in the ProcessWire admin by default. From MediaHub 1.19.51, it also works with Ryan Cramer's PageFrontEdit module for on-page editing.

Status: Beta. The fixes in 1.19.51 address common failure modes, but PageFrontEdit setups vary. Test on a staging copy before relying on it site-wide.

What works

  • MediaHub toolbar button appears in TinyMCE fields edited through PageFrontEdit
  • Image alignment classes (left, centre, right) survive page save
  • YouTube/Vimeo embeds and uploaded media inserts behave the same as in the admin editor
  • Sites that load jQuery 3.x independently (for example via CDN for UIkit) are supported
  • Named TinyMCE profiles that shallow-merge over the default config receive the MediaHub plugin entry

Prerequisites

  1. MediaHub 1.19.51 or later installed and refreshed
  2. PageFrontEdit module installed and configured on templates that use TinyMCE body fields
  3. The TinyMCE field's toolbar includes mediahub (see Rich Text Integration → Setting up the toolbar button)
  4. InputfieldTinyMCE installed (standard on ProcessWire 3.x)

How it differs from admin editing

In the ProcessWire admin, TinyMCE runs inside the standard page editor shell. PageFrontEdit loads TinyMCE on the public site with a different script order and config merge path. MediaHub 1.19.51 patches both:

  • Client-side: the plugin registration runs after all TinyMCE config blocks merge, so it survives PageFrontEdit's late config injection and jQuery 3.x loaded outside ProcessWire's admin bundle.
  • Server-side: the mediahub entry is added to every TinyMCE profile that already carries external_plugins, not only the default profile. This prevents the plugin from being dropped when a named profile shallow-merges over default.

Troubleshooting

If the MediaHub button is missing on the front end but works in the admin:

  1. Confirm MediaHub version is 1.19.51+ (Modules → Site → MediaHub).
  2. Confirm mediahub is in the field's TinyMCE toolbar setting.
  3. Enable logging in MediaHub module config → Logging and check site/assets/logs/media-hub.txt for TinyMCE injection diagnostics.
  4. Test with a minimal front-end template (no conflicting jQuery or second TinyMCE init).

If alignment classes disappear after save, upgrade to 1.19.51+. Earlier builds could strip MediaHub-specific classes during the PageFrontEdit save round trip.

What PageFrontEdit does not change

  • MediaHub page reference fields (hero images, galleries) are edited through the standard admin page editor, not PageFrontEdit inline flows.
  • The standalone Media Hub library (Setup → Media Hub) is always admin-only.
  • Insert Link → Select from Media Hub in TinyMCE follows the same rules as admin; see Rich Text Integration.

See also

Last updated