WidgetHub

TinyMCE ::: tiny_widgethub
Maintained by Josep Mulet
WidgetHub is a powerful plugin for Moodle that allows users to design, use, and customize widget components directly within the Tiny Editor. With built-in support for Bootstrap components, WidgetHub simplifies the process of creating dynamic and responsive content.
Latest release:
331 sites
194 downloads
12 fans
Current versions available: 2

WidgetHub

Supercharge your TinyMCE Editor with seamless, customizable Bootstrap components and more.

⚡ Boost-Ready  🤖 AI Powered  🛠️ Fully Customizable
 
Important:
  • This plugin requires a theme based on Boost.
  • Backup recommended: Safeguard your custom widgets before updating to version 1.5.x.

Effortless Workflow

Empower your content creators with a simple 3-step process:

  1. 1. Explore: Browse the library in List or Grid view.
  2. 2. Customize: Tweak appearances with intuitive forms.
  3. 3. Insert: Drop it into the editor instantly.
Live Reconfiguration: Need a change? Use the TinyMCE context menus to re-edit components anytime without touching code.
Usage Demo

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.
Grid View

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).

Pro Tip: Use the 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 ..
Settings Update Widgets


Developer Corner

AMD Build: npx grunt amd

YAML Editor: See libs/codemirror

Credits & Origin

Inspired by Snippet.
Developed for IEDIB.
Icons by Fontawesome 6.4.

Screenshots

Screenshot #0
Screenshot #1
Screenshot #2
Screenshot #3
Screenshot #4
Screenshot #5
Screenshot #6

Contributors

Josep Mulet (Lead maintainer)
Please login to view contributors details and/or to contact them

Comments

Show comments
  • Plugins bot
    Mon, 9 Dec 2024, 1:30 AM
    Approval issue created: CONTRIB-9769
  • Ayla Y
    Mon, 8 Sept 2025, 5:20 PM
    We really appreciate the WidgetHub plugin. During the process of translating the strings, we noticed that a significant number of them have not yet been localized.
  • Josep Mulet
    Tue, 9 Sept 2025, 5:52 PM
    Thanks for the translations! 🙏 It would be really helpful if you could share which specific strings you noticed as missing from the localization. That way we can review them more easily. Please feel free to open an issue in the plugin repository so we can track and address this properly.
  • Serge Fleussu
    Thu, 18 Sept 2025, 7:19 PM
    Hello Josep. Thank you for the plugin. We use it to have consistency within our productions. We use it in some widget with the type image. This is working very well (and thanks for the contextual menu with binding). We are facing a problem, and it seems that this is not emplemented. We would like tu use it with the file type but this doesn't work : we would like to use Moodle file selector, as we do with image. We tried to give image as type but it detects that the file extension doesn't match. Do you a turnaround? Thanks.
  • Josep Mulet
    Thu, 18 Sept 2025, 9:27 PM
    Hello, and thanks for your feedback! I’m glad to hear the image integration and contextual menu are working well for your use case.
    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.
  • Serge Fleussu
    Wed, 15 Oct 2025, 9:26 PM
    Hello, Sorry for the late response. File types may be from Word, Excel, PDF,... depending on the case. I did not find a good solution yet to manage files in the widget as well as binding with insertquery in an attribute. Still learning wink. Thank you again for this plugin.
  • Serge Fleussu
    Fri, 20 Feb 2026, 11:05 PM
    Hello,
    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.
  • Josep Mulet
    Sat, 21 Feb 2026, 5:51 PM
    In selection mode there is no variable like content. WidgetHub does not pass the selected text as a template variable.

    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).
  • Birgit Lachner
    Wed, 11 Mar 2026, 9:01 PM
    Hi, would it be possible, to add some more snippets? We need a possiblity to add buttons and as Symbol, may be, with additional font-awesome symbols.

    Regards, Birgit
  • Birgit Lachner
    Wed, 11 Mar 2026, 9:03 PM
    additional feature would be a color picker ...
Please login to post comments