eleDia Styles

eLeDia Styles for TinyMCE is a Moodle plugin that enables administrators to define and manage centralized CSS style templates for the TinyMCE editor. Teachers and content creators can easily apply these predefined styles to their content through a convenient dropdown menu in the editor toolbar. The plugin supports SCSS input with automatic compilation to CSS, provides live style preview in the editor, and offers flexible configuration options including support for block-level and inline styles, external stylesheet integration, and an intuitive style removal function.
eLeDia Styles for TinyMCE – Comprehensive Description
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.