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:
2412 sites
880 downloads
72 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.1.0
  •  Documentation panel: A new "When to use" tab alongside the preview panel displaying its description and recommended use cases.
  • Two new components:
 
Added in previous versions
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

Показване на коментарите
  • Xinya Liu
    чт, 13 апр 2023, 16:34
    I installed this plugin, making sure those default boxes are checked under Site Administration --> Plugin --> TinyMCE. However, none of the buttons show up on my TimyMCE editor?? I'm using Moodle 4.1. Anybody can guide me a litte
    ? Thank you.
  • Xinya Liu
    чт, 13 апр 2023, 17:15
    OK, I finally figured out. After installed the plugin, one has to go to Site Admin -> Plugin --> Text Editor --> Manage Text Editor, then make sure of adjust those editors' order. TinyMCE has to be the first one for all C4L buttons to show up.
  • Roger Segú
    чт, 13 апр 2023, 20:18
    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
    пн, 25 сеп 2023, 20:25
    Love it, many thanks!
  • Roger Segú
    пн, 25 сеп 2023, 23:56
    Thanks, Markos! I'm glad you like it усмивка
  • Zoran Jančić
    ср, 25 окт 2023, 18:04
    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ú
    ср, 25 окт 2023, 18:30
    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ú
    ср, 25 окт 2023, 18:36
    #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ć
    ср, 25 окт 2023, 18:55
    Updated. Works perfect! Thank you very much for such quick fix!
  • Roger Segú
    ср, 25 окт 2023, 18:59
    Great усмивка Happy to help!
  • Gustavo Samorano
    вт, 26 март 2024, 04:43
    Thank you for the development of the plugin.
    Thank you, Xinya Liu!
  • Roger Segú
    нд, 31 март 2024, 08:07
    Thanks, Gustavo!! I'm glad it's being useful.
  • Anna Pan
    пт, 6 фев 2026, 19:47
    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ú
    пт, 6 фев 2026, 20:24
    Hi Anna, sorry to hear that. What Moodle version are you using?
  • Anna Pan
    пт, 6 фев 2026, 21:10
    Hi Roger, it's 4.5
1 2
Please login to post comments