Quill is a popular open-source tool used to create rich text editors for web applications. Developers love it for its flexibility and lightweight build. In Academy LMS, the Quill editor helps course creators and educators easily add formatted content to their courses and lessons.
However, Academy LMS presents Quill editor in such a way that helps both a professional developer who knows html by heart and also for users who want to use a simplistic WYSIWYG (what you see is what you get) solution.
Let’s show you how to use Quill editor in Academy LMS and its features.
Table of Contents
What is Quill?
Quill.js is a powerful JavaScript library that allows developers to implement rich text editors into web applications. It provides a smooth interface for formatting text, embedding multimedia like images and videos, and creating interactive content.
Its lightweight structure makes it a go-to option for adding text-editing features without compromising on performance.
Getting Started with Quill Editor in Academy LMS
In Academy LMS, the Quill editor is integrated into the Course Builder, Lesson Builder, Assignments, Announcements, Email and more.
Here’s a quick guide on how you can start using Quill while building your courses:
Open Academy LMS Course Builder: Start by creating or editing a course or lesson.
Quill Editor Panel: In the content area, you’ll see the Quill editor toolbar at the top of your text input area.
The editor looks similar to what you might have seen in tools like Google Docs, where you can format text, insert images, embed media and even more.
How to Use Quill Editor in Academy LMS
In Academy LMS, the Quill editor enhances the Course Builder, Lesson Builder, assignments, Announcements, Email and more. Making content creation more intuitive. Its functionality is similar to Google Docs, offering an easy and familiar experience for users.
This tool offers extensive formatting and customization, making it ideal for creating detailed, structured courses.
Here’s a breakdown of the key features in Quill Editor, along with examples of potential use cases specially catered towards Academy LMS users:
Note: You can Use the Quill Editor for Course Builder, Lesson Builder, assignments, Announcements, Email and more!
Font Selection
This feature lets users switch between different font families, such as Sans Serif, Serif, Monospace etc. It allows instructors to customize the appearance of the course content, enhancing readability and emphasizing certain sections.
Example: While creating a lesson on a technical topic, you might choose a monospaced font for code snippets and a more traditional font for the rest of the content. This helps make the material clearer for students in Academy LMS.
Hn Tag Picker (H1, H2, H3…)
The heading picker allows you to format sections of your text with predefined headings (H1, H2, H3, etc.), creating a structured hierarchy within your content.
Example: When developing a course in Academy LMS, you might use H1 for the lesson title, H2 for subtopics, and H3 for specific points. This provides clear organization and improves the content’s flow, making it easier for students to follow.
Font Size Selector
This allows you to change the size of your text. Larger font sizes are generally used for headings, while smaller sizes are for body text.
Example: In a lesson about complex topics, you could increase the font size of key definitions or formulas, helping students focus on the most important parts of the lesson.
Bold
The bold option makes text stand out by thickening the characters.
Example: In a course about business writing, you might bold important points or instructions to make them easily noticeable for students using Academy LMS, such as deadlines or key terms in a glossary.
Italic
Italicized text slants to the right and is typically used for emphasis or citations.
Example: In a literature course, you could use italics to reference book titles or emphasize key concepts or terms being discussed, such as “The Great Gatsby.”
Underline
The underline feature adds a horizontal line beneath the text.
Example: In a module about instructional design, underlining key action items (like “Submit Assignment” or “Contact Instructor”) ensures learners don’t miss critical instructions.
Strikethrough
This feature draws a line through the middle of text to indicate deletions or revisions.
Example: In a programming course, you could use the strikethrough to show deprecated coding practices or old syntax that should no longer be used.
Annotation/Citation
Annotations/Citations allow users to add notes or citations within the text for further clarification.
Example: In a history course, you can annotate important historical dates or add references for students to explore further reading. This ensures all sources or important notes are clearly documented within the lesson.
Code
The code feature formats text as code snippets, displaying it in a dark background.
Example: In a web development course, this feature helps present HTML, CSS, or JavaScript code clearly. Students can easily differentiate code from the rest of the lesson content, which is critical for understanding how to write and test code.
Font Color
This feature allows you to change the color of the text to highlight or categorize content.
Example: In an online design course, you could use different font colors to emphasize contrast or explain color theory. This helps students visually distinguish between different concepts or categories.
Font Background Color
This option allows users to change the background color of selected text, similar to highlighting.
Example: In a lesson on essay writing, you can highlight key parts of a sample essay using background colors, helping students focus on topic sentences, supporting evidence, and conclusions.
Numbered List
This feature automatically numbers items in a list, perfect for creating ordered sequences.
Example: In a course on software development, you might use numbered lists to explain step-by-step processes like “Steps for setting up a development environment,” ensuring students follow the process correctly.
Bulleted List
Bulleted lists help organize content into points, without the need for a specific order.
Example: When teaching a module on time management, bulleted lists can help organize tips or strategies. For instance, “Key habits for productivity” can be presented in clear bullet points.
Indent (Left, Right)
Indentation shifts the text left or right, useful for creating sub-points under larger headings.
Example: In a psychology course, indents can help structure lessons on behavioral theories, allowing subpoints like “Types of Conditioning” to be nested under the main topic “Classical Conditioning.”
Alignment
The alignment tool lets users align text to the left, right, or center.
Example: When creating course descriptions or certificates, you might use center alignment for titles and headings, giving the page a more formal and professional look.
Subscript
Subscript displays text slightly below the line, often used in mathematical or chemical formulas.
Example: In a chemistry course, subscripts would be essential for writing chemical formulas like H₂O, ensuring students understand the proper representation of elements.
Superscript
Superscript displays text above the line, useful for exponents and other notations.
Example: In a physics or mathematics course, superscript is vital for writing equations like E = mc², helping students grasp complex formulas.
LTR/RTL (Left-to-Right, Right-to-Left)
This option allows text direction to be adjusted for languages that are read right-to-left (like Arabic or Hebrew).
Example: If your Academy LMS course offers multilingual support, this feature ensures that content in right-to-left languages is properly aligned and formatted for optimal readability.
Image
The image option allows users to insert images into the text.
Example: In a biology course, you can add labeled diagrams of the human anatomy directly into lessons, providing students with visual references as they study the topic.
URL
The URL feature enables users to add clickable hyperlinks.
Example: In a digital marketing course, you can provide external resources or case studies by linking URLs directly in the lesson text. This way, students can access additional reading material or tools to support their learning.
Table
This feature allows users to insert tables to organize data or content in rows and columns.
Example: In a finance course, you can create tables to present financial models or comparative data, such as “Annual Revenue Growth” across different years or companies.
Clear Formatting
This tool removes all formatting (bold, italics, font size, etc.) from selected text.
Example: If a lesson has too much formatting and you want to start fresh, use this feature to return the text to its default style, helping you quickly standardize the content layout.
The PDF feature allows users to embed or link to PDF documents directly within the content. You can use WordPress default media manager to upload your desired PDF files and attachments!
Example: In an Academy LMS course on law or business, you might upload legal documents, contracts, or research papers in PDF format. Students can view or download the PDFs to review in-depth case studies or guidelines, all without leaving the course interface.
Audio
The audio feature lets instructors embed audio clips into lessons, making it ideal for subjects that benefit from auditory learning. You can use WordPress default media manager to upload your desired audio files.
Example: In a language learning course, you could embed audio files where students can listen to pronunciation examples, phrases, or even entire dialogues. This is especially useful for exercises where listening skills are essential for progress.
Video
The video option allows users to add video content by uploading their own videos with the WordPress default media manager.
Example: For a fitness course on Academy LMS, you can embed instructional workout videos within each lesson, showing students how to perform exercises correctly. This adds a dynamic and interactive element, enhancing the overall learning experience.
Custom HTML
The Custom HTML feature enables users to add custom HTML code in a specific section. This gives them full control over content presentation. Simply click the HTML button to add your desired code.
Example: In an advanced web development course, you might use Custom HTML to insert interactive custom forms, or even run specific JavaScript functions directly within the lesson content. This allows students to experiment with code directly inside the course.
Show HTML Source
This option allows users to view and edit the HTML source code behind the content, giving advanced users more control over formatting. And for advanced users and web developers who love to code, this option is a blessing. As it gives complete control with HTML coding.
Note: If you want to edit the source code, you must have to use a wrapping tag or “<div>”.
Example: If an instructor is comfortable with HTML, they can fine-tune the layout of course content in Academy LMS, such as embedding custom widgets or tweaking the design for responsive formatting.
These features empower instructors using Academy LMS to craft engaging and structured courses that cater to a wide range of learning preferences, from basic text formatting to advanced content presentation.
Conclusion
Using the Quill editor in Academy LMS makes it simple for educators to create rich, engaging content. Whether you’re adding a list of key points, embedding a video, or customizing text formatting, the editor provides all the tools you need to deliver professional-quality course materials.
So next time you’re building a lesson, think about how these features can help you create more engaging content for your learners!