eLeDia Styles for TinyMCE is a powerful plugin for the Moodle TinyMCE editor that enables administrators to define and manage centralized CSS style templates. These predefined styles can be easily applied by teachers and other content creators through an intuitive dropdown menu in the editor toolbar, ensuring consistent and professional formatting across your Moodle courses.

Overview

The plugin bridges the gap between design requirements and content creation by allowing administrators to create a library of reusable styles that match your institution's branding and educational standards. Content creators can then apply these styles without needing any knowledge of HTML or CSS, simply by selecting them from a dropdown menu.

Key Features

Centralized Style Management

All style templates are defined and managed in one central location within the Moodle plugin settings. This ensures consistency across all courses and makes it easy to update styles site-wide without having to modify individual course content.

SCSS Support with Automatic Compilation

Write your styles using modern SCSS syntax, taking advantage of features like variables, nesting, and mixins. The plugin automatically compiles your SCSS to CSS, eliminating the need for external build tools or manual compilation steps.

Live Style Preview

The dropdown menu doesn't just show style names - it displays them with the actual CSS formatting applied. This gives content creators an immediate visual preview of how each style will look before applying it to their content.

Flexible Block and Inline Styles

Create two types of styles to cover different use cases:

• Block Styles: Applied as <div> containers, perfect for callout boxes, alerts, task descriptions, or any content that should be displayed as a distinct block
• Inline Styles: Applied as <span> elements, ideal for highlighting specific words or phrases, code snippets, or other inline formatting needs

Intuitive User Experience

The plugin includes several features designed to make content creation as smooth as possible:

Style Removal Function: Users can remove applied styles with a single click, returning the content to a normal paragraph without having to manually edit HTML.

"Double Enter" Logic: When working inside a block-level style container (like a callout box), users can easily exit the container by pressing Enter twice at the end. This prevents the frustration of being "stuck" inside a styled container.

Configurable Button Layout: Choose whether the "Clear Style" function appears as a separate button in the toolbar or as the first entry in the dropdown menu, allowing you to optimize the interface for your users' workflow.

External Stylesheet Integration

Load one or more external CSS files directly into the editor. This is particularly useful for:

• Including web fonts (Google Fonts, custom typefaces)
• Loading icon libraries (Font Awesome, Material Icons)
• Integrating third-party CSS frameworks or components

Simply provide the URLs of the external stylesheets (one per line), and they will be loaded automatically in the editor environment.

Typical Use Cases

• Educational Institutions: Create consistent formatting for learning objectives, assignments, important notes, and tips throughout all courses
• Corporate Training: Maintain brand consistency with predefined styles for different content types
• Content Accessibility: Provide semantic, properly structured content through predefined styles that include appropriate ARIA labels and semantic HTML
• Multi-Author Environments: Ensure that all content creators, regardless of their technical skill level, can produce professionally formatted content

Technical Implementation

The plugin integrates seamlessly with Moodle's TinyMCE editor and follows Moodle coding standards. The SCSS compilation happens server-side, and the resulting CSS is made available both for the editor preview and can be easily copied into your theme's CSS for consistent rendering across the entire Moodle site.

Configuration Workflow

1. Define Styles: Create a JSON array defining your styles with titles, CSS classes, and types
2. Write CSS/SCSS: Add the corresponding CSS or SCSS code for your style classes
3. Copy Compiled CSS: The plugin generates the compiled CSS, which you copy into your Moodle theme for site-wide application
4. Configure Options: Set up additional options like external stylesheets and button layout preferences

The result is a powerful, flexible styling system that empowers content creators while maintaining design consistency and quality across your entire Moodle installation.

This plugin was made possible by TU Hamburg.