Moodle Plugins directory: WidgetHub | Moodle.org
WidgetHub
WidgetHub
Supercharge your TinyMCE Editor with seamless, customizable Bootstrap components and more.
- This plugin requires a theme based on Boost.
- Backup recommended: Safeguard your custom widgets before updating to version 1.5.x.
NEW: WidgetHub GPT
🔗 Meet your AI assistant for building awesome widgets effortlessly →
By Andreas Giesen
Effortless Workflow
Empower your content creators with a simple 3-step process:
- 1. Explore: Browse the library in List or Grid view.
- 2. Customize: Tweak appearances with intuitive forms.
- 3. Insert: Drop it into the editor instantly.
Smooth insertion and editing workflow
✨ New Visual Grid View
Switch between traditional lists and a modern, icon-based grid. Perfect for visual discovery.
- Persistent: Remembers your preferred view mode.
- Admin Control: Set defaults site-wide.
- Fast: Identify widgets at a glance via custom icons.

Moodle 5.0 Ready
To ensure perfect operation across Moodle 4.x and 5.0, our templates now utilize dual data attributes (data-xxx and data-bs-xxx).
oninit.refactor.bs5 setting to automatically upgrade legacy Bootstrap components when the editor opens!Administration & Customization
Type widget in your site administration search to access the management hub. Manage definitions, styles, and advanced behaviors.
Security First
While core widgets are vetted, custom YAML definitions can introduce XSS risks. Review third-party widgets carefully and restrict permissions for untrusted roles.
Read Security Docs
Powerful Configuration:
share_css: Seamlessly inject site styles into the editor.category.order: Control how your toolbox is organized.insert.behavior: Toggle between default, last-used, or ctrl-click modes.- And many more ..

Documentation
Developer Corner
AMD Build: npx grunt amd
YAML Editor: See libs/codemirror
At the moment, only the image file picker is implemented, since the plugin relies on Moodle’s TinyMCE API. Unfortunately, there is no workaround right now for using it with other file types.
Out of curiosity: which file types would you need to select besides images? That will help me understand your use case better for possible future improvements.
I'm trying to use the "selection mode" as mentionned in the docs. The mode is detected but I'm using ejs, and I'm trying to use selected text in TinyMCE and use it in the widget but the variable name for the selected text content varies in the docs when you use WidgethubGPT: I tried content, selection, selected_text ... Can you tel me what name is the good one. Thanks a lot.
Instead, you must define:
insertquery: ".your-selector"
The selected content in Tiny will be injected into the element that matches that selector in your template.
If you want deeper guidance, you can also ask this qüestion to WidgetHub for TinyMCE GPT (Beta).
Regards, Birgit
Regarding your first question: administrators can create an arbitrary number of widgets in WidgetHub. The GPT by Andreas Geisen can help with creating such widgets, so adding additional snippets like buttons with icons (e.g., Font Awesome icons) should be possible that way.
https://chatgpt.com/g/g-694018e49b888191b04b90e7c7a77a59-widgethub-for-tinymce-gpt-beta
The only potential hurdle is what the button should actually do. If the button only needs to display a link (for example using an element styled like a button), then it is quite straightforward. However, if a custom action is required, JavaScript would be needed, which makes the implementation a bit more involved. Just prompt to GPT what you need and create a new widget with the generated YML.
For your second point: there is already a widget available that allows selecting foreground and background colors (ib-colors). It is quite simple, but it might already cover the basic use case. If something more advanced is required, it might be worth looking at an specific Tiny plugin for that.
Best regards,
Josep