Building an LMS Course Creation Page with Froala

Course authors require different editing tools depending on what they are creating. When building a new course in a learning management systems, they are typically guided through a page of content blocks, each with a distinct instructional purpose. These may include videos, texts, assignments, discussions, and announcements blocks. Froala’s rich-text editor can be configured differently for each one, giving authors exactly the right tools at the right moment.

With more than 240 configuration options, Froala can be tailored to match the workflow of each block type. This guide covers core learning blocks first, then specialized blocks, followed by shared configuration patterns, implementation guidance, and a complete interactive example that brings all configurations together in a practical LMS course builder.

Why Choose Froala for LMS Platforms?

For product managers and LMS decision-makers, Froala delivers significant business value beyond its technical features. It empowers non-technical authors to build engaging content without writing code, standardizes course design across modules, and drastically reduces support tickets related to formatting problems. By offering a tailored and reliable editing experience, institutions can elevate the quality of their educational materials while accelerating course creation.

Core LMS Block Configurations

The guide starts with the most common authoring blocks used to create lessons, assessments, and learner interactions. These configurations focus on providing course creators with the right tools for the job without overwhelming the editing experience.

Video Block

Authors can use this block to visually explain their lessons.

Configure Froala with a minimal toolbar focused on media embedding. Enable video upload or embed options, allow pasting from popular video platforms, and enable Filestack plugin for advanced video upload and transformation.

new FroalaEditor('#video-block',{
                    pluginsEnabled: ['video', 'image', 'link', 'filestack', 'filesManager', 'file'],
                    toolbarButtons: ["insertVideo", "insertLink", "insertImage", "openFilePickerVideo"],
                    videoUpload: true,
                    videoAllowedProviders: ["youtube", "vimeo", "dailymotion"],
                    videoDefaultWidth: 0,
                    videoMaxSize: 1024 * 1024 * 15,
                    videoResponsive: true,
                    videoAllowedTypes: [
                        'mp4', 'webm'
                    ],
                    videoUploadURL: '/upload_video',

                    filestackOptions: {
                        filestackAPI: '***',
                        pickerOptions: {
                            fromSources: [
                                'local_file_system',
                                'imagesearch',
                                'url',
                                'googledrive',
                                'facebook',
                            ],
                        },
                    },
                    placeholderText: "Embed or upload your course video here..."
                });

Details Block

Authors can use this block to enter the full course details.

Use a full rich-text toolbar with headings, bold, italics, lists, tables, links, and alignment tools.

This setup is ideal for lesson explanations, summaries, and reading content, where formatting flexibility improves readability. Creators can also use this block for learning objectives, such as listing course goals and measurable outcomes at the start of a module, and for FAQs that clearly organize common learner questions.

new FroalaEditor('#text-block',{
                    toolbarButtons: ['bold', 'italic', 'underline', 'strikeThrough', '|', 'paragraphFormat', 'fontSize', 'textColor', '|', 'alignLeft', 'alignCenter', 'alignRight', 'alignJustify', '|', 'formatOL', 'formatUL', 'indent', 'outdent', '|', 'insertTable', 'insertLink', 'insertImage', '|', 'undo', 'redo', 'html'],
                    placeholderText: 'Write your lesson content here...',
                    heightMin: 300,
                });

Assignment Block

Set up Froala to support detailed instructions, file references, due date formatting, and rubric descriptions. Toolbar options, such as lists, tables, attachments integration, and links, help course creators clearly define expectations.

new FroalaEditor('#assignment-block',{
                    toolbarButtons: ['bold', 'italic', 'underline', '|', 'formatOL', 'formatUL', '|', 'insertTable', 'insertLink', 'insertFile', '|', 'paragraphFormat', 'align', '|', 'undo', 'redo'], 
                    fileUpload: true,
                    fileAllowedTypes: ['application/pdf', 'application/msword'],
                    placeholderText: 'Describe the assignment instructions, rubric, and deadlines...',
                });

Discussion Block

Use a lighter configuration that encourages fast posting and interactions. It includes basic text styling, quotes, emojis where supported, and link insertion, so instructors can create engaging discussion prompts while maintaining a clean editing experience.

new FroalaEditor('#discussion-block', { 
                    toolbarButtons: ['bold', 'italic', '|', 'insertLink', 'emoticons', 'quote', '|', 'undo', 'redo'],
                    placeholderText: 'Start a discussion prompt or reply here...',
                    heightMin: 100,
                    charCounterCount: true,
                    charCounterMax: 1000
                });

Announcement Block

Configure Froala with a clean, focused toolbar to write clear and concise announcements. It supports basic formatting, links, and emojis so that instructors can share updates in a friendly, readable way.

Use Froala’s Paragraph Styles feature to enable authors quickly apply predefined formatting to entire paragraphs without manually changing individual text properties.

new FroalaEditor('#announcement-block',{
                    toolbarButtons: [
                        'paragraphStyle',
                        'paragraphFormat',
                        '|',
                        'bold',
                        'italic',
                        'underline',
                        '|',
                        'insertLink',
                        'emoticons',
                        '|',
                        'alignLeft',
                        'alignCenter',
                        '|',
                        'undo',
                        'redo',
                    ],
                    paragraphStyles: {
                        new_course: 'New Course',
                        update: 'Important Update'
                    },
                    placeholderText: 'Write your course announcement...',
                    wordCounterMax: 1500,
                });

Common Features Across LMS Blocks

Although each LMS block benefits from a tailored toolbar and feature set, several Froala capabilities are valuable across nearly all the block types. For example:

AI Assist

Froala AI Assist fits naturally into any block by helping course creators draft lesson text, improve clarity, rephrase instructions, summarize long content, and generate ideas for quizzes, announcements, or discussion prompts. This is especially useful when building courses quickly, maintaining a consistent tone across modules, or refining educational content for better learner understanding and engagement. For example, an instructor writing a lesson introduction can use AI Assist to expand a short outline into a polished explanation, whereas a quiz author can generate question ideas directly from the lesson content.

In a production environment, AI features require a server setup to secure the AI model API code. Here is an example of setting up an AI assist.

{
// AI Assist configuration

           aiSupplementalTermsAccepted: true,

           aiAssistRequest: sendDataToAI,


           // Event handlers

           events: {

               'initialized': function () {

                   console.log('Froala Editor initialized with AI Assist');

               },

               'aiAssist.afterInsert': function () {

                   console.error('AI response is ready.');

                   

               }

           }
}

Scientific Content

For STEM course creation, configure Froala with MathType integration so that instructors can write and embed mathematical equations, scientific notation, and complex formulas naturally within their content. Pairing this with code snippets and image insertion makes the block especially useful for technical lessons, lab documentation, and other science- or engineering-focused materials.

Here is a guide for integrating Froala with MathType to enable scientific content editing.

Import from Word

Froala enable course creators to upload Word documents (.docx) directly into any block. This reduce manual content entry time.

{ 

    importFromWordMaxFileSize: 1 * 1024 * 1024,
    importFromWordFileTypesAllowed: ['docx'],

}

Export to Word

Creators can download their course content as formatted Word documents. This is especially useful for offline reviews, stakeholder approval, and compliance documentation.

{ 
    wordExportFileName: "myCourseName",
}

Export to PDF

Authors can generate PDF versions of their course content for distribution, printing, and archival purposes. PDF export preserves the formatting, images, and layout while providing a portable, shareable format that works across devices.

Code Snippet

Use Froala’s Code Snippet plugin tailored for technical courses that require formatted code. The code view, monospace font support, and minimal formatting were enabled so that instructors could insert and label code examples cleanly.

Advanced File Management

You can use the Filestack plugin to easily integrate powerful file uploading and management capabilities into your web application. The Filestack Plugin provides a seamless way to handle file uploads and transformations through a simple and intuitive user interface.

Security, Accessibility & UX

Before shipping these configurations, address security, accessibility, and UX edge cases so that your LMS is safe, usable, and reliable in production.

Security

Sanitize HTML server-side (never trust client-side filters). Enable Froala’s sanitize, and run server validation to remove disallowed tags/attributes.
Restrict uploads: enforce allowed MIME types and maximum file size in both client and server codes. Example: reject uploads > 10 MB and require a content type match.
Upload endpoints are protected with authentication and CSRF protection. Add per-request signed headers if your storage service supports this.
Virus/AV scanning: integrate a scanning step on uploaded files before making them publicly available. Filestack can help you automatically detect viruses and malware before serving them to users. Ensure logging, alerting, and regular security reviews to maintain infrastructure integrity and its resilience.

Accessibility

Provide sufficient color contrast for callouts and text color/background color choices.
Ensure that MathType and code blocks have accessible fallbacks (alt text for images, MathML, or LaTeX fallback for screen readers when possible).
Testing with screen readers and keyboard-only navigation early.

UX & Reliability

Autosave: Set up autosave with periodic backups to prevent data loss during network interruptions or unexpected browser crashes in your LMS environment. This can be easily performed using the Save plugin. .
Offline resilience: allows draft composition offline and queue uploads when the connection returns.
Mobile/compact toolbars: provide a simplified toolbar for small screens to avoid overflow issues. Froala offer dedicated configuration for touch interfaces, making content creation accessible across devices and screen sizes without sacrificing functionality.
Error handling: Utilize Froala events to display clear error messages and preserve content on failure.

Developer Ergonomics

SCORM and LTI Compatibility: Because Froala produces clean, semantic HTML, the resulting content can easily be packaged into SCORM modules or served via LTI integrations without breaking layouts or introducing invalid markup.

Interactive Example: LMS Block Configuration in Action

This example ties the article together by demonstrating how multiple Froala block configurations can coexist on a single course creation page. Each block is initialized independently with its own tailored toolbar, performance settings, and feature set.

To demonstrate how these Froala configurations work in a real LMS environment, here is a complete working example with HTML and JavaScript that lets you switch between different block types and see each editor initialized with its specific configuration.

HTML Structure

The interface consists of a sidebar menu with buttons for each block type and a main editing area. When a course creator clicks a menu button, a new editor instance is dynamically added to the form. The Froala CSS is loaded from CDN, and custom paragraph styles for announcements (new course and important update) are defined with distinct visual styling to help instructors quickly identify announcement types.

<link
  href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css"
  rel="stylesheet"
  type="text/css"
/>
<style>
  .new_course {
  font-size: 36px;
  font-weight: 900;
  color: yellow;
}
.update {
  font-size: 25px;
  font-weight: 700;
  color: #fff;
  background-color: red;
  padding-left: 5px;
  border-left: 5px solid yellow;
}
  </style>
<div class="row">
  <div id="menu">
    <button class="menu-button" data-for="video" id="lms-video">
      Video Block
    </button>
    <button class="menu-button" data-for="text" id="lms-text">
      Details Block
    </button>
    <button class="menu-button" data-for="assignment" id="lms-assignment">
      Assignment Block
    </button>
    <button class="menu-button" data-for="discussion" id="lms-discussion">
      Discussion Block
    </button>
    <button class="menu-button" data-for="announcement" id="lms-announcement">
      Announcement Block
    </button>
  </div>
  <div class="second-col">
    <form id="editing-blocks" name="editing-blocks" action="/submit-data" method="POST"></form>
    <button for="editing-blocks" id="submit" type="submit" disabled>Add new course</button>
  </div>
</div>

<script
  type="text/javascript"
  src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js"
></script>

JavaScript Configuration

The configuration object centralizes all editor settings, with a common section for shared options (Word import/export, AI Assist) and block-specific sections for each content type. Each block type has a tailored toolbar and feature set.When a course creator clicks a menu button, the script generates a unique ID for each new editor, creates a textarea element within the form, and initializes a Froala instance by merging the common configuration with the block-specific settings. The submit button is enabled once the first block is added, allowing creators to build multi-block courses by repeatedly clicking menu buttons.

<script>const config = {
  common: {
    //initOnClick: true,
    importFromWordMaxFileSize: 1 * 1024 * 1024,
    importFromWordFileTypesAllowed: ['docx'],
    wordExportFileName: 'myCourseName',
    aiSupplementalTermsAccepted: true,
    //....
  },
  video: {
    pluginsEnabled: [
      'video',
      'image',
      'link',
      'filestack',
      'filesManager',
      'file',
    ],
    toolbarButtons: [
      'insertVideo',
      'insertLink',
      'insertImage',
      'openFilePickerVideo',
    ],
    videoUpload: true,
    videoAllowedProviders: ['youtube', 'vimeo', 'dailymotion'],
    videoDefaultWidth: 0,
    videoMaxSize: 1024 * 1024 * 15,
    videoResponsive: true,
    videoAllowedTypes: ['mp4', 'webm'],
    //videoUploadURL: '/upload_video',

    filestackOptions: {
      //filestackAPI: '***',
      pickerOptions: {
        fromSources: [
          'local_file_system',
          'imagesearch',
          'url',
          'googledrive',
          'facebook',
        ],
      },
    },
    placeholderText: 'Embed or upload your course video here...',
  },
  text: {
    toolbarButtons: [
      'bold',
      'italic',
      'underline',
      'strikeThrough',
      '|',
      'paragraphFormat',
      'fontSize',
      'textColor',
      '|',
      'alignLeft',
      'alignCenter',
      'alignRight',
      'alignJustify',
      '|',
      'formatOL',
      'formatUL',
      'indent',
      'outdent',
      '|',
      'insertTable',
      'insertLink',
      'insertImage',
      '|',
      'undo',
      'redo',
      'html',
    ],
    placeholderText: 'Write your lesson content here...',
    heightMin: 300,
  },
  quiz: {
    toolbarButtons: [
      'bold',
      'italic',
      '|',
      'formatOL',
      'formatUL',
      '|',
      'specialCharacters',
      'insertImage',
      '|',
      'undo',
      'redo',
    ],
    placeholderText: 'Enter your quiz question or answer choices...',
    heightMin: 150,
  },
  assignment: {
    toolbarButtons: [
      'bold',
      'italic',
      'underline',
      '|',
      'formatOL',
      'formatUL',
      '|',
      'insertTable',
      'insertLink',
      'insertFile',
      '|',
      'paragraphFormat',
      'align',
      '|',
      'undo',
      'redo',
    ],
    fileUpload: true,
    fileAllowedTypes: ['application/pdf', 'application/msword'],
    placeholderText:
      'Describe the assignment instructions, rubric, and deadlines...',
    heightMin: 200,
  },
  discussion: {
    toolbarButtons: [
      'bold',
      'italic',
      '|',
      'insertLink',
      'emoticons',
      'quote',
      '|',
      'undo',
      'redo',
    ],
    placeholderText: 'Start a discussion prompt or reply here...',
    heightMin: 100,
    charCounterCount: true,
    charCounterMax: 1000,
  },
  announcement: {
    toolbarButtons: [
      'paragraphStyle',
      'paragraphFormat',
      '|',
      'bold',
      'italic',
      'underline',
      '|',
      'insertLink',
      'emoticons',
      '|',
      'alignLeft',
      'alignCenter',
      '|',
      'undo',
      'redo',
    ],
    paragraphStyles: {
      new_course: 'New Course',
      update: 'Important Update',
    },
    placeholderText: 'Write your course announcement...',
    wordCounterMax: 1500,
  },
};

const blockContainer = document.getElementById('editing-blocks');
const submitBtn = document.getElementById('submit');

let menuButtons = document.querySelectorAll('.menu-button');
menuButtons.forEach((button) => {
  button.addEventListener('click', () => {
    let action = button.getAttribute('data-for');
    const uniqueId = crypto.randomUUID();

    const sectionHTML = `
        <section class="block-item" data-type="${action}">
            <textarea id="f-${uniqueId}" name="${action}-${uniqueId}"></textarea>
        </section>
    `;
    blockContainer.insertAdjacentHTML('beforeend', sectionHTML);

    new FroalaEditor('#f-' + uniqueId, { ...config.common, ...config[action] });
    submitBtn.disabled = false;
  });
});
</script>

Together, these capabilities confirm that Froala is not just a text editor — it is a fully configurable content authoring platform that adapts to the structure and requirements of any LMS workflow.

Still need another block Type?

The Froala Editor has a powerful API that allows, as you see above, easy customization of the editor to perform different functions. Discover more than 240 options, +100 events, and +220 methods and start customizing it to your functionality. Need more? Froala is easily extended by creating custom plugins, buttons, pop-ups, and dropdown menus.

Want to style the Froala Editor to your brand style?

You can customize the Froala user interface from editing icons to completely using another color theme.

Displaying The Page Content

After creating a course and wants to display its content to the users, remember to follow the final step mentioned on the get started page.

1. Include the froala style sheet

<!-- CSS rules for styling the element inside the editor such as p, h1, h2, etc. -->
<link href="../css/froala_style.min.css" rel="stylesheet" type="text/css" />

1. Make sure that you put the edited content inside an element that has the class fr-view.

<div class="fr-view">
  <!-- Here comes the HTML edited with the Froala rich text editor. -->
</div>