Components for Learning (C4L)

TinyMCE ::: tiny_c4l
Maintained by Marc Català, Roger Segú
A plugin for the Moodle TinyMCE editor providing a set of visual components designed explicitly for Learning, based on the parent project componentsforlearning.org.
Latest release:
2751 sites
942 downloads
75 fans
Current versions available: 2

Components For Learning (c4l)

 
A plugin for the Moodle TinyMCE editor that provides a set of visual components designed explicitly for Learning, based on the parent project componentsforlearning.org.

You can install the plugin from the Site Administration area (Plugins → Install plugins → Install plugin from ZIP file). Once the plugin is installed, the corresponding button will be added to the TinyMCE editor buttons bar. 

A setting enabled by default allows previewing components on hover. To change it, just uncheck the enablepreview setting on Site Administration area → Plugins → Text Editors → TinyMCE editor → Components for Learning (C4L).

The capability 'tiny/c4l:viewplugin' allows configuring the plugin visibility to any role.

This plugin is based on another plugin for Atto editor named Components for Learning (C4L) (https://moodle.org/plugins/atto_c4l) that is part of a broader, collaborative project called Components for Learning (https://componentsforlearning.org). You will find there all the related documentation and detailed usage recommendations and examples for all components included here.

What's new in version 3.2.1

Accessibility improvement by adding the role="note" attribute to all components.

 
Added in previous versions
3.2.0

3.1.0
  •  Documentation panel: A new "When to use" tab alongside the preview panel displaying its description and recommended use cases.
  • Two new components:
 
3.0.0:
  • Add your custom components.

2.1.0:

  • Improved accessibility by adding aria-label attributes to all components and variants, granting its semantical description available directly in the HTML code.
2.0.0:

  • Introducing Variants: Now you can apply visual variations to the components, like making them full-width, moving them to the left or right, adding quotes or captions, or choosing between ordered or unordered lists.
  • Improved asynchronous UI: You can choose any variant without leaving the plugin's selector modal window. We fully refactored the main UI to allow that. Also, the preview will show you how the component will look when applying a variant before adding it to your content.
  • Persistent user choices: Once a Variant is selected, it will remain the preferred option until the user chooses to deselect it again.

1.2.0:

  • New options in the Settings area allowing to choose which components are available or unavailable for students to use in the editor. 
  • New component Learning Outcomes.

1.1.0 :

  • Improved UI.
  • A better integrated Preview side area.
  • Tabs filter to differentiate components based on their pedagogical functionality (Contextual, Procedural, Evaluative or Helper).



Screenshots

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

Contributors

Marc Català (Lead maintainer)
Please login to view contributors details and/or to contact them

Comments

Show comments
  • Roger Segú
    Thu, 13 Apr 2023, 8:18 PM
    Hi Liu, I'm glad you could work it out. Indeed, in version 4.1 the default editor is still Atto, so a necessary step before using the plugin would be switching editors through the configuration instructions you kindly provided. Thanks for reaching out. I hope you enjoy the plugin!
  • Markos Giannopoulos
    Mon, 25 Sept 2023, 8:25 PM
    Love it, many thanks!
  • Roger Segú
    Mon, 25 Sept 2023, 11:56 PM
    Thanks, Markos! I'm glad you like it smile
  • Zoran Jančić
    Wed, 25 Oct 2023, 6:04 PM
    Fantastic plugin! How can I achieve that bullet list items in Learning Outcomes look like here: https://componentsforlearning.org/components/learning-outcomes/
    Mine do not have any symbol before each outcome. Already tried with different stock themes (standard, boost, etc...).
  • Roger Segú
    Wed, 25 Oct 2023, 6:30 PM
    Thank you, Zoran! I'm afraid some image routes were wrong, my bad. I just fixed it and uploaded the plugin again, I hope it works fine now.
  • Roger Segú
    Wed, 25 Oct 2023, 6:36 PM
    #Zoran By the way, I'm assuming that you have both versions installed (Atto and Tiny), and I presume that would be causing the issue. Just to clarify, the version I just updated is the one for Atto. Having both updated may help.
  • Zoran Jančić
    Wed, 25 Oct 2023, 6:55 PM
    Updated. Works perfect! Thank you very much for such quick fix!
  • Roger Segú
    Wed, 25 Oct 2023, 6:59 PM
    Great smile Happy to help!
  • Gustavo Samorano
    Tue, 26 Mar 2024, 4:43 AM
    Thank you for the development of the plugin.
    Thank you, Xinya Liu!
  • Roger Segú
    Sun, 31 Mar 2024, 8:07 AM
    Thanks, Gustavo!! I'm glad it's being useful.
  • Anna Pan
    Fri, 6 Feb 2026, 7:47 PM
    Hi everyone, thank you for the plugin!
    We've run into a bit of an obstacle when deploying it in a testing environment. We've added the custom component as per instructions, and were able to see it in tinyMCE text editor. However saving the page led to all formatting being stripped off. Wondering if anyone else had a similar situation or could point me in the right direction. Thank you in advance!
  • Roger Segú
    Fri, 6 Feb 2026, 8:24 PM
    Hi Anna, sorry to hear that. What Moodle version are you using?
  • Anna Pan
    Fri, 6 Feb 2026, 9:10 PM
    Hi Roger, it's 4.5
  • Roger Segú
    Sat, 7 Feb 2026, 9:50 PM
    Hi Anna, I've been running some tests and I'm not getting this issue. Yet, if the custom component shows the right styling in the editor but not in the page view, the most probable reason would be lacking that step in the process where you add the same CSS a second time via additionalhtmlhead in the Site Administration, using tags (https://components-for-learning.gitbook.io/components-for-learning-documentation/advanced/custom-components#step-14) . If that still doesn't solve the problem, then try adding the CSS directly to the theme via Site Administration → Appearance → Themes → [Your theme] → Advanced Settings → Raw SCSS. I hope any of those solutions fix the issue.
  • Anna Pan
    Tue, 10 Feb 2026, 4:53 PM
    Hi Roger, thank you so much! I'll try this with my colleagues
1 2
Please login to post comments