Benefits of Transformation UI:

• Real-Time Editing: Users can edit images immediately after uploading.
• Professional Enhancements: Apply filters and effects easily.
• User-Friendly Interface: Simple controls make it easy for users to customize images.

5. Best Practices for Integration

To make sure your integration works smoothly and securely, follow these best practices:

Security Considerations:

• File Validation: Check files on both the client side and server side to ensure only allowed types and sizes are uploaded.
• Secure Connections: Use HTTPS to protect data during upload.
• Access Control: Make sure only authorized users can upload and access files.

Performance Optimization:

• Optimize Images: Compress and resize images before uploading to save bandwidth and improve load times.
• Lazy Loading: Load images only when needed to speed up page loads.
• Efficient Caching: Use Filestack’s CDN to deliver files quickly to users around the world.

User Experience Enhancements:

• Progress Indicators: Show upload progress bars to keep users informed.
• Error Handling: Provide clear messages if something goes wrong during upload.
• Intuitive Interface: Make the upload process simple with features like drag-and-drop.

6. Testing and Debugging

Thorough testing ensures your integration works well for all users. Here’s how to test and fix common issues:

Testing Upload Functionality:

• Different File Types: Try uploading various files like images, videos, and documents to ensure compatibility.
• Multiple Files: Check that the editor can handle multiple uploads at once.
• Edge Cases: Test with large files, slow internet connections, and unsupported file types to see how your system handles them.

Debugging Common Issues:

• Network Errors: Make sure your application can handle network problems gracefully and allow users to retry uploads.
• API Key Errors: Verify that your Filestack API key is correct and has the right permissions.
• Compatibility Issues: Ensure the integration works on different browsers and devices, and fix any issues that arise.

Conclusion

Adding a file uploader to a lightweight WYSIWYG editor like Froala can greatly enhance its functionality. By integrating Filestack, you enable users to easily upload and manage files, making content creation more efficient and engaging. This guide provided a simple, step-by-step approach to setting up this integration, ensuring that your editor remains fast and user-friendly.

Next Steps:

• Explore More Features: Look into additional options and settings in Froala and Filestack to further customize your editor.
• Optimize for Your Needs: Adjust the integration to fit the specific requirements of your project, whether it’s a blog, a content management system, or a single-page application.
• Stay Updated: Keep up with updates from Froala and Filestack to take advantage of new features and improvements.

By following these steps and best practices, you can create a robust and user-friendly content editing tool that meets the needs of modern web applications.

The Filestack events allow developers to handle different scenarios, such as when a file is selected, when the upload is in progress, or when the upload is completed.

By leveraging these events, developers can create a more seamless and user-friendly file uploading experience for your users. This can include providing feedback on the upload status, handling errors, and integrating the uploaded files into the application’s workflow. This is the power of Filestack’s events that you can leverage to enhance the file uploading experience within the Froala editor.

In a previous article, we explored the foundational events like onOpen, onFileSelected, and onCancel. Now, let’s dive deeper and uncover how the onFileUploadCancel, onFileUploadFailed, onFileUploadFinished, and other Filestack events can help you elevate your file uploading experience to new heights.

Key Takeaways

• Filestack’s robust event system allows developers to handle different scenarios in the file upload process, such as file selection, upload progress, upload completion, and errors.
• By leveraging events like onFileUploadCancel, onFileUploadFailed, onFileUploadFinished, and others, developers can create a more seamless, transparent, and user-friendly file management workflow within their Froala-powered applications.
• Implementing these Filestack events allows developers to provide visual feedback, handle errors gracefully, and integrate the uploaded files into their application’s functionality, resulting in a more polished and delightful experience for users.
• Integrating Filestack into Froala-based applications unlocks the full potential of file management, allowing developers to enhance their users’ trust and confidence in their application’s file handling capabilities.

Improving the File Upload Cancellation Experience

The onFileUploadCancel event lets you handle when a user cancels a file upload. By listening to this event, you can:

• Provide visual feedback to the user
• Update the application’s state
• Ensure a smooth experience even when a file upload is interrupted

This event gives you control to gracefully handle cancellations and maintain the coherence of your application’s file management workflow.

The onFileUploadCancel event receives an object containing the cancelled file’s metadata. You can use this information to update your UI and application state accordingly.

new FroalaEditor("div#froala-editor", {
    filestackOptions: {
        filestackAPI: 'yourAPIKey',
        pickerOptions: {
            onFileUploadCancel: (file) => {
                console.log(file.size);
            }
        }
    }
});

By handling the onFileUploadCancel event, you can create a more responsive and transparent file uploading experience for your users.

Improving the File Upload Start Experience

The onUploadStarted and onFileUploadStarted events let you know when a file upload has begun. By handling these events, you can keep users informed about the status of their uploads, which builds trust and confidence in your application’s file management capabilities.

The onUploadStarted event fires when the user clicks the upload button. It provides an array of file metadata objects. The onFileUploadStarted event fires when a file begins uploading. It provides the metadata for the file being uploaded.

new FroalaEditor("div#froala-editor", {
    filestackOptions: {
        filestackAPI: 'yourAPIKey',
        pickerOptions: {
           onUploadStarted: (files) => {
              console.log(files[0].size);
            },
           onFileUploadStarted: (file) => {
            console.log(file.size);
          },
        }
    }
});

Improving the File Upload Progress Experience

The onFileUploadProgress event allows you to track the multi-part upload progress of local files. This enables you to provide users with a visual representation of the upload status, such as progress bars or spinners. By leveraging this event, you can create a more responsive and transparent file uploading experience, building trust and confidence in your application.

The onFileUploadProgress event fires repeatedly during the file upload process. It provides the file metadata and an FSProgressEvent object containing information about the upload progress.

new FroalaEditor("div#froala-editor", {
    filestackOptions: {
        filestackAPI: 'yourAPIKey',
        pickerOptions: {
            onFileUploadProgress: (file, ProgressEvent) => {
                console.log(file.size);
                console.log(ProgressEvent);
            }
        }
    }
});

By handling the onFileUploadProgress event, you can create a more engaging and informative file uploading experience for your users.

Improving the File Upload Failed Experience

The onFileUploadFailed event lets you handle failed file uploads. This allows you to provide users with meaningful feedback and guidance. When this event fires, you can:

• Display error messages to inform users about the issue
• Suggest troubleshooting steps to help users resolve the problem
• Automatically retry the upload to recover from the failure

By handling the onFileUploadFailed event, you can significantly improve the overall user experience. This makes your application more resilient and user-friendly. It ensures users are never left in the dark when encountering upload issues, fostering trust and confidence in your application’s file management capabilities.

The onFileUploadFailed event provides the file metadata and an error object. You can use this information to give users the necessary feedback and guidance.

new FroalaEditor("div#froala-editor", {
    filestackOptions: {
        filestackAPI: 'yourAPIKey',
        pickerOptions: {
            onFileUploadFailed: (file, error) => {
                console.log(file.size);
                console.log(error);
            }
        }
    }
});

By handling the onFileUploadFailed event, you can create a more robust and user-friendly file uploading experience.

Improving the Successful Uploads Experience

The onFileUploadFinished event lets you handle successful file uploads. When this event fires, you can:

• Update your application’s state to reflect the new file
• Integrate the uploaded file into your workflow
• Provide visual feedback to the user, such as a success message

This event allows you to seamlessly incorporate the uploaded files into your application. This creates a cohesive and efficient file management experience for your users. By handling onFileUploadFinished, you can ensure your application responds effectively to successful file uploads, enhancing the overall user experience.

The onFileUploadFinished event provides the uploaded file’s metadata, which you can use to update your application accordingly.

Explain

new FroalaEditor("div#froala-editor", {
    filestackOptions: {
        filestackAPI: 'yourAPIKey',
        pickerOptions: {
            onFileUploadFinished: (file) => {
                console.log(file.size);
            }
        }
    }
});

You can create a more polished and user-friendly file uploading experience by leveraging the event.

Improving the Upload End Experience

The onUploadDone event allows you to handle the completion of a file upload, whether successful or not. This event gives you the opportunity to perform cleanup, update your application’s state, or trigger additional actions based on the upload outcome. By using this event, you can ensure a seamless and comprehensive file management experience, allowing users to confidently interact with your application’s file handling.

The onUploadDone event receives an object containing two arrays: filesFailed and filesUploaded. The filesFailed array contains metadata for failed uploads, while the filesUploaded array contains metadata for successful uploads. You can use this information to take appropriate actions, such as displaying error messages for failed uploads or integrating the successful uploads into your application.

new FroalaEditor("div#froala-editor", {
    filestackOptions: {
        filestackAPI: 'yourAPIKey',
        pickerOptions: {
          onUploadDone: (files) => {
             console.log(files.filesUploaded[0].size);
          },
        }
    }
});

How Filestack Integration in Froala Editor Works?

The Filestack integration in Froala Editor provides a straightforward way to enable powerful file management and upload capabilities. This integration was introduced in Froala V4.3, making it easy for developers to leverage Filestack’s features.

To get started, you’ll need a free Filestack API key. Once you have that, you can follow the steps outlined in the Filestack integration guide for Froala. This guide will walk you through the necessary setup and configuration to integrate Filestack within your Froala-powered application.

With the Filestack plugin, Froala developers can unlock a wide range of file management features, including:

• Seamless file uploads
• Robust file processing capabilities
• Advanced file transformation options
• Secure file storage and delivery

By integrating Filestack, Froala developers can enhance the file handling experience for their users, creating a more polished and feature-rich application.

Conclusion

In this article, we demonstrate how Filestack’s robust event system can help Froala developers elevate the file uploading experience for their users. By leveraging events like onFileUploadCancel, onFileUploadFailed, onFileUploadFinished, and others, you can create a more seamless, transparent, and user-friendly file management workflow within your Froala-powered applications.

Implementing these Filestack events allows you to provide visual feedback, handle errors gracefully, and integrate the uploaded files into your application’s functionality. This results in a more polished and delightful experience for your users, building their trust and confidence in your application’s file handling capabilities.

If you’re a Froala developer looking to enhance your file uploading experience, we encourage you to explore the power of Filestack’s events. Integrate Filestack into your Froala-based applications and unlock the full potential of file management for your users. Get started with Filestack today and take your Froala-powered experiences to new heights!

Filestack now has official integration with Froala, offering many customization options that allow developers to create a truly seamless and intuitive file uploading process within the Froala editor tailored for your users.

We explored some of the Filestack File Picker customization options available to developers before. In this second part of the series, we will explore additional customization options related to events, uncovering how you can customize the file uploading experience from start to finish – from the moment the user opens the picker to handle the successful (or failed) upload.

Let’s delve into these customization features that help you create a smooth and intuitive file management workflow within your Froala-powered applications, significantly improving user experience.

Key Takeaways:

1. Filestack provides a range of customization options and events that allow developers to create a highly responsive and tailored file picker experience within Froala-powered applications.
2. The onOpen event can be used to enhance the user experience when the File Picker UI mounts, such as displaying a custom loading indicator or updating the UI.
3. The onFileSelected event enables developers to validate selected files, reject files that don’t meet certain criteria, and even modify the file name if needed.
4. The onFileCropped event provides metadata about the cropped image, allowing developers to perform additional processing before inserting it into the Froala editor.
5. The onCancel event can be used to customize the user experience when file uploads are cancelled, ensuring the application remains responsive and user-friendly.
6. The onClose event triggers when the File Picker UI is exited, providing an opportunity to perform any necessary cleanup or additional actions.

Customize the File Picker Opening Experience

Filestack’s onOpen event triggers when the File Picker UI mounts. You can use this event to enhance the user experience. For example, you can display a custom loading indicator or update the UI to provide feedback.

new FroalaEditor("div#froala-editor", {
    filestackOptions: {
        filestackAPI: 'yourAPIKey',
        pickerOptions: {
            onOpen: filepicker => {
                console.log(filepicker);
            }
        }
    }
});

The onOpen callback receives the PickerInstance interface, which provides the following methods:

• cancel() Cancels any ongoing uploads. This operation is idempotent and returns a Promise.

  new FroalaEditor("div#froala-editor", {
      filestackOptions: {
          filestackAPI: 'yourAPIKey',
          pickerOptions: {
              onOpen: PickerInstance => {
                  //Cancel picker uploads. 
                  PickerInstance.cancel();
              }
          }
      }
  });
  

• close() Closes the File Picker. This operation is idempotent and returns a Promise.

  new FroalaEditor("div#froala-editor", {
      filestackOptions: {
          filestackAPI: 'yourAPIKey',
          pickerOptions: {
              onOpen: PickerInstance => {
                  //Close the File Picker.
                  PickerInstance.close();
              }
          }
      }
  });
  

• open() Opens the File Picker. This operation is idempotent.
• crop(urls) Specifies a list of file URLs to open in the Picker for cropping.

  new FroalaEditor("div#froala-editor", {
  filestackOptions: {
          filestackAPI: 'yourAPIKey',
          pickerOptions: {
              onOpen: PickerInstance => {
                  const urls = [
                      'https://d1wtqaffaaj63z.cloudfront.net/images/fox_in_forest1.jpg',
                      'https://d1wtqaffaaj63z.cloudfront.net/images/sail.jpg',
                  ];
                  PickerInstance.crop(urls);
              }
          }
      }
  });
  

Leverage the onOpen event and the PickerInstance methods to create a more engaging user experience.

Handling User Selected Files

The onFileSelected event in Filestack triggers whenever a user selects a file. You can use this event to validate the selected file and, if necessary, reject the selection by throwing an error. The error message will be displayed to the user as an alert.

For example, you can reject files that exceed a certain size limit:

new FroalaEditor("div#froala-editor", {
    filestackOptions: {
        filestackAPI: 'yourAPIKey',
        pickerOptions: {
            onFileSelected: file => {
                if (file.size > 1000 * 1000) {
                    throw new Error('File too big, select something smaller than 1MB');
                }
            }
        }
    }
});

Developers can use this event to change the selected file name if it’s uploaded from the local source.

new FroalaEditor("div#froala-editor", {
    filestackOptions: {
        filestackAPI: 'yourAPIKey',
        pickerOptions: {
            onFileSelected: file => {
                // It's important to return a new file by the end of this function.
                return { ...file, name: 'foo' };
            }
        }
    }
});

The onFileSelected event also supports asynchronous validation logic. You can return a Promise from the callback function and then resolve or reject the Promise as needed:

new FroalaEditor("div#froala-editor", {
    filestackOptions: {
        filestackAPI: 'yourAPIKey',
        pickerOptions: {
            onFileSelected: file => {
                return new Promise((resolve, reject) => {
                    // Do something async
                    resolve();
                    // Or reject the selection with reject()
                  });
            }
        }
    }
});

By leveraging the onFileSelected event, you can create a more robust and user-friendly file selection experience within your Froala-powered applications.

Handling Cropped Files

When a user uploads an image using the File Picker, Filestack displays a simple image editor. This editor allows the user to crop, circle crop, and rotate the image.

Filestack triggers the onFileCropped event when the user crops the image. This event provides an object with the file metadata, such as the file size. You can use this metadata to perform additional processing on the cropped image before inserting it into the Froala editor.

new FroalaEditor("div#froala-editor", {
    filestackOptions: {
        filestackAPI: 'yourAPIKey',
        pickerOptions: {
            onFileCropped : (file) => {
                console.log(file.size);
            }
        }
    }
});

The onFileCropped event provides the necessary information to handle the cropped image, allowing you to integrate the cropping functionality seamlessly into your application’s workflow.

Customize User Experience When Files Get Cancelled

Filestack triggers the onCancel event when all uploads in the File Picker are cancelled. This event receives an object containing the file’s metadata.

new FroalaEditor("div#froala-editor", {
    filestackOptions: {
        filestackAPI: 'yourAPIKey',
        pickerOptions: {
            onCancel: PickerUploadDoneCallback => {
                console.log(PickerUploadDoneCallback);
            }
        }
    }
});

Handling the onCancel event gives you the flexibility to customize the user experience when the file upload is interrupted, ensuring your application remains responsive and user-friendly. By providing feedback and handling the cancellation scenario, you can create a more engaging and intuitive file management workflow within your Froala-powered applications. This helps to enhance the overall user experience and ensure your users feel in control of the file upload process, even when they choose to cancel it.

Customize the File Picker Closing Experience

Filestack triggers the onClose event when the File Picker UI is exited.

new FroalaEditor("div#froala-editor", {
    filestackOptions: {
        filestackAPI: 'yourAPIKey',
        pickerOptions: {
            onClose: () => {
                console.log('File Picker closed');
            }
        }
    }
});

Looking For Other Events?

Beyond the events mentioned, Filestack provides a range of other events such as onFileUploadCancel, onFileUploadFailed, onFileUploadFinished, onFileUploadProgress, onFileUploadStarted, onUploadDone, and onUploadStarted that you can leverage to customize the file uploading experience. Refer to the Filestack documentation for a comprehensive list of available options and their usage.

Conclusion

Filestack File Picker is a powerful tool for handling file uploads. Users appreciate its ease of use, support for various upload sources, dependability, and straightforward cloud storage integration. Filestack offers many customization options and events that allow developers to create a highly responsive and tailored file picker experience.

From validating file selections to handling cropped images and managing the overall file upload workflow, these events empower you to customize the user experience to your specific needs. Explore the full range of Filestack events and integrate them seamlessly into your application’s logic. This ensures a smooth and intuitive file management process for your users.

If you’re looking to enhance the file-uploading experience in your Froala-powered applications, try the Filestack integration today. Its robust set of customization features will help you create a seamless and user-friendly file management workflow.

Get your Filestack API here for free.

The Filestack File Picker offers a user-friendly interface that improves the uploading file experience. By integrating Filestack, Froala users can now leverage its robust file management capabilities to simplify the entire upload process, delivering a much smoother experience for their users.

One of the advantages of Filestack File Picker is its many customization options, such as restricting file types and setting upload size limits. In this article, we’ll dive into some of the customization options available to Froala users when integrating the Filestack File Picker.

By leveraging these powerful features, you can create a truly seamless and intuitive file management workflow within your Froala-powered applications, taking the user experience to new heights.

How Can I Customize The File Picker Within the Froala Editor?

To start using Filestack File Picker for file uploading within the Froala editor, you have to include its scripts and stylesheet files within your project and configure the filestackOptions.filestackAPI option with a valid API key which you can get from Filestack DevPortal for free.

Here’s an example of what your HTML code might look like:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" name="viewport" content="width=device-width, height=device-height, initial-scale=1.0,
            maximum-scale=1.0" />
        <link href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css" rel="stylesheet"
            type="text/css" />
              <link rel="stylesheet" href="https://static.filestackapi.com/transforms-ui/2.x.x/transforms.css" />

    </head>
    <body>
        <div id="froala-editor"> </div>
        <script type="text/javascript"
            src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js"></script>
         <script src="https://static.filestackapi.com/filestack-js/3.32.0/filestack.min.js"></script>
  <script src="https://static.filestackapi.com/filestack-drag-and-drop-js/1.1.1/filestack-drag-and-drop.min.js"></script>
  <script src="https://static.filestackapi.com/transforms-ui/2.x.x/transforms.umd.min.js"></script>
        
        <script>
                new FroalaEditor("div#froala-editor",{
                  filestackOptions{
                    filestackAPI: 'yourAPIKey',
                  }
                });
        </script>
        </body>
</html>

To customize the File Picker, you can add your custom configuration to the filestackOptions.pickerOptions option. In this case, the Froala initialization code would be similar to:

  new FroalaEditor("div#froala-editor",{
    filestackOptions{
      filestackAPI: 'yourAPIKey',
      pickerOptions: {
        transformationsUI: true
      }
    }
  });

Customization Options

Restrict File Types

You can restrict the file types that users can upload by setting the accept option within the  filestackOptions.pickerOptions configuration. For example, to only allow image files, you can use accept: 'image/*'. You can also specify multiple file types by providing an array, such as accept: ['image/*', 'video/*', 'application/pdf']. This ensures that users can only upload the file types that are relevant to your application, enhancing the overall user experience. The formats that you can assign through this option are:

• .pdf <- accept PDF files.
• image/jpeg <- any MIME type commonly known by browsers
• image/* <- accept all types of images
• video/* <- accept all types of video files
• audio/* <- accept all types of audio files
• application/* <- accept all types of application files
• text/* <- accept all types of text files

  new FroalaEditor("div#froala-editor",{
    filestackOptions{
      filestackAPI: 'yourAPIKey',
      pickerOptions: {
        accept: ['image/*', 'video/*']
      }
    }
  });

If you need to restrict other file types, you can use the acceptFn option which allows you to provide a custom function to determine which files are accepted. This gives you full control over the file type validation process.

The acceptFn has two parameters:

• PickerFileMetadata
• PickerAcceptFnOptions

And you have to return the Promise<string> .

  new FroalaEditor("div#froala-editor",{
    filestackOptions{
      filestackAPI: 'yourAPIKey',
      pickerOptions: {
        acceptFn: (file, options) => {
           return options.mimeFromMagicBytes(file.originalFile).then((res) => { // we can check mimetype from magic bytes
             //console.log(options.mimeFromExtension(file.originalFile.name)); // or check extension from filestack extensions database
             // throw new Error('Cannot accept that file') // we can throw exception to block file upload
             // return Promise.reject('Cannot accept that file'') // or reject a promise
             return Promise.resolve();
           });
        }
      }
    }
  });

By leveraging the acceptFn, Froala users can ensure that only the appropriate files are uploaded, maintaining the integrity and consistency of the content within their Froala-powered applications. This level of customization empowers them to tailor the file upload experience to their specific needs, enhancing the overall user experience.

Restrict File Size

You can also set upload size limits using the maxSize option within the filestackOptions.pickerOptions configuration. This allows you to restrict the maximum file size that users can upload, helping to manage storage and bandwidth constraints. For example, to set a 10MB limit, you can use maxSize: 10 * 1024 * 1024. This ensures that users cannot upload files that exceed your specified size limit, improving the overall file management process.

  new FroalaEditor("div#froala-editor",{
    filestackOptions{
      filestackAPI: 'yourAPIKey',
      pickerOptions: {
        maxSize: 10 * 1024 * 1024
      }
    }
  });

By setting appropriate size limits, you can ensure that the file upload process aligns with your application’s requirements and provides a seamless user experience.

Restrict Allowed Image Dimensions

You can also set accepted image dimensions using the imageDim option within the filestackOptions.pickerOptions configuration. This allows you to specify the exact width and height for uploaded JPEG, PNG, and BMP images, ensuring that they meet your application’s requirements.

Local and cropped images will be resized (upscaled or downscaled) to the specified dimensions before uploading. The original height to width ratio is maintained. To resize all images based on the width, set [width, null], e.g. [800, null]. For the height set [null, height], e.g. [null, 600].

  new FroalaEditor("div#froala-editor",{
    filestackOptions{
      filestackAPI: 'yourAPIKey',
      pickerOptions: {
        imageDim: [800, 600]
      }
    }
  });

This helps maintain visual consistency and quality within your Froala-powered content.

Instead, if you prefer to give your users some freedom, you can use imageMax and imageMin options where imageMax allows you to set the maximum allowed dimensions. Images bigger than the specified dimensions will be resized to the maximum size while maintaining the original aspect ratio.

imageMin allows you to set the minimum allowed image dimensions. Images smaller than the specified size will be upscaled to the minimum size while maintaining the original aspect ratio.

 new FroalaEditor("div#froala-editor",{
    filestackOptions{
      filestackAPI: 'yourAPIKey',
      pickerOptions: {
        imageMax: [1800, 1600],
        imageMin: [800, 600],

      }
    }
  });

This gives users more flexibility while still ensuring the images meet your application’s requirements. By leveraging these options, you can strike a balance between maintaining visual consistency and providing users with a more open file upload experience.

Restrict Upload Number

You can also restrict the number of files that users can upload at once by setting the maxFiles option within the filestackOptions.pickerOptions configuration. This helps you manage the upload process and ensure that users don’t overwhelm your application with too many files at once. For example, to limit the number of files to 5, you can use maxFiles: 5.

 new FroalaEditor("div#froala-editor",{
    filestackOptions{
      filestackAPI: 'yourAPIKey',
      pickerOptions: {
         maxFiles: 5,
         
      }
    }
  });

Additionally, you can set the minimum number of files that users must upload at once by setting the minFiles option within the filestackOptions.pickerOptions configuration. This can be useful if your application requires a certain number of files to be uploaded together, such as multiple images for a product listing. For example, to require at least 3 files to be uploaded, you can use minFiles: 3.

 new FroalaEditor("div#froala-editor",{
    filestackOptions{
      filestackAPI: 'yourAPIKey',
      pickerOptions: {
         maxFiles: 5,
         minFiles: 3
      }
    }
  });

By setting both maxFiles and minFiles, you can strike a balance between providing flexibility and maintaining control over the file upload process, ensuring that your Froala-powered application meets your specific requirements.

By default, the upload process didn’t start until the user hit the “Upload“ button. If you want to start uploading automatically when maxFiles is hit, set the startUploadingWhenMaxFilesReached option to true.

Restrict Concurrency Upload Number

You can also restrict the number of concurrent file uploads by customizing the concurrency option within the filestackOptions.pickerOptions configuration, which is by default set to 4. This allows you to control the maximum number of files that can be uploaded simultaneously, preventing your application from being overwhelmed and ensuring a smooth upload experience. By setting an appropriate value for concurrency, you can balance the need for efficient file uploads with the available resources and bandwidth of your application.

 new FroalaEditor("div#froala-editor",{
    filestackOptions{
      filestackAPI: 'yourAPIKey',
      pickerOptions: {
         concurrency: 2,
      }
    }
  });

Restrict Video Resolution

You can also restrict the video resolution of uploaded files using the videoResolution option within the filestackOptions.pickerOptions configuration. This allows you to specify the maximum width and height for video files to one of these values “320×240”, “640×480” or “1280×720”, ensuring that they meet your application’s requirements. By default, it is "640x480". By setting appropriate limits, you can optimize storage, bandwidth, and playback performance, while maintaining the desired visual quality for your Froala-powered content.

 new FroalaEditor("div#froala-editor",{
    filestackOptions{
      filestackAPI: 'yourAPIKey',
      pickerOptions: {
         videoResolution: "1280x720",
      }
    }
  });

Customize Upload Sources

You can also specify the upload sources that users can choose from by setting the fromSources option within the filestackOptions.pickerOptions configuration. This allows you to restrict the file selection to specific sources, such as local device storage, cloud storage providers, or social media platforms. For example, to only allow users to upload files from their local device and Google Drive, you can use fromSources: ['local_file_system', 'google_drive']. This helps streamline the file upload process and ensures that users can only access the file sources that are relevant to your application. Valid ones are:

• local_file_system – Default
• url – Default
• imagesearch – Default
• facebook – Default
• instagram – Default
• googledrive – Default
• dropbox – Default
• webcam – Uses device menu on mobile. Not currently supported in Safari and IE.
• video – Uses device menu on mobile. Not currently supported in Safari and IE.
• audio – Uses device menu on mobile. Not currently supported in Safari and IE.
• box
• github
• gmail
• googlephotos
• onedrive
• onedriveforbusiness
• customsource – Configure this in your Filestack Dev Portal.
• unsplash

 new FroalaEditor("div#froala-editor",{
    filestackOptions{
      filestackAPI: 'yourAPIKey',
      pickerOptions: {
         fromSources: ['local_file_system', 'google_drive'],
      }
    }
  });

Cleaning JPEG Image EXIF

You can also configure Filestack to automatically remove EXIF data from JPEG images during the upload process. This can be useful for reducing the file size and ensuring that sensitive metadata, such as location information, is not inadvertently included in the uploaded images. To enable this feature, you can set the cleanupImageExif option within the filestackOptions.pickerOptions configuration to true.

 new FroalaEditor("div#froala-editor",{
    filestackOptions{
      filestackAPI: 'yourAPIKey',
      pickerOptions: {
         cleanupImageExif: true,
      }
    }
  });

This option also offers the ability to keep image orientation by assigning it to an object and setting a keepOrientation property to true. Moreover, you can keep image color profiles by setting keepICCandAPP property to true.

 new FroalaEditor("div#froala-editor",{
    filestackOptions{
      filestackAPI: 'yourAPIKey',
      pickerOptions: {
         cleanupImageExif: {
           keepOrientation: true,
           keepICCandAPP: false
         },
      }
    }
  });

By doing so, you can streamline the file upload process and maintain better control over the data being stored in your Froala-powered application.

Enable Transformation UI

You can also enable the Transformation UI to allow users to perform advanced image editing, including filters and overlay text, alongside basic operations like cropping and rotating, directly in the file picker. To enable this feature, you can set the transformationsUI option within the filestackOptions.pickerOptions configuration to true.

This provides users with a more robust file editing experience, allowing them to customize their uploads before they are sent to your application.

  new FroalaEditor("div#froala-editor",{
    filestackOptions{
      filestackAPI: 'yourAPIKey',
      pickerOptions: {
        transformationsUI: true
      }
    }
  });

Conclusion

In this article, we’ve explored the powerful customization options available when integrating the Filestack File Picker into your Froala-powered applications. By leveraging features like file type restrictions, upload size limits, image dimension controls, and more, you can create a truly seamless and intuitive file management workflow for your users.

These customization capabilities empower Froala users to tailor the file upload experience to their specific needs, ensuring the integrity and consistency of the content within their applications. As we continue to explore the Filestack integration in future articles, we’ll cover File Picker events and the user interface customization options.

To get started, sign up for a free Filestack account today and start enhancing your Froala-powered applications with a truly customized file upload experience. With Filestack’s robust file management capabilities and Froala’s industry-leading rich text editing features, you can take your content creation and management to new heights.

Get your Filestack API here for free.

Froala integrated Filestack to bring you a powerful, user-friendly file uploader that goes way beyond basic image cropping and resizing. With the Filestack integration, you can now transform your uploaded images in ways you never thought possible – right from within the Froala editor.

Imagine being able to apply eye-catching filters, adjust the brightness and contrast, or even swap out the background of your images, all with just a few clicks. Sounds intriguing? In this post, we’ll dive into the various image transformation options available through the Filestack TUI and show you how to unleash your creative side while building content for your Froala-powered website or app.

By the end, you’ll be equipped with the knowledge to take your visual content to the next level and leave your readers thoroughly impressed. So, what are you waiting for? Let’s get started!

Getting Started with the Transformation UI

To use the Transformation UI within the Froala editor, you’ll need to follow a few simple steps:

1. Get a Filestack API Key: Filestack is the service that powers the Transformation UI. Get a free Filestack API key now.
2. Include the Required Scripts and Stylesheets: In your HTML file, you’ll need to include the Filestack JavaScript library, the Transformation UI scripts, and the Transformation UI stylesheet. This will give you access to all the powerful image editing tools.
3. Configure the Froala Editor: When you initialize the Froala editor, you’ll need to provide your Filestack API key in the filestackOptions.filestackAPI setting.

Here’s an example of what your HTML code might look like:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" name="viewport" content="width=device-width, height=device-height, initial-scale=1.0,
            maximum-scale=1.0" />
        <link href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css" rel="stylesheet"
            type="text/css" />
              <link rel="stylesheet" href="https://static.filestackapi.com/transforms-ui/2.x.x/transforms.css" />

    </head>
    <body>
        <div id="froala-editor"> </div>
        <script type="text/javascript"
            src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js"></script>
         <script src="https://static.filestackapi.com/filestack-js/3.32.0/filestack.min.js"></script>
  <script src="https://static.filestackapi.com/filestack-drag-and-drop-js/1.1.1/filestack-drag-and-drop.min.js"></script>
  <script src="https://static.filestackapi.com/transforms-ui/2.x.x/transforms.umd.min.js"></script>
        
        <script>
                new FroalaEditor("div#froala-editor",{
                  filestackOptions{
                    filestackAPI: 'yourAPIKey',
                  }
                });
        </script>
        </body>
</html>

With this setup, an “Image Transformation” button will appear when you click on an image uploaded using Filestack. Clicking this button will open the Transformation UI, allowing you to edit the image in various ways before inserting it into the Froala editor.

If you want the Transformation UI to be available immediately after uploading an image using the “Filestack Upload” button, you can enable the transformationsUI option within the filestackOptions.pickerOptions setting.

        <script>
                new FroalaEditor("div#froala-editor",{
                  filestackOptions{
                    filestackAPI: 'yourAPIKey',
                    pickerOptions: {
                      transformationsUI: true,
                    }
                  }
                });
        </script>

Now when you click “Upload with Filestack”, you can select an image to upload. Once the image is uploaded, a thumbnail will appear, and an “Edit” button will appear on the right. Clicking the “Edit” button will open the transformation UI, allowing you to edit the image before inserting it into the editor.

If you are using a front-end framework, check the following guide:

• Filestack integration in React
• Filestack integration in Angular
• Filestack integration in Vue

Explore Transformation UI: A Powerful Image Editing Tool

The Transformation UI is an intuitive image editing tool that appears when you click on an image uploaded using Filestack. This tool allows you to make various changes and enhancements to your images right within the Froala editor.

When you open the Transformation UI, you’ll see the image displayed in the center of the editor. At the top, you’ll find a few helpful controls:

• Undo Button: On the left, you’ll see an “Undo” button that allows you to revert any changes you’ve made to the image.
• Zoom Options: In the center, you’ll find zoom controls that let you adjust the size of the image within the editor.
• Cancel and Save Buttons: On the left, you’ll see a “Cancel” button to close the editor without saving any changes, and a “Save” button to apply your edits and insert the updated image into the Froala editor.

At the bottom of the Transformation UI, you’ll find a variety of transformation options, including filters, adjustments, and overlays. Simply click on the option you want to apply it to the image. The changes will be shown in real time, so you can preview the results before finalizing your edits.

This powerful image editing tool empowers your users to create visually stunning content with ease. By allowing them to enhance and transform their images right within the Froala editor, you’re giving them the ability to elevate the visual appeal of their content and captivate their audience.

Available Transformation Options

The Transformation UI within the Froala editor provides a range of powerful tools to enhance your images. Let’s dive into the key features:

Crop

The Crop tool allows you to select a specific area of the image and remove the unwanted parts. This is useful for focusing the viewer’s attention on the most important part of the image. You can adjust the crop box by dragging the corners or edges, and the image will update in real-time. Once you’re satisfied with the crop, simply click the “Save” button to apply the changes.

Froala offers several pre-defined crop options:

• Portrait (16:9): This is ideal for social media posts, as it ensures images fit seamlessly on platforms like Instagram or Facebook.
• Square: A square-shaped crop that you can resize and position as needed.
• Circle: A circular crop that always maintains a perfect circle shape as you resize and position it.
• Custom: A rectangular crop that you can freely resize and position to suit your needs.

Resize

Resizing images is important for optimizing file size, fitting specific layouts, and ensuring consistent quality across devices. The Resize tool in the Transformation UI allows you to easily adjust the width and height of the image, while maintaining the original aspect ratio or changing it as needed. This gives you precise control over the final image size, helping you create a cohesive and visually appealing layout within the Froala editor.

Flip and Rotate

Users often need to flip or rotate images to correct the orientation or achieve a specific visual effect. The Transformation UI provides four options for this:

• Flip horizontally
• Flip vertically
• Rotate 90 degrees clockwise
• Rotate 90 degrees counter-clockwise

These tools empower users to optimize their images and ensure they are displayed correctly within the Froala editor.

Filters

The Transformation UI offers a variety of filters that can be applied to your images to alter their visual appeal. These filters range from subtle adjustments to dramatic effects, giving you the flexibility to find the perfect look for your content. You can experiment with different filters, adjust their intensity, and preview the changes in real time before saving the final image.

Enhance Presets

This feature smartly analyzes a photo and performs color correction and other enhancements to improve the overall quality of the image. You can choose from multiple presets to achieve the best results. Currently, it is available only when you open the Transformation UI from the File Picker. Here are the presets available with their purpose:

Image Adjustments

This feature allows users to adjust different image parameters to modify and enhance the visual appearance of an image. Here’s a list of different parameters you can adjust directly within the editor:

• Blur: Softens the image, reducing detail and sharpness.
• Brightness: Adjusts the overall lightness or darkness of the image.
• Contrast: Alters the difference between the light and dark areas of the image.
• Gamma: Adjusts the midtones of the image without affecting the shadows and highlights.
• Hue: Changes the overall color tone of the image.
• Noise: Adds or reduces random variations of brightness or color information in the image.
• Pixelate: This creates a mosaic effect by enlarging the pixels, making the image appear blocky.
• Saturation: Adjusts the intensity of the colors in the image.

These adjustments can be used individually or in combination to achieve the desired visual effect.

Overlay Text

The Transformation UI also allows users to overlay text on their images. This feature is useful for adding captions, titles, or other textual elements to enhance the visual communication of the content.

Users can choose from a variety of font styles, sizes, and colors, and position the text anywhere on the image. This empowers content creators to elevate their visuals and convey their message more effectively.

The text overlay tool provides a seamless way to integrate text and imagery, creating a cohesive and visually appealing final product.

Overlay Image

The Transformation UI also allows users to overlay additional images on top of the main image. This can be useful for adding logos, watermarks, or other visual elements to the image. Users can resize, position, rotate, and adjust the opacity of the overlaid image to achieve the desired effect.

This feature provides a flexible way to enhance the visual impact and branding of the content within the Froala editor. The real-time preview ensures users can experiment with different overlay options and find the perfect combination.

Image Border

The Transformation UI also offers the ability to add a border around the image. Users can customize the border width, color, and style to create a polished, professional visual look.

This feature is particularly useful for framing images, separating them from the surrounding content, or adding a decorative touch. The real-time preview allows users to experiment with different border options and find the perfect balance between the image and its presentation within the Froala editor.

Elevate Your Visual Content with Froala’s Transformation UI

The Filestack integration within the Froala editor has unlocked a whole new world of creative possibilities for content creators. With the powerful Transformation UI, you now have the ability to enhance your images in ways you never thought possible – right from within your content editor.

From applying eye-catching filters and adjusting brightness and contrast, to swapping backgrounds and overlaying text and graphics, the Transformation UI puts a suite of advanced image editing tools at your fingertips. This empowers you to elevate the visual appeal of your content and leave your readers thoroughly impressed.

So what are you waiting for? Take your visual content to new heights by exploring the Transformation UI within the Froala editor. Unlock your creative potential, captivate your audience, and watch your engagement soar. Get started with the Filestack integration today and see the difference it can make for your Froala-powered website or app.

Get your Filestack API here for free.

Froala’s latest version, V4.3, includes a new plugin for integrating with Filestack. This makes it easy to upload files to your Dropbox storage directly from the Froala editor. With just a few simple configuration steps, you can start uploading files without leaving the editor.

This integration saves development time and cost. Developers can focus on building the core functionality of their application, rather than spending time implementing complex file upload and storage solutions.

It also saves users time and effort by eliminating the need to switch between different applications or interfaces to manage files. Additionally, it ensures that uploaded files are securely stored in the user’s Dropbox account, providing an extra layer of data protection.

Overall, the Froala-Filestack-Dropbox integration offers a powerful and efficient way to incorporate file management into your Angular-based applications.

Let’s explore how this integration can be set up and leveraged to enhance your Angular application’s functionality. We’ll cover the necessary steps to configure Filestack, connect it to Dropbox, and seamlessly integrate it with the Froala rich text editor. By the end, you’ll have a robust file management solution that provides a seamless user experience within your Angular app.

Step 1: Create a Filestack Account

You will need a Filestack account and obtain an API key for successful uploads. You can create a free Filestack account, which provides a limited amount of bandwidth, uploads, and transformations, as well as access to Filestack’s internal S3 storage. To upload files to Dropbox, you’ll need a paid plan. Start a free trial of a Filestack plan that fits your needs.

Step 2: Dropbox Configuration

Just four simple steps to ensure that files uploaded through the file picker will be stored in your Dropbox account.

1. You need an existing Dropbox application or you can create a new one.
2. Make sure to enable additional development users.

3. Generate an OAuth2 access token that will be added to the Dropbox storage section in the developer portal.

4. Add the necessary policies and test the Storage Keys in the Developer Portal to ensure the connection between our API and your Cloud Storage is set.

Step 3: Create a new Angular project

Skip this step if you are installing the editor in an existing Angular project.

To create a new Angular project, you can use the Angular CLI. Open a terminal or command prompt, navigate to the desired directory, and run the following command:

ng new filestack-integration

This will create a new Angular project named “my-app” and guide you through the setup process, including options for routing and stylesheet format.

When prompted “Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? (y/N)“, answer with “N”.

Once the project is created, you can navigate to the project directory:

cd filestack-integration

Step 4: Install Froala Angular SDK

To integrate the Froala rich text editor into your Angular application, you’ll need to install the Froala Angular SDK. You can do this by running the following command in your project’s root directory:

npm install angular-froala-wysiwyg --save

This will install the necessary packages and dependencies.

Step 5: Include the Froala Stylesheets

To include the necessary Froala stylesheets, add the following lines to your `angular.json` file, within the `styles` array:

"node_modules/froala-editor/css/froala_editor.pkgd.min.css",

"node_modules/froala-editor/css/froala_style.min.css"

This will ensure that the Froala editor is properly styled within your Angular application.

Step 6: Create Editor Component

In this step, we will create a custom component to handle the Froala editor and Filestack integration. This component will provide a user-friendly interface for uploading files to Dropbox directly from the rich text editor. By encapsulating the integration logic within a dedicated component, you can easily reuse and maintain the editor functionality across your Angular application.

Create a new component using the Angular CLI:

ng generate component editor

This will create a new component called EditorComponent in your project.

Step 7: Import the Froala Editor Modules

Open the editor.component.ts file and import the necessary Froala modules.

import { Component } from '@angular/core';
import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-wysiwyg';
import 'froala-editor/js/plugins.pkgd.min.js';

@Component({
  selector: 'app-editor',
  standalone: true,
  imports: [FroalaEditorModule, FroalaViewModule],
  templateUrl: './editor.component.html',
  styleUrl: './editor.component.css'
})
export class EditorComponent {

}

Step 8: Include Filestack Files

Open index.html and include the required Filestack files to open the file picker and Transformation UI.

<link rel="stylesheet" href="https://static.filestackapi.com/transforms-ui/2.x.x/transforms.css" />

<script src="https://static.filestackapi.com/filestack-js/3.32.0/filestack.min.js"></script>

<script src="https://static.filestackapi.com/filestack-drag-and-drop-js/1.1.1/filestack-drag-and-drop.min.js"></script>

<script src="https://static.filestackapi.com/transforms-ui/2.x.x/transforms.umd.min.js"></script>

Step 9: Configure the Froala Component

Open the editor.component.ts file and add the required editor configuration within the EditorComponent class. To complete the Filestack integration, consider setting the following options and events:

• filestackOptions.filestackAPI This is where you should add your Filestack API key.
• filestackOptions.uploadToFilestackOnly (Optional) Set this option to true if you want to handle all file uploads by Filestack.
• filestackOptions.pickerOptions (Optional) Use this option to customize the Filestack Picker.
• filestack.filestackPickerOpened (Optional) This event is triggered when the Filestack File Picker is opened.
• filestack.filestackPickerClosed (Optional) This event is triggered when the Filestack File Picker is closed.
• filestack.uploadedToFilestack (Optional) This event is triggered when files are successfully uploaded to your storage.
• filestack.uploadFailedToFilestack (Optional) This event is triggered when a file upload fails. You can use this event to run a custom function to handle the failed upload.

import { Component } from '@angular/core';
import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-wysiwyg';
import 'froala-editor/js/plugins.pkgd.min.js';

@Component({
  selector: 'app-editor',
  standalone: true,
  imports: [FroalaEditorModule, FroalaViewModule],
  templateUrl: './editor.component.html',
  styleUrl: './editor.component.css'
})
export class EditorComponent {
  public editorContent = "Filestack is a simple file uploader & powerful APIs to upload, transform & deliver any file into your app.";
  public options: Object = {

    heightMin: 300,
    filestackOptions: {
      uploadToFilestackOnly: true,
      filestackAPI: "AvaZ2E0mxRdGPjgMAbus8z",
    },

    events: {
      'filestack.uploadedToFilestack': function () {
        console.log("Callback is triggered for uploaded to filestack ",)
      },

      'filestack.filestackPickerOpened': function () {
        console.log("Callback is triggered for picker opened ",)
      },

      'filestack.filestackPickerClosed': function () {
        console.log("Callback is triggered for picker closed ",)
      },

      'filestack.uploadFailedToFilestack': function () {
        console.log("Callback is triggered for filestack failed ",)
      },

    },
  };
}

Then add <div [froalaEditor]="options" [(froalaModel)]="editorContent"></div> in your editor.component.html file.

With the editor component set up, you can now use it in your Angular application. Simply add the <app-editor> element wherever you want the rich text editor to appear. The EditorComponent will handle the integration with Froala and Filestack, providing a seamless user experience for file uploads directly within the editor. The uploaded files will then be stored in Dropbox using the Filestack integration. This allows your users to easily incorporate multimedia content into their rich text content without leaving the editor interface.

Step 10: Displaying Froala on the main page

To display the Froala editor on the main page of your Angular application, open app.component.ts and import the EditorComponent.

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { EditorComponent } from './editor/editor.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, EditorComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'filestack-integration';
}

Then simply add the <app-editor> element to the app.component.html template.

<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * * * The content below * * * * * * * * * * * -->
<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
<!-- * * * * * * * * * * and can be replaced.  * * * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * Delete the template below * * * * * * * * * -->
<!-- * * * * * * * to get started with your project! * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->

<style>
  :host {
    --bright-blue: oklch(51.01% 0.274 263.83);
    --electric-violet: oklch(53.18% 0.28 296.97);
    --french-violet: oklch(47.66% 0.246 305.88);
    --vivid-pink: oklch(69.02% 0.277 332.77);
    --hot-red: oklch(61.42% 0.238 15.34);
    --orange-red: oklch(63.32% 0.24 31.68);

    --gray-900: oklch(19.37% 0.006 300.98);
    --gray-700: oklch(36.98% 0.014 302.71);
    --gray-400: oklch(70.9% 0.015 304.04);

    --red-to-pink-to-purple-vertical-gradient: linear-gradient(180deg,
        var(--orange-red) 0%,
        var(--vivid-pink) 50%,
        var(--electric-violet) 100%);

    --red-to-pink-to-purple-horizontal-gradient: linear-gradient(90deg,
        var(--orange-red) 0%,
        var(--vivid-pink) 50%,
        var(--electric-violet) 100%);

    --pill-accent: var(--bright-blue);

    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
      Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
      "Segoe UI Symbol";
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  h1 {
    font-size: 3.125rem;
    color: var(--gray-900);
    font-weight: 500;
    line-height: 100%;
    letter-spacing: -0.125rem;
    margin: 0;
    font-family: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
      Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
      "Segoe UI Symbol";
  }

  p {
    margin: 0;
    color: var(--gray-700);
  }

  main {
    width: 100%;
    min-height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    box-sizing: inherit;
    position: relative;
  }


  .content {
    display: flex;
    justify-content: space-around;
    width: 100%;
    max-width: 700px;
    margin-bottom: 3rem;
  }

  .content p {
    margin-top: 1.5rem;
  }


  @media screen and (max-width: 650px) {
    .content {
      flex-direction: column;
      width: max-content;
    }

  }
</style>

<main class="main">
  <div class="content">
    <div class="">

      <p>Congratulations! Your app is running. 🎉</p>
      <app-editor></app-editor>
    </div>

  </div>
</main>

<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * * * The content above * * * * * * * * * * * * -->
<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * * -->
<!-- * * * * * * * * * * and can be replaced.  * * * * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * * End of Placeholder  * * * * * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->


<router-outlet></router-outlet>

This will render the EditorComponent you created earlier, which encapsulates the Froala editor and Filestack integration. By using the custom EditorComponent, you can easily reuse the rich text editing functionality across your application without having to manage the integration details in multiple places. This promotes code reusability and maintainability as your application grows.

Step 11: Test your App

Run ng serve. This will start the development server and make your Angular application available at http://localhost:4200

You can now test the Froala editor and Filestack integration within your Angular application. Verify that the editor is displayed correctly on the main page and that users can upload files directly within the editor interface. Ensure that the uploaded files are successfully stored in Dropbox using the Filestack integration.

Test various editing features provided by Froala, such as formatting, inserting images, and embedding multimedia content. Validate that the rich text content is properly rendered and that the user experience is seamless. Make any necessary adjustments to the integration or styling to optimize the overall functionality and appearance of the editor within your Angular application.

Elevate Your Angular App with Seamless Dropbox Integration

By integrating Froala’s Angular rich text editor with Filestack and Dropbox, you can elevate your Angular application’s functionality and provide users with a seamless content creation experience. This integration empowers your users to effortlessly upload and manage files directly within the editor, eliminating the need to switch between different applications.

The benefits of this integration are clear:

• It saves development time and costs, while also enhancing the user experience.
• Developers can focus on building core application features, rather than implementing complex file upload and storage solutions.
• Users enjoy the convenience of accessing and managing their Dropbox files without leaving the familiar Froala editor interface.

Don’t settle for a disjointed content creation workflow in your Angular app. Embrace the power of the Froala-Filestack-Dropbox integration and take your application to new heights.

Get your Filestack API here for free.

Key takeaways

• A WYSIWYG HTML editor significantly simplifies content processing and uploading tasks
• Video and image uploads, processing, and transformations make LMS more engaging and powerful.
• Froala Editor now comes with built-in Filestack integration, making image transformations and more possible within the editor.
• You can use React, PHP (or the back-end tool of your choice), and Froala to easily get started with a modern LMS project.
• As your mastery with WYSIWYG editors and file upload tools grows, so do the capabilities of your LMS.

Defining the scope and features of our LMS project

First, let me clarify that this isn’t a full tutorial for creating a full-fledged LMS. Instead, this is a guide for those who want to have robust content editing and uploading features within their projects. We will be building the front end of the application using React and Froala. For file uploading, we’ll leverage the newly integrated Filestack within the editor. Finally, we will use PHP for the back-end parts and SQL Server for storing and retrieving the data.

Our mini LMS will have the following features:

• View and add courses – each course will have a title, description, date published, and a unique ID.
• View and add chapters – each course will consist of chapters, which contain a title, description, content, date published, and a unique ID.

We’ll first set up the React application and Froala Editor. And then, we will create the front end of the application, followed by the back end and database tables. In the end, we’ll run a demo of the application.

Setting up the React project and the WYSIWYG HTML editor

Let’s start our project by creating our React app and installing the packages that we need:  

npx create-react-app demo-lms
cd demo-lms
npm install react-froala-wysiwyg --save

npm install react-router-dom

Now, you should have a React application with the Froala WYSIWYG HTML editor and page routing dependencies. The next thing we need to do is create a new folder under “src” called “components.” Afterwards, create a new file named “FroalaComponent.jsx” and insert the following:

import React, { useEffect } from 'react';
import 'froala-editor/css/froala_style.min.css';
import 'froala-editor/css/froala_editor.pkgd.min.css';
import FroalaEditorComponent from 'react-froala-wysiwyg';
import 'froala-editor/js/plugins.pkgd.min.js';

function FroalaComponent({ setChapterContent, setChapterImage }) {
  const config = {
    filestackOptions: {
      uploadToFilestackOnly: true,
      filestackAPI: 'InsertYourFilestackAPIHere',
    },
    events: {
      'contentChanged': function () {
        setChapterContent(this.html.get());
      },
      'filestack.uploadedToFilestack': function (response) {
        if(response && response.filesUploaded[0].url){
          setChapterImage(response.filesUploaded[0].url);
        }

        else{
          console.error("Image upload failed, no URL found in response", response);
        }
      }
},
  };

  useEffect(() => {
    const filestackScript1 = document.createElement('script');
        filestackScript1.src = 'https://static.filestackapi.com/filestack-js/3.32.0/filestack.min.js';
        filestackScript1.async = true;
        document.body.appendChild(filestackScript1);

        const filestackScript2 = document.createElement('script');
        filestackScript2.src = 'https://static.filestackapi.com/filestack-drag-and-drop-js/1.1.1/filestack-drag-and-drop.min.js';
        filestackScript2.async = true;
        document.body.appendChild(filestackScript2);

        const filestackScript3 = document.createElement('script');
        filestackScript3.src = 'https://static.filestackapi.com/transforms-ui/2.x.x/transforms.umd.min.js';
        filestackScript3.async = true;
        document.body.appendChild(filestackScript3);

        const filestackStylesheet = document.createElement('link');
        filestackStylesheet.rel = 'stylesheet';
        filestackStylesheet.href = 'https://static.filestackapi.com/transforms-ui/2.x.x/transforms.css';
        document.head.appendChild(filestackStylesheet);

    return () => {
      document.body.removeChild(filestackScript1);
      document.body.removeChild(filestackScript2);
      document.body.removeChild(filestackScript3);
      document.head.removeChild(filestackStylesheet);
    };
  }, []);

  return (
    <div className="editor">
      <FroalaEditorComponent tag='textarea' config={config} />
    </div>
  );
}

export default FroalaComponent;

The first thing we need to do is declare our component and its properties. Note that for the Froala config, we have to declare the Filestack options, including our Filestack API. You can get one by creating a free Filestack account or starting a free trial of a paid plan. Also note that we’re handling Froala’s content-change events and Filestack’s image upload event. This is for storing a course chapter’s content and image URL later.

Additionally, we’re loading Filestack-related scripts and styles dynamically using useEffect. That way, we can easily use Filestack’s drag-and-drop functionality, image uploads, and other features. Lastly, we load our FroalaEditorComponent and its configuration. If you need additional guidance on setting up Froala for React, follow this helpful article.

Creating the LMS

Now that we have the application and our Froala WYSIWYG HTML editor component ready, let’s build our LMS! Start by creating 4 files under the components folder:

• Courses.jsx: For viewing courses and navigating to a course’s chapters

import React, { useState, useEffect } from 'react';
import CourseModal from './CourseModal';
import { Link } from 'react-router-dom';

function Courses() {
  const [courses, setCourses] = useState([]);
  const [isModalOpen, setIsModalOpen] = useState(false);

  const fetchCourses = async () => {
    // Fetch courses from the back end
    const response = await fetch('path-to-backend/demo-lms-backend/fetchCourses.php');
    const data = await response.json();
    setCourses(data);
  };

  useEffect(() => {
    fetchCourses();
  }, []);

  const handleSaveCourse = () => {
    fetchCourses(); // Fetch courses again after saving a new one
    setIsModalOpen(false);
  };

  return (
    <div className="course-list">
      <h1>My Simple yet Powerful LMS</h1>
      <h2>Courses</h2>

      <button onClick={() => setIsModalOpen(!isModalOpen)}>
        {isModalOpen ? 'Close' : 'Add a Course'}
      </button>

      {isModalOpen && <CourseModal onSaveCourse={handleSaveCourse} onClose={() => setIsModalOpen(false)} />}
      {courses.map((course) => (
        <div key={course.course_id} className="course-card">
          <h3>{course.course_title}</h3>
          <p>{course.course_description}</p>
          <p>Date Published: {course.date_published ? new Date(course.date_published.date).toLocaleDateString() : 'N/A'}</p>
          <Link to={`/chapters/${course.course_id}`}>
            <button>View Course</button>
          </Link>
        </div>
      ))}
    </div>
  );
}

export default Courses;

• CourseModal.jsx: For saving courses

import React, { useState } from 'react';

function CourseModal({ onSaveCourse, onClose }) {
  const [courseTitle, setCourseTitle] = useState('');
  const [courseDescription, setCourseDescription] = useState('');

  const handleSubmitCourse = async (e) => {
    e.preventDefault();

    const newCourse = {
      title: courseTitle,
      description: courseDescription,
      date_published: new Date().toISOString().split('T')[0],
    };

    const response = await fetch('path-to-backend/demo-lms-backend/saveCourse.php', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(newCourse),
    });

    const result = await response.json();
    if (response.ok) {

      // This will call fetchCourses from Courses.jsx
      onSaveCourse();
    } else {
      console.error('Failed to save course:', result);
    }
  };

  return (
    <div className="modal">
      <form onSubmit={handleSubmitCourse}>
        <h3>New Course</h3>
        <label>Title</label>
        <input type="text" value={courseTitle} onChange={(e) => setCourseTitle(e.target.value)} required />
     
        <label>Description</label>
        <textarea value={courseDescription} onChange={(e) => setCourseDescription(e.target.value)} required />

        <button type="submit">Save</button>
        <button type="button" onClick={onClose}>Cancel</button>
      </form>
    </div>
  );
}

export default CourseModal;

• Chapters.jsx: For viewing the chapters of a course and navigating back to the courses

import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import ChapterModal from './ChapterModal';
import { Link } from 'react-router-dom';

function Chapters() {
  const { courseId } = useParams();
  const [chapters, setChapters] = useState([]);
  const [course, setCourse] = useState(null); // To store course details
  const [isModalOpen, setIsModalOpen] = useState(false);

  // Fetch chapters for the course
  const fetchChapters = async () => {
    const response = await fetch(`path-to-backend/demo-lms-backend/fetchChapters.php?course_id=${courseId}`);
    const data = await response.json();
    setChapters(data);
  };

  // Fetch course details
  const fetchCourseDetails = async () => {
    const response = await fetch(`path-to-backend/demo-lms-backend/getCourseById.php?courseId=${courseId}`);
    const data = await response.json();
    setCourse(data);
  };

  useEffect(() => {
    fetchChapters();
    fetchCourseDetails(); // Fetch course details on load
  }, [courseId]);

  const handleSaveChapter = (newChapter) => {
    setChapters([...chapters, newChapter]);
    setIsModalOpen(false);
  };

  if (!course) {
    return <p>Loading course details...</p>;
  }

  return (
    <div className="course-details">
      <h1>{course.course_title}</h1>
      <p>Description: {course.course_description}</p>
      <p>Date Published: {course.date_published ? new Date(course.date_published.date).toLocaleDateString() : 'N/A'}</p>
      <Link to={`/`}>
        <button>Back to Courses</button>
      </Link>

      <button onClick={() => setIsModalOpen(!isModalOpen)}>
        {isModalOpen ? 'Close' : 'Add a Chapter'}
      </button>
   
      <div className="chapter-list">
        {chapters.map((chapter) => (
          <div key={chapter.chapter_id} className="chapter-card">
            <h3>{chapter.chapter_title}</h3>
            <p>{chapter.chapter_description}</p>
            <p>Date Published: {chapter.date_published}</p>
          </div>
        ))}
      </div>

      {isModalOpen && <ChapterModal courseId={courseId} onSaveChapter={handleSaveChapter} onClose={() => setIsModalOpen(false)} />}
    </div>
  );
}

export default Chapters;

• ChapterModal.jsx: For saving chapters within a course

import React, { useState } from 'react';
import FroalaComponent from './FroalaComponent';

function ChapterModal({ courseId, onSaveChapter, onClose }) {
  const [chapterTitle, setChapterTitle] = useState('');
  const [chapterDescription, setChapterDescription] = useState('');
  const [chapterContent, setChapterContent] = useState('');
  const [chapterImage, setChapterImage] = useState('');

  const handleSubmitChapter = async (e) => {
    e.preventDefault();

    console.log('Chapter Image URL:', chapterImage);

    const newChapter = {
      course_id: courseId,
      title: chapterTitle,
      description: chapterDescription,
      content: chapterContent,
      chapter_img: chapterImage, // for Filestack URL
      date_published: new Date().toISOString().split('T')[0],
    };

    const response = await fetch('path-to-backend/demo-lms-backend/saveChapter.php', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(newChapter),
    });

    const result = await response.json();
    if (response.ok) {
      onSaveChapter(result);
    } else {
      console.error('Failed to save chapter:', result);
    }
  };

  return (
    <div className="modal">
      <form onSubmit={handleSubmitChapter}>
        <h3>Add New Chapter</h3>
        <label>Title</label>
        <input type="text" value={chapterTitle} onChange={(e) => setChapterTitle(e.target.value)} required />
     
        <label>Description</label>
        <textarea value={chapterDescription} onChange={(e) => setChapterDescription(e.target.value)} required />
     
        <label>Content</label>
        <FroalaComponent setChapterContent={setChapterContent} setChapterImage={setChapterImage} />

        <div><button type="submit">Save</button> <button type="button" onClick={onClose}>Cancel</button></div>
      </form>
    </div>
  );
}

export default ChapterModal;

Lastly, replace the default code in your App.js with:

import React, { useState } from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import './App.css';
import Courses from './components/Courses';
import Chapters from './components/Chapters';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Courses />} />
        <Route path="/chapters/:courseId" element={<Chapters />} />
      </Routes>
    </Router>
  );
}

export default App;

Here’s a quick summary of how our components work:

• App.js displays the Courses page first. Using the fetchCourses function, the application will send a fetch request to fetchCourses.php on the server. This loads all courses from the database table.
• When the user clicks the “Add a Course” button, we’ll show the CourseModal component. The user can then save a course through a fetch request to saveCourse.php. After saving the course, the application refreshes the courses.
• The Chapters and ChapterModal components work similarly, except that loading and saving chapter data requires a course ID. Furthermore, we add the Froala component in our ChapterModal.

After creating the front end of our LMS, we’ll handle the back end of the application next.

Setting up the DB tables and back-end codes

For our database tables, we’ll create two simple tables in SQL Server:

• course
  • course_id char(10)
  • course_title varchar(100)
  • course_description varchar(255)
  • date_published date
• chapter
  • course_id char(10)
  • chapter_id char(10)
  • chapter_title varchar(100)
  • chapter_description varchar(255)
  • chapter_content varchar(max)
  • chapter_img_url varchar(255)
  • date_published date

These are just some basic tables, so you will want to improve this or plan ahead when implementing your LMS. Note that we plan to store the contents of the editor in chapter_content. On the other hand, we’ll store the Filestack URL in the chapter_img_url column. For now, we choose 255 as the max length, but you might want to adjust this in your implementation.

Alright, we’re almost done! The last thing we need to do is create our PHP files for fetching and saving data. We also assume that we have a “connection.php” that connects to a database instance. Here are our PHP files and their respective purposes:

• fetchCourses.php: Retrieve all course data from the course table

<?php
    include "connection.php";

    $query = "SELECT course_id, course_title, course_description, date_published FROM course";
    $result = sqlsrv_query($conn, $query);

    $courses = array();
    while ($row = sqlsrv_fetch_array($result, SQLSRV_FETCH_ASSOC)) {
        $courses[] = $row;
    }

    sqlsrv_close($conn);
    echo json_encode($courses);
?>

• saveCourse.php: Generate a unique course ID and save the course data

<?php
    include "connection.php";

    $input = json_decode(file_get_contents("php://input"), true);

    $course_title = $input["title"];
    $course_description = $input["description"];

    $query = "
        DECLARE @course_id CHAR(10)

        WHILE 1 = 1
        BEGIN
            SET @course_id = LEFT(CONVERT(NVARCHAR(36), NEWID()), 10)

            IF NOT EXISTS (SELECT 1 FROM course WHERE course_id = @course_id)
            BEGIN
                BREAK
            END
        END

        INSERT INTO course
        (course_id, course_title, course_description, date_published)
        VALUES
        (@course_id, ?, ?, GETDATE())
    ";
    $params = array($course_title, $course_description);
    $result = sqlsrv_query($conn, $query, $params);

    if($result===false) {
        echo json_encode(["error" => "Failed to save course"]);
    }
    else{
        echo 1;
    }
    sqlsrv_close($conn);
?>

• getCourseById.php: Select all information of a specific course (for generating course data in our Chapters component)

<?php
    include "connection.php";

    if (isset($_GET["courseId"])) {
        $courseId = $_GET["courseId"];

        $query = "SELECT course_id, course_title, course_description, date_published FROM course WHERE course_id = ?";
        $params = array($courseId);
        $stmt = sqlsrv_query($conn, $query, $params);

        if($stmt === false){
            http_response_code(500);
            echo json_encode(["error" => "Failed to query the database."]);
            exit;
        }

        $course = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC);

        if($course){
            echo json_encode($course);
        }
        else{
            http_response_code(404);
            echo json_encode(["message" => "Course not found"]);
        }

        sqlsrv_free_stmt($stmt);
        sqlsrv_close($conn);
    }
    else{
        echo json_encode(["message" => "Course ID not provided"]);
    }
?>

• fetchChapters.php: Get all chapters in a course

<?php
    include "connection.php";

    $course_id = $_GET["course_id"];

    $query = "SELECT chapter_title, chapter_description, date_published FROM chapter WHERE course_id = ?";
    $params = array($course_id);
    $result = sqlsrv_query($conn, $query, $params);

    if ($result === false) {
        die("Error in query preparation/execution: " . print_r(sqlsrv_errors(), true));
    }
    $chapters = array();
    while($row = sqlsrv_fetch_array($result, SQLSRV_FETCH_ASSOC)){
        $chapters[] = $row;
    }

    sqlsrv_close($conn);
    echo json_encode($chapters);
?>

• saveChapter.php: Add a chapter to a course

<?php
    include "connection.php";

    $input = json_decode(file_get_contents("php://input"), true);

    $course_id = $input["course_id"];
    $chapter_title = $input["title"];
    $chapter_description = $input["description"];
    $chapter_content = $input["content"];
    $chapter_img_url = $input["chapter_img"];

    $query = "
        DECLARE @chapter_id CHAR(10)

        WHILE 1 = 1
        BEGIN
            SET @chapter_id = LEFT(CONVERT(NVARCHAR(36), NEWID()), 10)

            IF NOT EXISTS (SELECT 1 FROM chapter WHERE chapter_id = @chapter_id)
            BEGIN
                BREAK
            END
        END

        INSERT INTO chapter
        (course_id, chapter_id, chapter_title, chapter_description, chapter_content, chapter_img_url, date_published)
        VALUES
        (?, @chapter_id, ?, ?, ?, ?, GETDATE())
    ";

    $params = array($course_id, $chapter_title, $chapter_description, $chapter_content, $chapter_img_url);
    $result = sqlsrv_query($conn, $query, $params);

    if($result===false){
        echo json_encode(["error" => "Failed to save chapter"]);
    }
    else{
        echo 1;
    }
    sqlsrv_close($conn);
?>

And that’s it! Now, we have all we need for our React LMS with image transformations and rich-text editing. 

Seeing the React WYSIWYG HTML editor LMS in action

Let’s end this tutorial by checking how our React LMS works. After running npm start, we’ll see the homepage, which is empty at first. So, let’s add a course:

We now have a course. Note that for demo purposes, we didn’t apply that much CSS for now, which is why the input fields and other elements look out of place. Next, let’s view the course and try to add a chapter. After clicking “Add a Chapter,” we will see the WYSIWYG HTML editor along with two input fields.

Once we’ve selected, cropped, and uploaded the image through the integrated Filestack file picker, we’ll now apply some transformations to the image.

Lack of CSS aside, this LMS already looks and feels like a top-notch editing and content processing tool because of the WYSIWYG editor. Lastly, we save the enhanced image, insert a document (a sample chapter outline), add the chapter title and description, and save the chapter.

Now, let’s check the database to see if we saved the information correctly. Note that I added the chapter to the course about 4 days after creating the course.

Let’s also check our Filestack dashboard:

We can see that we have both the edited image and our demo PDF in our Filestack dashboard. If we now download the image file, we’ll see the image that we transformed earlier in our LMS!

And there you have it: a React WYSIWYG HTML editor-powered LMS. Undoubtedly, this is far from a finished or even decent LMS product. However, it’s a good start, especially if you plan on implementing comprehensive image handling and content editing on your application. Moreover, we can still do a lot more that I haven’t shown you yet. Next time, we’ll continue this mini project and load the image from Filestack back to our application. Happy coding!

Get your Filestack API here for free.

Fortunately, the latest version of Froala, V4.3, has introduced a game-changing solution: the Filestack plugin. This innovative feature makes integrating your Vue.js WYSIWYG editor with Google Cloud Storage a breeze, requiring only a few lines of code to set up.

In this article, we’ll dive deep into how Froala V4.3 has simplified this process, empowering you to effortlessly store your files in the Google Cloud while providing your users with a seamless rich-text editing experience. We will discover practical insights and step-by-step guidance to help you master this powerful integration.

So, let’s explore how you can elevate your Vue.js projects by seamlessly connecting your Froala rich-text editor with the reliability and scalability of Google Cloud Storage.

How does Froala V4.3 simplify the integration with Google Cloud?

Froala V4.3 introduces a game-changing feature that streamlines the process of integrating your Vue.js rich-text editor with Google Cloud Storage. This new capability comes in the form of the Filestack plugin, which seamlessly integrates the Filestack Picker directly into the Froala editor.

With the Filestack plugin, users can now upload images, videos, and files directly from the rich-text editor, and these assets will be automatically stored in your Google Cloud Storage. This is made possible by the Filestack platform, which supports a wide range of popular cloud storage services, including Google Cloud.

The integration process is incredibly straightforward. All you need to do is connect your Google Cloud account to your Filestack dashboard, and you’re good to go. From that point on, any files uploaded through the Filestack Picker within the Froala editor will be directly saved to your Google Cloud Storage, without the need for any additional configuration or complex integrations.

This streamlined approach not only saves you time and effort but also ensures a seamless user experience for your content creators. They can focus on crafting their content, while the Froala-Filestack-Google Cloud integration handles the behind-the-scenes file management, allowing you to leverage the power and reliability of Google Cloud Storage with minimal hassle.

Let’s explore how this integration works.

Step 1: Create a simple Vue project

Skip this step if you will install the editor in an existing Vue app.

Run the following commands to create a new Vue 3 project.

npm install -g @vue/cli

vue create my-froala-vue-app

cd my-froala-vue-app

The above code creates a new Vue 3 project named “my-froala-vue-app” and navigates to the project directory. This provides a clean starting point for integrating the Froala rich-text editor and enabling the Google Cloud Storage integration using the Filestack plugin.

Step 2: Install the Froala Editor Vue SDK

Next, you’ll need to install the Froala Editor for Vue.js. Run the following commands in your project directory:

npm install vue-froala-wysiwyg --save

This will add the required dependencies to your project, allowing you to use the Froala editor within your Vue application.

Step 3: Include Froala in Your Application

3.1 Import Froala Editor in main.js

In your “main.js” file, import the Froala associated CSS and JS files:

import { createApp } from 'vue'
import App from './App.vue'

//Import Froala Editor plugins
import 'froala-editor/js/plugins.pkgd.min.js';


// Import Froala Editor css files.
import 'froala-editor/css/froala_editor.pkgd.min.css';
import 'froala-editor/css/froala_style.min.css';


// Import Froala Editor component
import VueFroala from 'vue-froala-wysiwyg';

const app = createApp(App);          

app.use(VueFroala);
app.mount('#app');

This step ensures that the Froala Editor is available throughout your Vue.js application, allowing you to use it in your components.

3.2 Use Froala in a Vue Component

In your “App.vue” file, add the Froala component within the template and add some initial configuration.

<template>

  <froala id="edit" :tag="'textarea'" :config="config" v-model:value="model"></froala>

</template>


<script>

export default {

  name: 'App',

  data () {

    return {

      config: {

        heightMin: 300,

      },

      model: '<i>Edit Your Content Here!</i>'

    }

  }

}

</script>


<style>

#app {

  font-family: Avenir, Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

  margin-top: 60px;

}

</style>

The Froala component has three attributes:

• :tag attribute is used to tell on which tag the editor is initialized.
• :config attribute is used to configure the editor options.
• v-model:value Used to load editor content. This value is affected by editor HTML changes.

Step 4: Include Filestack for Uploading and Storing Files

Since we already included the “plugins.pkgd.min.js” file in our application, then the Froala Filestack is already included and active by default. However, to correctly display the Filestack File Picker and UI Transformation tools in the editor, include the following Filestack stylesheet and scripts:

• Filestack’s File Picker script: https://static.filestackapi.com/filestack-js/3.32.0/filestack.min.js
• Filestack script for drag and drop files: https://static.filestackapi.com/filestack-drag-and-drop-js/1.1.1/filestack-drag-and-drop.min.js
• Filestack UI Transformation tool for image editing:
  • CSS Stylesheet: https://static.filestackapi.com/transforms-ui/2.x.x/transforms.css
  • JavaScript file: https://static.filestackapi.com/transforms-ui/2.x.x/transforms.umd.min.js

Open the “public/index.html” file and include the mentioned scripts.

<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>
    <%= htmlWebpackPlugin.options.title %>
  </title>
  <link rel="stylesheet" href="https://static.filestackapi.com/transforms-ui/2.x.x/transforms.css" />

</head>

<body>
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
        Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->
  <script src="https://static.filestackapi.com/filestack-js/3.32.0/filestack.min.js"></script>
  <script
    src="https://static.filestackapi.com/filestack-drag-and-drop-js/1.1.1/filestack-drag-and-drop.min.js"></script>
  <script src="https://static.filestackapi.com/transforms-ui/2.x.x/transforms.umd.min.js"></script>
</body>

</html>

Step 5: Create a Filestack Account

To integrate the Filestack File Picker with your Froala Editor, you’ll need to create a Filestack account and obtain an API key.

1. Sign up for a Filestack Account:
   You can create a free Filestack account with low bandwidth, uploads, transformations, and storage limits. However, to upload files to Google Cloud you need a paid plan. Start a free trial of a paid plan based on your needs.
2. Obtain the Filestack API Key:
   • After creating your account, you’ll be taken to the Filestack dashboard.
   • In the dashboard, locate the “API Keys” section and copy your “API Key”.
   • You’ll need this API key to configure the Filestack integration with your Froala Editor.

With your Filestack account and API key, you’re now ready to integrate the Filestack File Picker into your Froala Editor, allowing your users to upload, store, and transform files directly within the rich-text editing experience.

Step 6: Filestack Configuration

To complete the Filestack integration, we need to configure the following options and events:

• Set the filestackOptions.filestackAPI to your Filestack API key.
• (Optional) Set the filestackOptions.uploadToFilestackOnly to true. This will handle all file uploads by Filestack.
• (Optional) Pass the File Picker configurations in the filestackOptions.pickerOptions option to customize the Filestack Picker.
• (Optional) Configure the filestack.filestackPickerOpened event. This allows you to execute a custom action after a user opens the Filestack File Picker.
• (Optional) Configure the filestack.filestackPickerClosed event. This allows you to execute a custom action after a user closes the Filestack File Picker.
• (Optional) Configure the filestack.uploadedToFilestack event. This allows you to execute a custom action when files are successfully uploaded to your cloud storage.
• (Optional) Configure the filestack.uploadFailedToFilestack event. This allows you to execute a custom action if the file upload fails.

Open your “App.vue” file and modify the data() function:

      data () {
      
        return {
        
          config: {
            
            heightMin: 300,
            filestackOptions: {
              uploadToFilestackOnly: true,
              filestackAPI: "***",
            },

            events: {
              'filestack.uploadedToFilestack': function () {
                  console.log("Callback is triggered for uploaded to filestack ",)
              },

              'filestack.filestackPickerOpened': function () {
                  console.log("Callback is triggered for picker opened ",)
              },

              'filestack.filestackPickerClosed': function () {
                  console.log("Callback is triggered for picker closed ",)
              },

              'filestack.uploadFailedToFilestack': function () {
                  console.log("Callback is triggered for file stack failed ",)
              },

            },
          },
        
          model: '<i>Edit Your Content Here!</i>'
        
        }
      
      }

Step 7: Google Cloud Configuration

Log in to your Filestack Dev Portal to configure your storage options so that uploaded files are saved in your Google Cloud account instead of Filestack’s default S3 bucket.

Simply add your service account key and ensure it has the Storage Object Admin role.

Note that depending on your internal GCS settings, additional permissions may be required, such as Storage Admin, Storage Object Creator, and Storage Object Viewer.

Obtain the JSON key for this account and paste it into the Access Key field in the GCS section of the developer portal.

Step 8: Start Your Application

With the Filestack integration and Google Cloud Storage configuration complete, you can now start your application. Run the following command in your terminal:

npm run serve

This command will start the development server and run your application at “http://localhost:8080”.

When a user clicks the Filestack File Picker button, the picker will open, allowing them to select files from various sources. The selected files will be automatically uploaded to your Google Cloud Storage account, and you can handle the successful or failed upload events using the configured callbacks. This integration provides a seamless file management experience within your Froala Editor-powered application.

What other cloud storage services are supported?

In addition to Google Cloud Storage, Filestack supports integration with other popular cloud storage services such as Amazon S3, Rackspace, Microsoft Azure Blob Storage, and Dropbox. You can configure the desired cloud storage provider in the Filestack Developer Portal and use the same integration approach as outlined for Google Cloud Storage. This flexibility allows you to choose the cloud storage solution that best fits your application’s requirements and infrastructure. The Filestack File Picker seamlessly handles file uploads and transformations, regardless of the underlying cloud storage provider.

Unlock the Power of Seamless Cloud Integration with Froala, Filestack, and Google Cloud Storage

By leveraging the Filestack plugin in Froala V4.3, you can now effortlessly integrate your Vue.js rich-text editor with the reliability and scalability of Google Cloud Storage. This game-changing integration empowers your content creators to focus on crafting exceptional content, while the behind-the-scenes file management is handled seamlessly.

With just a few lines of code, you can set up this powerful integration and unlock a new level of productivity and efficiency in your Vue.js projects. Say goodbye to the hassle of complex file upload processes and hello to a streamlined, user-friendly experience that delights your users.

Get your Filestack API here for free.

Rich-text editors are undoubtedly popular, but the ability to easily insert and display images is often a pain point. Traditionally, developers have had to write additional code to handle the uploading and storage of images, a process that can be both tedious and error-prone.

However, thanks to the integration between Froala and Filestack, introduced in Froala version 4.3, the uploading and storing of any type of files has become a straightforward process. In this article, we’ll guide you through the setup of this powerful integration within your React applications, empowering you to create a React rich-text editor with advanced image editing capabilities and a seamless cloud storage solution.

Get ready to streamline your content management workflow and provide your users with a truly exceptional experience. Let’s dive in and explore how you can leverage this powerful combination to take your web applications to new heights.

Step 1: Creating A React App.

Skip this step if you will install the editor in an existing React app.

Run the following commands to create a new React application

npm install -g create-react-app

npx create-react-app froala-app

cd froala-app

The above code creates a new React application named “froala-app” and navigates to the project directory. This sets up the necessary files and folders for a basic React application, which you can then customize to integrate the Froala Rich Text Editor and Filestack for file management.

Step 2: Install Froala React Component

Next, you’ll need to install the Froala Rich Text Editor SDK for React. Run the following commands in your project directory:

npm install react-froala-wysiwyg --save

This will add the required dependencies to your project, allowing you to use the Froala editor within your React application.

Step 3: Include Froala in Your Application

To create a Froala editor component with your custom configuration, create a new file “src/components/FroalaComponent.jsx” and add the following code

import React from 'react';

// Require Editor CSS files.

import 'froala-editor/css/froala_style.min.css';

import 'froala-editor/css/froala_editor.pkgd.min.css';

import FroalaEditorComponent from 'react-froala-wysiwyg';

import 'froala-editor/js/plugins.pkgd.min.js';

// Render Froala Editor component.
function FroalaComponent (){

  return (
  
    <div class="editor">
    
    <h3> Froala's React WYSIWYG Editor</h3>
    
    <FroalaEditorComponent tag='textarea'/>
    
    </div>
  
  );

}

export default FroalaComponent;

In the above code, we did the following

• Import the necessary Froala CSS files and the FroalaEditorComponent from the “react-froala-wysiwyg” library.
• Import the /plugins.pkgd.min.js to load the full-featured editor with all default plugins loaded.
• Create a functional component called FroalaComponent that renders the Froala editor within a div.
• Set the tag attribute of FroalaEditorComponent to textarea, this means the editor will be initialized at textarea HTML element.
• (Optional) Set the config attribute of FroalaEditorComponent and pass your custom Froala options values through it. We will use it later to set up Filestack plugin options and events.

Step 4: Include Filestack For Uploading and Storing Files

To correctly display the Filestack File Picker and UI Transformation tools in the editor, include the following Filestack files:

• Filestack’s File Picker script: https://static.filestackapi.com/filestack-js/3.32.0/filestack.min.js
• Filestack script for drag and drop files: https://static.filestackapi.com/filestack-drag-and-drop-js/1.1.1/filestack-drag-and-drop.min.js
• Filestack UI Transformation tool for image editing:
  • CSS Stylesheet: https://static.filestackapi.com/transforms-ui/2.x.x/transforms.css
  • JavaScript file: https://static.filestackapi.com/transforms-ui/2.x.x/transforms.umd.min.js

We can directly add the script and link tags to your React project’s “public/index.html” file. This method ensures that the scripts are loaded with the initial HTML file.

However, for better performance, we will use the useEffect hook to dynamically add the scripts and stylesheet to the document when the component mounts and remove them when the component unmounts. This ensures the external resources are properly loaded and unloaded with the component lifecycle.

Here’s the “FroalaComponent.jsx” after including the Filestack scripts and stylesheet:

import React, { useEffect } from 'react';
import 'froala-editor/css/froala_style.min.css';
import 'froala-editor/css/froala_editor.pkgd.min.css';
import FroalaEditorComponent from 'react-froala-wysiwyg';
import 'froala-editor/js/plugins.pkgd.min.js';

function FroalaComponent() {

    useEffect(() => {
        const filestackScript1 = document.createElement('script');
        filestackScript1.src = 'https://static.filestackapi.com/filestack-js/3.32.0/filestack.min.js';
        filestackScript1.async = true;
        document.body.appendChild(filestackScript1);

        const filestackScript2 = document.createElement('script');
        filestackScript2.src = 'https://static.filestackapi.com/filestack-drag-and-drop-js/1.1.1/filestack-drag-and-drop.min.js';
        filestackScript2.async = true;
        document.body.appendChild(filestackScript2);

        const filestackScript3 = document.createElement('script');
        filestackScript3.src = 'https://static.filestackapi.com/transforms-ui/2.x.x/transforms.umd.min.js';
        filestackScript3.async = true;
        document.body.appendChild(filestackScript3);

        const filestackStylesheet = document.createElement('link');
        filestackStylesheet.rel = 'stylesheet';
        filestackStylesheet.href = 'https://static.filestackapi.com/transforms-ui/2.x.x/transforms.css';
        document.head.appendChild(filestackStylesheet);

        return () => {
            document.body.removeChild(filestackScript1);
            document.body.removeChild(filestackScript2);
            document.body.removeChild(filestackScript3);
            document.head.removeChild(filestackStylesheet);
        };
    }, []);

    return (
        <div className="editor">
            <h3>Froala's React WYSIWYG Editor</h3>
            <FroalaEditorComponent tag='textarea' />
        </div>
    );
}

export default FroalaComponent;

Step 5: Filestack Configuration

5.1: Create Filestack Account

In this step, we need to create a Filestack account and obtain a Filestack API key to add to the Froala configuration so we can upload files to your cloud storage through the Filestack File Picker. This powerful tool allows users to upload, store, and transform files directly. When integrated with Froala, it enables users to upload files from their local devices or cloud storage and apply various transformations within the Froala Editor interface.

You can create a free Filestack account with limited bandwidth, uploads, transformations, and storage, or start a free trial of a paid plan based on your needs.

5.2: Set the Filestack Plugin Options

Login to your account and copy your Filestack API key.

In the “FroalaComponent.jsx”, add a config parameter to FroalaEditorComponent where you can pass all the Froala configuration:

• Set the filestackOptions.filestackAPI to your Filestack API key.
• Set the filestackOptions.uploadToFilestackOnly to true. This will handle all file uploads by Filestack.
• (Optional) If you want to customize the Filestack Picker, pass the File Picker configurations in the filestackOptions.pickerOptions option.
• (Optional) Assign a callback function to the filestack.filestackPickerOpened event to perform a custom action after a user opens the Filestack File Picker.
• (Optional) Assign a callback function to the filestack.filestackPickerClosed event to perform a custom action after a user closes the Filestack File Picker.
• (Optional) Assign a callback function to the filestack.uploadedToFilestack event to perform a custom action when files are successfully uploaded to your cloud storage.
• (Optional) Assign a callback function to the filestack.uploadFailedToFilestack event to perform a custom action if file upload fails.

import React, { useEffect } from 'react';
import 'froala-editor/css/froala_style.min.css';
import 'froala-editor/css/froala_editor.pkgd.min.css';
import FroalaEditorComponent from 'react-froala-wysiwyg';
import 'froala-editor/js/plugins.pkgd.min.js';

function FroalaComponent() {
    let config = {
        filestackOptions: {
            uploadToFilestackOnly: true,
            filestackAPI: "***",
        },

        events: {
            'filestack.uploadedToFilestack': function (response) {
                console.log("Callback is triggered for uploaded to filestack ",)
            },

            'filestack.filestackPickerOpened': function (response) {
                console.log("Callback is triggered for picker opened ",)
            },

            'filestack.filestackPickerClosed': function (response) {
                console.log("Callback is triggered for picker closed ",)
            },

            'filestack.uploadFailedToFilestack': function (response) {
                console.log("Callback is triggered for file stack failed ",)
            },

        },
    };
    useEffect(() => {
        const filestackScript1 = document.createElement('script');
        filestackScript1.src = 'https://static.filestackapi.com/filestack-js/3.32.0/filestack.min.js';
        filestackScript1.async = true;
        document.body.appendChild(filestackScript1);

        const filestackScript2 = document.createElement('script');
        filestackScript2.src = 'https://static.filestackapi.com/filestack-drag-and-drop-js/1.1.1/filestack-drag-and-drop.min.js';
        filestackScript2.async = true;
        document.body.appendChild(filestackScript2);

        const filestackScript3 = document.createElement('script');
        filestackScript3.src = 'https://static.filestackapi.com/transforms-ui/2.x.x/transforms.umd.min.js';
        filestackScript3.async = true;
        document.body.appendChild(filestackScript3);

        const filestackStylesheet = document.createElement('link');
        filestackStylesheet.rel = 'stylesheet';
        filestackStylesheet.href = 'https://static.filestackapi.com/transforms-ui/2.x.x/transforms.css';
        document.head.appendChild(filestackStylesheet);

        return () => {
            document.body.removeChild(filestackScript1);
            document.body.removeChild(filestackScript2);
            document.body.removeChild(filestackScript3);
            document.head.removeChild(filestackStylesheet);
        };
    }, []);

    return (
        <div className="editor">
            <h3>Froala's React WYSIWYG Editor</h3>
            <FroalaEditorComponent tag='textarea' config={config} />
        </div>
    );
}

export default FroalaComponent;

The “FroalaComponent.jsx” component can now be imported and used in other components of your React application.

5.3: Configure Cloud Storage

By default, all uploaded files are stored in Filestack’s internal S3 bucket. This doesn’t require any additional configuration and works for both free and paid Filestack accounts.

However, if you’re on a paid plan, you can store files in your custom cloud storage on the following platforms:

• Amazon S3
• Rackspace
• Azure Blob Storage
• Dropbox
• Google Cloud Storage

Log in to your Filestack dev portal and follow the steps described here.

Step 6: Add Froala To Your Main Component

To display the Froala editor in your product, add the FroalaComponent to the template where you want the editor to be displayed.

In our tutorial, we will add it to the App.js file. It will be like

import './App.css';
import FroalaComponent from './components/FroalaComponent';

function App() {
  return (
    <div className="App">

      <FroalaComponent />
    </div>
  );
}

export default App;

 Step 7: Start Your Application

Open the terminal again and run the following command.

npm start

This will start the development server, which will display the Froala editor with Filestack buttons for uploading images, videos, and files.

Step 8: Test Your Application

You can test if your Filestack integration is working properly by following the below steps:

• Upload images, videos, or files through Filestack File Picker.
• Login to your Filestack dev portal.
• Click on the “Content Browser“ and see if your files are listed.
• Go to your cloud storage service and check if your file is successfully stored.

Conclusion

In this article, we’ve explored how to seamlessly integrate the Froala React Rich Text Editor with Filestack’s powerful file management capabilities within a React application. Filestack provides a user-friendly interface and a range of advanced image editing capabilities that can be easily integrated with the Froala editor.

The integration of Froala and Filestack streamlines the process of uploading, storing, and transforming files directly within the rich-text editor, empowering your users to focus on creating great content without the hassle of complex file management. With just a few simple steps, you can set up this integration and unlock advanced image editing tools, a user-friendly file picker, and a robust cloud storage solution.

So what are you waiting for? Try the Froala-Filestack integration and give your users the rich-text editing experience they deserve.

Get your Filestack API here for free.

This blog post will guide you through the process of integrating a date picker into the Froala Rich Text Editor using the MCDatepicker JavaScript library. You can use any other date picker alternative, the integration process will be almost the same.

MCDatepicker is a free, open-source date picker library with a clean design and flexibility, making it the ideal choice for managing dates with ease and accuracy. Join us as we delve into the step-by-step process of this integration, showcasing how you can enrich the Froala experience and streamline your content creation process with just a few lines of intuitive JavaScript.

Understanding the Role of a Date Picker in a Rich Text Editor

When it comes to rich text editors, usability and functionality are paramount. Adding a custom date picker enhances the user experience by providing an intuitive way to input dates. Using a JavaScript date picker simplifies the process, reducing user errors and improving the efficiency of content creation. Froala’s rich text editor is a great example of how we can integrate these tools seamlessly, offering developers a solution that’s both powerful and easy to use. Our focus on UX ensures that users have a smooth experience, and integrating a date picker is just one of the many ways we enhance the editor’s capabilities.

Why Should We Use Froala Rich Text Editor?

The Froala Rich Text Editor is a popular WYSIWYG (What You See Is What You Get) editor that provides a wide range of features and customization options.

It allows users to easily format text, and insert images, tables, and videos. It offers over 100 features. Check them all here.

One of the key benefits of the Froala Rich Text Editor is its extensibility, which enables developers to integrate additional functionality and features.

Setting Up MCDatepicker for Seamless Date Management

To manage dates effectively within Froala’s editor, we turn to MCDatepicker, a robust library renowned for its attractive design and ease of use. Setting up an MCDatepicker date picker allows us to handle date formats and calculations with precision. By leveraging MCDatepicker, developers can streamline date management, ensuring application consistency and reliability. The integration process is straightforward. Froala’s custom buttons approach makes it easy for developers to implement MCDatepicker within the editor.

Integrating the Date Picker

1. Set up the Froala Rich Text Editor:
   1. Include the necessary Froala CSS and JavaScript files in your HTML file.
   2. Initialize the Froala Rich Text Editor on your desired HTML element.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Insert date and time</title>
    <!--Include Froala Stylesheet -->
    <link href='https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css' rel='stylesheet'
        type='text/css' />
    <!--Include Font awesome for the button icon -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css"
        integrity="sha512-+L4yy6FRcDGbXJ9mPG8MT/3UCDzwR9gPeyFNMCtInsol++5m3bk2bXWKdZjvybmohrAsn3Ua5x8gfLnbE1YkOg=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<body>

    <!--Editor element -->
    <textarea id="editor"></textarea>

    <!--Include Froala javaScript -->
    <script type='text/javascript'

    <script>

        new FroalaEditor('#editor');
    </script>
</body>

</html>

2. Install and include MCDatepicker:
   Download the MCDatepicker library or include it from a CDN.

<link href="https://cdn.jsdelivr.net/npm/mc-datepicker/dist/mc-calendar.min.css" rel="stylesheet" />

<script src="https://cdn.jsdelivr.net/npm/mc-datepicker/dist/mc-calendar.min.js"></script>

3. Define a new Froala button and include the necessary functionality:
   As per the Froala custom button guide, we should:
   1. Define an icon for the custom button.

FroalaEditor.DefineIcon('calendar', { NAME: 'calendar', template: 'font_awesome' });

1. 2. Register the button

FroalaEditor.RegisterCommand('calendar', {

1. 3. Set a title

title: 'Display Calendar Popup',

1. 4. Specify the icon for the button. If this option is not specified, the button name is used.

icon: 'calendar',

1. 5. Save the button action into the undo stack.

undo: true,

1. 6. Set whether to focus inside the editor before the callback or not

focus: false,

1. 7. Set a callback function to be called when the button is hit.

    callback: function () {
        const datepicker = MCDatepicker.create();
        datepicker.open();
        datepicker.onSelect((date, formatedDate) => {
            this.html.insert('Selected date: ' + formatedDate);
        });
}

In the callback function, we used the MCDatepicker.create() method to initialize the date picker and then automatically display the picker using the datepicker.open(); method.
When the user selects a date and clicks on the “OK“ button, the selected date is inserted in the editor. We achieved this using the MCDatepicker onSelect event. This event provides the selected date and formatted date. We then used the html.insert() Froala method to insert the formatted date into the Froala editor.
The MCDatepicker provides the formatted date based on the format specified with the dateFormat option, which is set to DD-MMM-YYYY by default. By customizing the dateFormat option, you can customize the date format to suit your specific needs. Once the date picker is integrated, users can easily select dates within the Froala Rich Text Editor, streamlining the content creation process.

4. Display the date picker button on the Froala toolbar
   Add the newly created custom button to Froala’s toolbarButtons options. Master the customization of Froala toolbar buttons.

        new FroalaEditor('#editor', {
            // Add the custom buttons in the toolbarButtons list, after the separator.
            toolbarButtons: [['calendar', 'italic', 'bold']]
        });

5. The final code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Insert date and time</title>
    <!--Include Froala Stylesheet -->
    <link href='https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css' rel='stylesheet'
        type='text/css' />
    <link href="https://cdn.jsdelivr.net/npm/mc-datepicker/dist/mc-calendar.min.css" rel="stylesheet" />
    <!--Include Font awesome for the button icon -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css"
        integrity="sha512-+L4yy6FRcDGbXJ9mPG8MT/3UCDzwR9gPeyFNMCtInsol++5m3bk2bXWKdZjvybmohrAsn3Ua5x8gfLnbE1YkOg=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<body>

    <!--Editor element -->
    <textarea id="editor"></textarea>

    <!--Include Froala javaScript -->
    <script type='text/javascript'
        src='https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js'></script>
    <script src="https://cdn.jsdelivr.net/npm/mc-datepicker/dist/mc-calendar.min.js"></script>
    <script>
        // Define an icon and command for the button that opens the custom popup.
        FroalaEditor.DefineIcon('calendar', { NAME: 'calendar', template: 'font_awesome' });
        FroalaEditor.RegisterCommand('calendar', {
            title: 'Display Calendar Popup',
            icon: 'calendar',
            undo: true,
            focus: false,
            popup: false,

            callback: function () {
                const datepicker = MCDatepicker.create();
                datepicker.open();
                datepicker.onSelect((date, formatedDate) => {
                    this.html.insert('Selected date: ' + formatedDate);
                });

            }
        });
    </script>
    <script>

        new FroalaEditor('#editor', {
            // Add the custom buttons in the toolbarButtons list, after the separator.
            toolbarButtons: [['calendar', 'italic', 'bold']]
        });
    </script>
</body>

</html>

Customize The Date Picker

The MCDatepicker library offers a range of customization options, enabling developers to tailor the date picker’s appearance and behavior to match the branding and design of their application. By leveraging these features, you can create a cohesive and visually appealing date management solution within the Froala Rich Text Editor. For example, you can disable some weekdays, specify allowed years, or change the date picker theme.

Conclusion

Integrating a date picker into the Froala Rich Text Editor using MCDatepicker can be a powerful way to enhance the user experience and improve the overall quality of your web content. By following the steps outlined in this blog post, you can seamlessly incorporate this functionality into your web application or website.

This seamless integration of MCDatepicker enhances the overall functionality and user experience of the Froala editor, making it a powerful tool for developers to create rich and engaging content. The flexibility to add custom features like the date picker sets Froala apart as a versatile and extensible rich text editing solution.

If you’re looking to enhance your web application’s content creation experience, I encourage you to give Froala a try. With its robust API, extensive feature set, and easy integration, Froala makes it simple to build a WYSIWYG editor that is perfectly suited to your users’ needs.

Understanding the Date Object

The Date object in JavaScript represents a single moment in time. It provides a variety of methods for working with dates and times, such as getting the current date and time, formatting dates, and performing date calculations.

The Date object can be created in several ways, including using the new Date() constructor or by passing specific date and time values to the constructor.

Displaying the Current Date

Getting the Current Date

To get the current date, you can use the new Date() constructor without any arguments. This will create a new Date object representing the current date and time.

const currentDate = new Date();

Formatting the Date

Once you have the current date, you can use various methods of the Date object to format the date in the desired way. We want to display the inserted date and time in the following format Month/Day/Year Hours:Minutes:Seconds. The methods we will use in our case are:

• getFullYear(): Returns the year as a four-digit number (e.g., 2023)
• getMonth(): Returns the month as a zero-based number (0 for January, 1 for February, etc.)
• getDate(): Returns the day of the month (1-31)
• getDay(): Returns the day of the week as a zero-based number (0 for Sunday, 1 for Monday, etc.)
• getHours(): Returns the hours (0-23)
• getMinutes(): Returns the minutes (0-59)
• getSeconds(): Returns the seconds (0-59)

If you want another format, you can check the Date JavaScript documentation for other methods.

Displaying the Date

After getting the current date and formatting it, you can display the date on your web page.

You can use JavaScript to update the content of an HTML element, such as a <p> or <div> tag, with the formatted date.

const currentDate = new Date();

const dateString = `Current date and time is ${currentDate.getMonth() + 1}/${currentDate.getDate()}/${currentDate.getFullYear()} ${currentDate.getHours()}:${currentDate.getMinutes()}:${currentDate.getSeconds()}`;

document.getElementById('date-display').textContent = dateString;

In this example, we create a new Date object, format the date using the methods mentioned above, and then update the text content of an HTML element with the ID `date-display`.

Now let’s use it with Froala WYSIWYG editor but first let’s explain what WYSIWYG editor means, why we want to insert the current date in it, and how to do it.

What are WYSIWYG Editors?

WYSIWYG (What You See Is What You Get) editors are text editors that allow users to format and style content as they type, without having to write raw HTML or markup. These editors provide a user-friendly interface, making it easier for non-technical users to create and edit web content.

Why Do I Need To Insert The Current Date While Using WYSIWYG Editor?

WYSIWYG Editors are used in many use cases where adding current date and time are important to users. For example:

• In Content Management Systems (CMSs): users can insert the current date when creating a new blog post or article. This helps provide context and timestamp the content.
• In Email Clients: users may want to insert the current date when composing a new email message.
• In Online Forms: users may need to insert the current date when filling out forms, such as job applications or registration forms.
• In Note-taking Apps: users may want to timestamp their notes with the current date.

By utilizing the JavaScript Date object, developers can enable users to insert the current date and time directly into the content they are creating or editing, enhancing the functionality and convenience of the WYSIWYG editor.

Why It’s Recommended to Use Froala Editor?

Froala Editor is an advanced WYSIWYG editor with a user-friendly interface. It offers a wide range of features and tools, including advanced formatting options, image and media integration, and export to PDF, allowing users to create high-quality content efficiently.

One of the most important features is its powerful API that allows developers to easily and quickly customize the editor to fit the specific needs and branding of your organization, allowing you to create a unique and tailored content creation experience.

How To Insert Date and Time Into Froala JavaScript WYSIWYG Editor?

First, we need to add a new toolbar button. When this button is clicked, it inserts the current date and time into the editor. Froala made defining new toolbar buttons easy. You just need to follow this “create a custom Froala button“ guide.

The main steps to define a custom button and display it in the editor toolbar are:

• Define the button icon to be displayed on the editor toolbar
• Define the button’s action, which in our case will be to insert the current date and time into the editor.
• Register the custom button with Froala’s API

Define button icon

We will use the calendar icon from the Font Awesome library.

FroalaEditor.DefineIcon('dateIcon', {NAME: 'calendar', template: 'font_awesome'})

Define the button’s action

Here is the button definition and inside the callback function we will use the JavaScript Date object as we used earlier to format the current date and time and then we will use the html.set() Froala Method to insert the date and the time into the editor.

        FroalaEditor.RegisterCommand('date', {
            title: "Today's date and time",
            icon: 'dateIcon',
            undo: true,
            focus: true,
            showOnMobile: true,
            refreshAfterCallback: true,
            callback: function () {

                const currentDate = new Date();
                const dateString = `${currentDate.getMonth() + 1}/${currentDate.getDate()}/${currentDate.getFullYear()} ${currentDate.getHours()}:${currentDate.getMinutes()}:${currentDate.getSeconds()}`;

                this.html.set("<i>"+dateString+"</i>");
            },

        })

Register the custom button with Froala’s API

In a basic HTML project, initialize the editor and the date custom button we created above to Froala’s toolbarButtons option.

Here’s the full code example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Insert date and time</title>
    <!--Include Froala Stylesheet -->
    <link href='https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css' rel='stylesheet' type='text/css' />
    <!--Include Font awesome for the button icon -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" integrity="sha512-+L4yy6FRcDGbXJ9mPG8MT/3UCDzwR9gPeyFNMCtInsol++5m3bk2bXWKdZjvybmohrAsn3Ua5x8gfLnbE1YkOg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>

    <!--Editor element -->
    <textarea id="editor"></textarea>

    <!--Include Froala javaScript -->
    <script type='text/javascript' src='https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js'></script>
    <script>
        FroalaEditor.DefineIcon('dateIcon', {NAME: 'calendar', template: 'font_awesome'})
        FroalaEditor.RegisterCommand('date', {
            title: "Today's date and time",
            icon: 'dateIcon',
            undo: true,
            focus: true,
            showOnMobile: true,
            refreshAfterCallback: true,
            callback: function () {

                const currentDate = new Date();
                const dateString = `${currentDate.getMonth() + 1}/${currentDate.getDate()}/${currentDate.getFullYear()} ${currentDate.getHours()}:${currentDate.getMinutes()}:${currentDate.getSeconds()}`;

                this.html.set("<i>"+dateString+"</i>");
            },

        })

        new FroalaEditor('#editor', {
            // Add the custom buttons in the toolbarButtons list, after the separator.
            toolbarButtons: [['date', 'italic' , 'bold']]
        });
    </script>
</body>
</html>

By following these steps, you can easily integrate the ability to insert the current date and time into your Froala-powered web applications, providing users with a convenient way to timestamp their content.

Advanced Date Formatting

While the basic formatting methods provided by the Date object are useful, you may sometimes need more advanced date formatting options. In that case, it’s recommended to integrate third-party libraries, such as Moment.js with Froala editor to provide additional date formatting capabilities.

These libraries offer a wide range of formatting options, including the ability to display dates in different languages, time zones, and custom formats.

If you recommend writing an article about how to do that integration, leave a comment below.

Try Froala for Your Next Project

In this article, we’ve explored how to leverage the powerful JavaScript Date object to insert the current date and time into a Froala WYSIWYG editor. By creating a custom toolbar button, we were able to give users a convenient way to timestamp their content directly within the editor interface.

The ability to seamlessly integrate date and time functionality into a WYSIWYG editor can be a valuable feature for a wide range of applications, from content management systems to online forms and note-taking apps. With the flexibility and customization options provided by Froala, developers can tailor this functionality to perfectly fit the needs of their users and their application’s branding.

If you’re looking to enhance your web application’s content creation experience, I encourage you to give Froala a try. With its robust API, extensive feature set, and easy integration, Froala makes it simple to build a WYSIWYG editor that is perfectly suited to your users’ needs.

Get started with Froala today and unlock the power of dynamic date and time integration in your web applications!

In this blog post, we’ll explore the steps to master programmatic command execution and learn how to listen for their related events in Froala. By the end, you’ll have a solid understanding of how to leverage Froala’s advanced API Commands methods and events to build exceptional content editing experiences.

What Are the Types of Commands I Can Execute Programmatically In Froala

There are several types of commands that developers can call in their custom code. Here is the complete list:

1. Format The Selected Text
   1. Bold
      Developers can use the commands.bold() method to format the user-selected text as bold.
   2. Italic
      Developers can use the commands.italic() method to format the user-selected text as italic.
   3. strikeThrough
      The commands.strikeThrough() method helps developers to format the user-selected text as a strikethrough.
   4. Subscript
      The commands.subscript() method helps developers format the user-selected text as a subscript.
   5. Superscript
      The commands.superscript() method helps developers format the user-selected text as a superscript.
   6. Underline
      The commands.underline() method helps developers format the user-selected text as an underlined.
   7. Indent
      Using the commands.indent() method, developers can indent more of the selected paragraphs.
   8. Outdent
      Using the commands.outdent() method, developers can indent fewer of the selected paragraphs.
2. Clear Formatting
   If a developer wants to clear the format applied to the selected text, he can execute the commands.clearFormatting() method.
3. Insert a horizontal line
   The commands.insertHR() method helps developers insert a horizontal line in the editor.
4. Redo
   Using the commands.redo() method, developers can redo the user’s most recent action.
5. Undo
   Using the commands.undo() method, developers can undo the user’s last executed action.
6. Select All
   Using the commands.selectAll() method, developers can select all the content inside the editor.
7. Toolbar
   1. Display The Inline Toolbar
      The commands.show() method displays the inline toolbar at the cursor position.
   2. Open sub-toolbars
      1. The commands.moreText() method opens the more text actions toolbar.
      2. The commands.moreParagraph() method opens the more paragraph actions toolbar.
      3. The commands.moreRich() method opens the more rich text actions.
      4. The commands.moreMisc() method opens the more miscellaneous actions toolbar.
      5. The commands.moreTrackChanges() method opens the track changes actions toolbar.

All the methods do not accept any arguments, and you can call them from the editor instance. For example, to call the moreText command, you can do it like this

var editor = new FroalaEditor('.selector', {}, function () {

  // Call the method inside the initialized event.

  editor.commands.moreText ();

})

In the above code, the commands.moreText() method is called once the editor is initialized. This opens the “More Text” actions toolbar.

Customize The Editor Based on The Executed Commands

The Froala API provides developers with over 100 events that can be used to listen for specific actions performed by the user. Five of these events allow developers to customize the editor’s behavior and appearance based on the executed commands. By leveraging these events, developers can create highly interactive experiences tailored to their users’ needs. Let’s dig deeper into these events.

Execute Actions Prior to Command Execution

The commands.before event is triggered right before a command is executed. This allows developers to perform custom actions or validations before the command is carried out. For example, developers can use this event to display a confirmation dialog, update the UI, or perform any other action.

The command name is passed as the first parameter of the callback function for the commands.before event. To see the full list of commands that trigger this event, refer to the documentation. Depending on the command type, a second parameter may be defined in the callback function, providing information related to the executed command. For example, when the fontSize command is executed, the second parameter will be the selected font size.

Developers can listen to the commands.before event, check which command is being executed, and then take an appropriate action based on that command. For example:

var editor = new FroalaEditor('.selector', {
  events: {
    'commands.before': function (command, param) {
      // Perform custom actions here.
      console.log('Command about to be executed:', command);
      if(command== "fontSize"){
        if(param == "72px")
            this.inlineStyle.apply('color: red;');
      }      
    }
  }
});

In the above example, the `commands.before` event is used to listen for commands before they are executed. In this case, when the fontSize command is about to be executed, the code checks if the selected font size is 72px. If so, it applies a custom inline style to the editor, setting the text color to red. This shows how developers can customize the editor’s behavior based on the specific command being executed.

In the code, we used the inlineStyle.apply method to style the text. Click to learn more about the Froala Inline Style plugin and how it differs from the Inline Class plugin.

Execute Actions Following Command Execution

If you need to run custom code after a specific command is executed, you can use the commands.after event. This event is triggered immediately after a command is executed, allowing you to perform additional actions or update the UI as needed. The callback function for this event receives the same parameters as the commands.before event – the command name and any additional information related to the executed command.

Execute Actions According to the Clicked Button

Froala offers the commands.mousedown(btn) event which is triggered when a button in the editor’s toolbar is clicked. This allows developers to perform custom actions based on the specific button that was clicked. The callback function for this event receives the clicked button element as a parameter, which can be used to identify the button and execute the desired logic.

In the following example, the commands.mousedown event is used to listen for when a button in the editor’s toolbar is clicked. In this case, when the “Bold” button is clicked, the code checks the data-cmd attribute of the clicked button to identify the command. If the command is “bold”, it applies a custom inline style to the editor, setting the text color to red. This demonstrates how developers can customize the editor’s behavior based on the specific button that was clicked.

let editor = new FroalaEditor('#editor', {

        events: {

            'commands.mousedown': function(btn) {
                  // Do something here.
                  // this is the editor instance.
                  let cmd = btn[0].getAttribute('data-cmd');
                  if( cmd == "bold"){
              this.inlineStyle.apply('color: red;');
                  }
  
           }
        }
    }, function () {

});

The Difference Between Before, After, and Mousedown Command Events

Here are the key differences between these events to help you choose the right one:

• The Mousedown event is triggered before the Before and After events.
• The Mousedown event can be triggered by any toolbar button, while the Before and After events are specific to certain commands.
• The callback function for Before and After events may include a second parameter with additional information about the executed command.

Redo and Undo Specific Command Events

The Froala API also provides events for handling redo and undo actions. The commands.redo() event is triggered when the user performs a redo action, while the commands.undo()event is triggered when the user performs an undo action. These events allow developers to customize the editor’s behavior or update the UI in response to these actions.

For example, you could use the commands.redo event to update a counter or button state to reflect the current redo/undo state. Similarly, the commands.undo event could be used to update the UI to show that an action has been undone. By leveraging these events, developers can create a more responsive and interactive editor’s behavior.

Elevate Your Application User Experience

Froala’s powerful API and rich set of events provide developers with the tools to create highly customized and interactive content editing experiences. By leveraging the commands.before, commands.after, and commands.mousedown events, you can execute custom logic at key points in the editing workflow – before and after commands are executed, and when specific toolbar buttons are clicked.

These events, combined with the ability to inspect the executed commands and their parameters, give you granular control over Froala’s behavior. You can use this to display confirmations, update the UI, apply custom styles, and much more. The redo and undo-specific events also allow you to keep your application in sync with the user’s actions.

With this knowledge, you’re now equipped to take your Froala-powered applications to new heights. Start experimenting with command-driven events today and unlock the full potential of this robust WYSIWYG editor. Download Froala for free and try it out for yourself!

The Froala inline styles and inline classes plugins help in styling text but using two different approaches. Each approach has its advantages and disadvantages, and the choice between them depends on the project’s specific requirements. Inline styles are applied directly to the HTML element, while inline classes are applied to the element using a CSS class. The choice between the two depends on factors such as the complexity of the styling, the need for reusability, and the overall maintainability of the codebase.

In this article, we will explore the difference between inline styles and inline classes plugins, and provide guidance on when to use each approach. Understanding the differences between these two plugins can help developers make informed decisions and create more efficient and maintainable web applications.

How Does The Froala Inline Style Plugin Work?

The Froala Inline Style plugin offers the inlineStyles option that is used to define some CSS styles that can be applied to text.

When the Froala Inline Style plugin is activated, a button appears on the editor toolbar that opens a list of the predefined styles. Choosing a style will apply its corresponding CSS rules inline to the selected text allowing end-users to effortlessly enhance the visual appeal of your text.

How Does The Froala Inline Class Plugin Work?

The Froala Inline Class plugin offers the inlineClasses option that is used to define some CSS class names that can be applied to text. The CSS classes themselves should be defined in the page stylesheet.

When the Froala Inline Class plugin is activated, a button appears on the editor toolbar that opens a list of the predefined styles. Choosing a style will apply its corresponding CSS class to the selected text allowing end-users to effortlessly enhance the visual appeal of your text.

Inline Style VS Inline Class

Both plugins offer a user-friendly way to make your text more engaging and visually appealing, helping you stand out with iconic text styles.

The choice between inline styles and inline classes often depends on the specific requirements of the project, such as the complexity of the styling, the need for reusability, and the overall maintainability of the codebase.

Inline styles are useful for simple, one-off styling requirements, as they can be quickly applied and don’t require additional CSS files. However, they can make the HTML code more cluttered and harder to maintain. Inline classes, on the other hand, allow for more modular and reusable styling, as the CSS can be defined in a separate file. This can lead to a more organized and maintainable codebase but may require more upfront effort to set up.

Developers should consider factors such as code maintainability, performance, and overall project requirements when deciding which approach to use. Ultimately, a combination of both techniques may be the most effective solution, allowing for flexibility and consistency in the application’s styling.

What is the difference between Inline Style, Inline Class, and Paragraph Style Plugin?

The Paragraph Style plugin in Froala is a separate plugin that allows users to apply predefined styles to entire paragraphs, rather than just inline text. In contrast, the Inline Style and Inline Class plugins focus on applying styles to selected text within a paragraph. The choice between these plugins depends on the specific needs of the project and the desired level of control over the text formatting.

Learn more about the Paragraph Style plugin.

The Inline Style and Inline Class Plugins in Code

Both plugins are included by default when the Froala packaged JavaScript file is included. However, if you’re using the core editor files only, you may include the plugins individually.

Installation

Use the following code to include the Inline Style plugin:

<script type='text/javascript' src='{url_based_on_your_download_option}/js/plugins/inline_style.min.js'></script>

Use the following code to include the Inline Class plugin:

<script type='text/javascript' src='{url_based_on_your_download_option}/js/plugins/inline_class.min.js'></script>

Activation

When customizing the enabled plugins, ensure that the inlineStyle and inlineClass values are included in the pluginsEnabled array to keep the Inline Style and Inline Class plugins enabled.

new FroalaEditor('#HTMLElement',{

   pluginsEnabled: ['image', 'link', 'video', 'inlineStyle', 'inlineClass']

});

When customizing the editor toolbar buttons, ensure that the inlineStyle and inlineClass values are included in the toolbarButtons array to display the buttons needed to open the dropdown corresponding to each plugin.

new FroalaEditor('#HTMLElement',{

    toolbarButtons: ['inlineStyle', 'inlineClass', 'bold', 'italic', 'underline', 'fontFamily', 'fontSize', '|', 'paragraphFormat', 'align', 'undo', 'redo', 'html'],

});

Styles Definition

For Inline Styles, define styles using inlineStyles option. It is an object where the property name is the text shown in the dropdown menu when the inlineStyle button is clicked while the property’s value is the inline CSS rules that will be applied to the text. For example, if the inlineStyles is

// Define new inline styles.

inlineStyles: {

      'Big Red': 'font-size: 20px; color: red;',

      'Small Blue': 'font-size: 14px; color: blue;'

}

This will display two options on the dropdown menu:

• Big Red: once selected, the editor will wrap the selected text into <span style=”font-size: 20px; color: red;”> </span>.
• Small Blue: once selected, the editor will wrap the selected text into <span style=”font-size: 14px; color: blue;”> </span>.

For Inline Classes, define styles using inlineClasses option. It is an object where the property name represents a CSS class and its corresponding value is the text shown in the dropdown menu when the inlineClasses button is clicked. For example, if the assigned object is

// Define new inline styles.

inlineClasses: {

   'fr-class-code': 'Code',

   'fr-class-highlighted': 'Highlighted',

   'fr-class-transparency': 'Transparent'

}

and define the classes in the CSS code

<style>

  .fr-view .fr-class-highlighted {

    background-color: #ffff00;

  }

  .fr-view .fr-class-code {

    border-color: #cccccc;

    border-radius: 2px;

    -moz-border-radius: 2px;

    -webkit-border-radius: 2px;

    -moz-background-clip: padding;

    -webkit-background-clip: padding-box;

    background-clip: padding-box;

    background: #f5f5f5;

    padding: 10px;

    font-family: "Courier New", Courier, monospace;

  }

  .fr-view .fr-class-transparency {

    opacity: 0.5;

  }

</style>

This will display three options on the  Inline Classes dropdown menu:

• Code: when selected, the editor will toggle the ‘fr-class-code’ class in the selected text.
• fr-class-code: when selected, the editor will toggle the ‘fr-class-highlighted’ class in the selected text.

• fr-class-code: when selected, the editor will toggle the ‘fr-class-transparency’ class in the selected text.

Plugins Methods

The Inline Styles plugin provides the inlineStyle.apply(value) method, which can be used to dynamically apply inline styles to a text. The value parameter is a string that represents the inline CSS style to be applied to the selected text.

The Inline Class plugin provides the inlineClass.apply(value) method, which can be used to dynamically add a specific class to the selected text. The value parameter is the name of the defined class that should be applied to the selected text.

Full Code Example

Here is a full code example:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" />
        <link href='https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css' rel='stylesheet' type='text/css' />

        <style>

          .fr-view .fr-class-highlighted {
            background-color: #ffff00;
          }
        
          .fr-view .fr-class-code {
            border-color: #cccccc;
            border-radius: 2px;
            -moz-border-radius: 2px;
            -webkit-border-radius: 2px;
            -moz-background-clip: padding;
            -webkit-background-clip: padding-box;
            background-clip: padding-box;
            background: #f5f5f5;
            padding: 10px;
            font-family: "Courier New", Courier, monospace;
          }
        
          .fr-view .fr-class-transparency {
            opacity: 0.5;
          }

        </style>
    </head>

    <body>

            <textarea id="editor"></textarea>


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

        <script> 
            new FroalaEditor('div#froala-editor', {
              toolbarButtons: ['inlineStyle', 'inlineClass', 'bold', 'italic', 'underline', 'strikeThrough', 'fontFamily', 'fontSize', '|', 'align', 'undo', 'redo', 'html'],
            
              // Define new inline styles.
              inlineStyles: {
                'Big Red': 'font-size: 20px; color: red;',
                'Small Blue': 'font-size: 14px; color: blue;'
              },
                  inlineClasses: {
                  'fr-class-code': 'Code',
                  'fr-class-highlighted': 'Highlighted',
                  'fr-class-transparency': 'Transparent'
                },
              events: {
                'commands.after': function(cmd) {
                  // Do something here.
                  // this is the editor instance.
                  if(cmd== "strikeThrough"){
                   this.inlineStyle.apply('font-size: 20px; color: red;');
\                  
                  }
                        // this is the editor instance.
                  if(cmd== "bold"){
                   this.inlineClass.apply('fr-class-code');
                  }
                }
              }
            })

        </script>
    </body>

</html>

Balancing Simplicity and Maintainability in Froala’s Rich-Text Editor

Froala, a popular rich-text editor, offers two approaches to enhancing the visual appeal of text in web applications: inline styles and inline classes. Both are powerful tools, but each has its own advantages and disadvantages.

Inline styles, as offered by Froala’s Inline Style plugin, provide a quick and easy way to apply formatting to text. With just a few clicks, you can wrap your selected text in custom CSS rules, making it stand out and grab your users’ attention. This can be particularly useful for simple, one-off styling requirements.

However, inline styles can also lead to cluttered HTML and maintainability issues over time. That’s where Froala’s Inline Class plugin comes in. This approach allows you to define CSS classes in your stylesheet and then easily apply them to text within the editor. While it may require a bit more upfront effort to set up, this modular and reusable approach can result in a cleaner, more organized codebase.

As you continue to build and enhance your web applications, I encourage you to download Froala and experiment with both the Inline Style and Inline Class plugins. Take the time to carefully consider the tradeoffs between the two approaches and choose the one that best fits your specific needs. With Froala’s powerful tools and the right techniques, you can create engaging and visually appealing content that captivates your users and helps your application stand out from the crowd.

In this blog post, we’ll take a deep dive into the four main editing modes provided by Froala: Classic, IFrame, Inline, and Document. We’ll explore the key characteristics of each mode, their benefits, and the scenarios where they are best suited. By the end, you’ll have a solid understanding of Froala’s editing capabilities and be equipped to choose the right mode for your content creation workflows.

Classic Froala Editor

The Classic mode is the default and most commonly used editing mode in Froala. In this mode, the editor is displayed as a standalone element on the page, typically within a <div> or <textarea> element.

This mode is the default mode in the Froala editor. You don’t need any special configuration when you initialize the editor.

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" />
        <link href='https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.min.css' rel='stylesheet' type='text/css' />
    </head>

    <body>

        <div id="froala-editor"></div>

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

         new FroalaEditor('div#froala-editor');

        </script>
    </body>

</html>

In this mode, the editor toolbar is always visible at the top of the editor. If you want to make the toolbar stay visible as you scroll the content, you need to enable the toolbarSticky option.

 new FroalaEditor('div#froala-editor', {
    toolbarSticky: true
  })

You can also display the toolbar at the bottom instead of the top of the editor by setting the toolbarBottom option to true.

new FroalaEditor('div#froala-editor', {

    toolbarBottom: true

  })

Explore how to customize the Froala editor toolbar.

The Froala classic mode is suitable for scenarios where you want the editor to be a distinct element on the page, such as in a content management system or a form. It provides a familiar and intuitive interface for users to input and format text.

IFrame Froala Editor

The IFrame mode embeds the Froala editor within an <iframe> element. This isolates the editor’s content and styling from the main page, providing a more secure and independent editing environment.

This mode is useful when you need to ensure the editor’s content and styles do not interfere with the surrounding page. It can be particularly helpful in scenarios where the page has complex layouts or existing styles that could potentially conflict with the editor.

The user interface of the editor is the same as it is in the classic mode.

To enable this mode, set the iframe option to true.

new FroalaEditor('div#froala-editor', {

iframe: true

})

Full Page Mode

The Full Page mode is similar to the classic mode but allows the usage of HTML, HEAD, BODY tags and DOCTYPE declaration. This mode is useful when you need to edit the entire web page, including the <head> and <body> sections. It provides a more comprehensive editing experience, allowing you to modify the page’s metadata, styles, and overall structure. The Full Page mode is particularly beneficial when working on standalone HTML pages or templates that require a complete document-level editing capability.

To enable the Full Page mode, set the fullPage option to true when initializing the Froala Editor.

new FroalaEditor('div#froala-editor', {
   fullPage: true
 })

Inline (Distraction-Free) Mode

The minimalist interface of this mode helps you focus on your content. In Froala’s Inline mode, the editor’s toolbar remains accessible but stays hidden until needed, providing a clean and minimalist interface, ensuring a seamless and uninterrupted writing experience. This mode makes it easier for users to focus on their content.

var editor = new FroalaEditor('div#froala-editor',{

toolbarInline: true,

});

The toolbarVisibleWithoutSelection option allows you to control whether the toolbar should be displayed when the user:

1. Select content within the editor.
2. Focuses on the editor without selecting any content.

This gives you the flexibility to decide when the toolbar should be visible to the user.

var editor = new FroalaEditor('div#froala-editor',{

toolbarInline: true,

toolbarVisibleWithoutSelection: true,

});

By default, Froala displays Character and Word Counts at the bottom of the editing area. However, it may be feasible to hide this information in this mode.

var editor = new FroalaEditor('div#froala-editor',{

toolbarInline: true,

toolbarVisibleWithoutSelection: true,

charCounterCount: false,

wordCounterCount: false

});

This mode is suitable for scenarios where you want to provide a seamless editing experience within the page’s content, such as in a blog post or a content-heavy website.

Explore Froala’s inline editing mode.

Document Mode

The Document mode in Froala is similar to the classic mode but with a different default toolbar configuration optimized for creating online documents. The editing area is taller, providing an A4 page layout design. However, this mode does not offer page break, headers, or footers features. The Document mode is best suited for scenarios where you need a rich text editor with a document-like appearance, such as in a word processor or a report generator. The increased editing area height makes it easier to work with longer-form content.

The content is editable within the editor, and the changes are reflected in the underlying HTML structure.

To enable this mode, set the documentReady option to true.

new FroalaEditor('div#froala-editor',{

documentReady : true,

});

Edit in Popup

The Froala editor’s “Edit in Popup” mode allows users to quickly update text content within a focused popup environment. In this mode, the toolbar functionality is not available, making formatting a text is not an option but users can easily make simple text updates without the complexity of the complete editor interface. To enable this mode, set the editInPopup option to true when initializing the Froala editor. The popup will appear when the user focuses on the text, providing a streamlined experience for updating specific content areas within your application.

new FroalaEditor('div#froala-editor',{

editInPopup : true,

});

What Are Froala Initialize Modes?

Froala is a flexible editor that can be initialized on different HTML elements, giving different UI and options for each.

The different modes we have discussed in this article can be applied when the editor is initialized on <div>, <p>, or <textarea> elements. However, the Froala editor can be initialized on other elements where these modes will not be applicable. For example:

• Initialize on a Button: in this mode, a popup will be displayed to update the button text.
• Initialize on an Image: The image popup will be displayed to replace or edit the image.
• Initialize on a link: allowing you to update, remove, and set link attributes.

Conclusion

Froala rich text editor offers a variety of editing modes to cater to different use cases. The choice of editing mode will depend on the specific requirements of your project and the type of editing experience you want to provide to your users. By understanding the differences between the Classic, IFrame, Inline, and Document modes, you can choose the most appropriate mode for your project and provide a seamless and efficient editing experience for your users.

Try Froala for free and explore its different modes.

In this article, we aim to enhance the user experience by enabling image manipulation before insertion in the editor. Users can crop, flip, rotate, draw, and add shapes, icons, text, mask filters, and image filters using the Toast UI Image editor. This editor is integrated flawlessly with the Froala editor using its Image Tui Plugin.

With the Image Tui Plugin, users can effortlessly enhance their content with visually striking images that perfectly match their desired aesthetic. This empowers content creators to produce more engaging and visually appealing web pages without the need for specialized image editing software. Let’s learn how it works.

What is The Toast UI Image Editor?

The Toast UI Image Editor is a free, open-source JavaScript tool for editing images using HTML5 Canvas. It offers a user-friendly interface and powerful image filters, making it a convenient tool for image editing. The editor is widely supported across major web browsers, including Chrome, Internet Explorer 10+, Edge, Safari, and Firefox. Its responsive design ensures a good user experience on screens with a minimum size of 550 x 450 pixels. The editor theme can be easily customized using the editor API.

The Toast UI Image Editor Features

The editor comes with a wide range of great photo manipulation features, suitable for most use cases:

• Load image to canvas
• Undo/Redo (With shortcut)
• Download
• Reset
• Delete Object(Shape, Line, Mask Image…)
• Crop
• Flip
• Rotation
• Resize
• Free drawing
• Line drawing
• Shape
• Icon
• Text
• Mask Filter
• Image Filter
  • Grayscale
  • Invert
  • Sepia
  • Blur Sharpen
  • Emboss
  • Remove-white
  • Brightness
  • Noise
  • Pixelate
  • Color filter
  • Tint
  • Multiply
  • Blend

Integrating The Toast UI Image Editor With The Froala WYSIWYG Editor

The integration between the Toast UI Image Editor and Froala WYSIWYG editor is very simple, thanks to the Image Tui plugin.

Include Froala Editor Files

Let’s begin with a basic setup of Froala editor in a simple HTML web page:

1. Include Froala Stylesheet and JavaScript files.
2. Add HTML element to load editor at.
3. Add a script with the Froala initialization code.

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" />
        <link href='https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.min.css' rel='stylesheet' type='text/css' />
        <style>
            body{
                background-color: black;

            }
            .container{
                margin: 5% auto;
                width: 80%;
                display: block;
            }

            .container h1{
                color: #fff;
                text-align: center;
            }

        </style>
    </head>

    <body>
        <div class="container">
            <h1 class="header">Let's build something beautiful</h1>
            <div id="example"></div>
        </div>

        <script type='text/javascript' src='https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.min.js'></script>  
        <script> 
            var editor = new FroalaEditor('#example');
        </script>
    </body>

</html>

This will load the basic Froala editor features.

Include The Toast UI Image Editor Files

To use the Toast UI Image Editor, include its stylesheet and JavaScript files.

        <link rel="stylesheet" href="https://uicdn.toast.com/tui-color-picker/latest/tui-color-picker.css">
        
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.7/fabric.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/tui-code-snippet.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/tui-image-editor.min.js"></script>

Include The Froala TUI Image Plugin Files

The Froala TUI Image plugin requires Froala’s Image plugin to be active. Let’s include the stylesheet and JavaScript files for the image and TUI plugins.

        <link href='https://cdn.jsdelivr.net/npm/froala-editor@latest/css/plugins/image.min.css' rel='stylesheet' type='text/css' />
        <link href='https://cdn.jsdelivr.net/npm/froala-editor@latest/css/third_party/image_tui.min.css' rel='stylesheet' type='text/css' />
    
        <script type='text/javascript' src='https://cdn.jsdelivr.net/npm/froala-editor@latest/js/plugins/image.min.js'></script> 
        <script type='text/javascript' src='https://cdn.jsdelivr.net/npm/froala-editor@latest/js/third_party/image_tui.min.js'></script>

How It Works

When you run the editor with the above setup, you can edit images using the Toast UI Image Editor by following these steps:

1. Insert an image into the editor.
2. Click on the image to edit it.
3. Click on the “Advanced Edit“ button from the displayed popup.
4. Start editing the image using the Toast UI Image Editor.
5. Save changes to use the edited image instead of the original one.

Customizing The Froala Editor

While customizing the editor, keep your eye on the following options to avoid accidentally deactivating the Toast UI Image Editor.

pluginsEnabled

This option tells the editor which plugins are enabled and can be used by users. If you are customizing this option, make sure you have added the image and the imageTUI plugins.

var editor = new FroalaEditor('#example',{

    pluginsEnabled: ['image', 'imageTUI'],

});

toolbarButtons

This option controls the buttons displayed on the Froala toolbar. If you are customizing this setting, ensure that you have included the InsertImage button.

var editor = new FroalaEditor('#example',{

    pluginsEnabled: ['image', 'imageTUI'],

    toolbarButtons: ['insertImage'],

});

imageEditButtons

This option determines the buttons shown on the Edit Image popup. Make sure the imageTUI button is included. This will allow users to open the TUI image editor.

var editor = new FroalaEditor('#example',{

    pluginsEnabled: ['image', 'imageTUI'],

    toolbarButtons: ['insertImage'],

    imageEditButtons: ['imageReplace', 'imageAlign', 'imageCaption', 'imageRemove', 'imageTUI']

});

Customizing The TUI Plugin

The Toast UI Image Editor has a powerful API that helps customize the features displayed to the user and the editor UI. When the Toast UI Image Editor is integrated into the Froala editor through the TUI plugin, you can customize the TUI editor by utilizing the imageTUIOptions option.

            var editor = new FroalaEditor('#example',{
                pluginsEnabled: ['image', 'imageTUI'],
                toolbarButtons: ['insertImage'],
                imageEditButtons: ['imageReplace', 'imageAlign', 'imageCaption', 'imageRemove', 'imageTUI'],
                imageTUIOptions: {
                    includeUI: {
                        initMenu: "filter",
                        menuBarPosition: "right",
                        theme: {
                            "menu.activeIcon.path": "https://cdn.jsdelivr.net/npm/[email protected]/dist/svg/icon-b.svg",
                            "menu.disabledIcon.path": "https://cdn.jsdelivr.net/npm/[email protected]/dist/svg/icon-a.svg",
                            "menu.hoverIcon.path": "https://cdn.jsdelivr.net/npm/[email protected]/dist/svg/icon-c.svg",
                            "menu.normalIcon.path": "https://cdn.jsdelivr.net/npm/[email protected]/dist/svg/icon-d.svg",
                            "submenu.activeIcon.name": "icon-c",
                            "submenu.activeIcon.path": "https://cdn.jsdelivr.net/npm/[email protected]/dist/svg/icon-c.svg",
                            "submenu.normalIcon.name": "icon-d",
                            "submenu.normalIcon.path": "https://cdn.jsdelivr.net/npm/[email protected]/dist/svg/icon-d.svg"
                        }
                    }
                }

            });

Do I need to subscribe to a specific plan for using the Froala TUI plugin?

The Froala TUI plugin, as well as other Froala plugins, are available in any of the Froala’s plans. Check our pricing page and select the plan that best fits your needs. Froala’s flexible licensing options ensure you can utilize the full capabilities of the TUI plugin, tailored to your specific requirements, with no additional costs or restrictions.

Does Froala Offer a Free Trial?

You can try Froala for free by downloading the editor and using it on your localhost or staging site. The unlicensed editor displays an alert message under the toolbar; however, it doesn’t restrict any features of the editor. Once you are ready to use the editor in production, purchase a license to get the API key and remove the unlicensed message.

Elevate Your Content with Visually Stunning Images

The integration of the Toast UI Image Editor with the Froala WYSIWYG editor through the Image TUI plugin is a game-changer for content creators. This powerful combination empowers you to effortlessly enhance your web content with visually striking, professionally edited images.

No longer are you limited to basic image insertion. With the Toast UI Image Editor, you can unleash your creativity, cropping, flipping, rotating, drawing, and applying a wide range of filters to your images – all within the familiar Froala editor interface. This allows you to produce more engaging, visually appealing content without the need for specialized image editing software.

So what are you waiting for? Start your Froala WYSIWYG editor free trial today. Captivate your audience, boost your brand, and take your online presence to new heights. The tools are at your fingertips – all you need to do is unlock their potential.

In this article, we will explore the Froala draggable plugin in depth. We will look at setting up the plugin, its options, and different usage examples.

What is the Froala Draggable Plugin?

The Froala draggable plugin adds the capability to drag content such as images and videos inside the Froala editor. This allows users to move and rearrange the content using their mouse or touch screen. Using the Froala draggable plugin has several advantages such as

• Improved user experience:
  Adding a drag-and-drop feature makes your application more user-friendly and improves the overall user experience.
• Increased productivity
  Dragging content using a mouse or touch screen is much faster than cutting content and re-pasting it. As a result, users will be able to complete more tasks in the same time frame.

Installation and Setup of Froala Draggable Plugin

To set up the Froala Draggable plugin, you have to include its script and stylesheet files alongside the core Froala editor scripts and stylesheet files

<!-- Froala core editor Files -->
<link href='{url_based_on_your_download_option}/css/froala_editor.min.css' rel='stylesheet' type='text/css' />

<script type='text/javascript' src='{url_based_on_your_download_option}/js/froala_editor.min.js'></script>


<!-- Froala Draggable plugin files -->
<link href='{url_based_on_your_download_option}/css/plugins/draggable.min.css' rel='stylesheet' type='text/css' />

<script type='text/javascript' src='{url_based_on_your_download_option}/js/plugins/draggable.min.js'></script>

Note that if we use the .pkgd version of the Froala editor, you do not have to include Draggable plugin scripts and stylesheet files separately. The .pkgd version already includes all Froala’s default plugin files.

Once the plugin files are included, it will be active by default when initializing the editor

new FroalaEditor('#HTMLElement');

However, if you’re customizing the pluginsEnabled option, you must include the Draggable plugin:

new FroalaEditor('#HTMLElement',{

     pluginsEnabled: ['image', 'link', 'video', 'draggable', 'print']

});

Using the Draggable Plugin

If the Draggable plugin is enabled and there are images or videos inside the editor, users can drag these elements as follows:

• Click on the element.
• Drag the element into a new position within the editor.
• Release the element.

Dragging elements as described above is impossible if the Draggable plugin is disabled.

Customizing the Draggable Plugin

Options

The Draggable plugin provides developers with a dragInline API option. This option allows developers to control how the dragged elements are positioned within the editor. When set to true, the dragged items can be placed inside inline elements, such as text. Disabling this option ensures that the dragged elements are positioned between block-level tags. This provides more control over the layout and structure of your content.

new FroalaEditor('#HTMLElement',{
     dragInline: false,
     pluginsEnabled: ['image', 'link', 'video', 'draggable', 'print']

});

Events

The plugins register two events:

• The element.beforeDrop event is fired when the user starts dropping the dragged element into a new or the same position (by releasing a mouse button or hitting the escape key).
• The element.dropped event is fired when the element is dropped either in a new or the same position.

new FroalaEditor('div#froala-editor', {
  dragInline: false,
  pluginsEnabled: ['image', 'link', 'draggable', 'print'],
  events: {
    "element.beforeDrop": function(element) {
      console.log("beforeDrop");
    },
    "element.dropped": function(element, t) {
      console.log("droppped");
    },

  }
})

Both events pass the dragged element as the first argument of the callback function.

If more control is required over the dragging and dropping process, JavaScript events can be utilized, such as:

• drag
• dragend
• dragenter
• dragleave
• dragover
• dragstart
• drop

To utilize these events, register an event handler for these events inside the editor’s initialized event using the on method.

new FroalaEditor('div#froala-editor', {
  dragInline: false,
  pluginsEnabled: ['image', 'link', 'draggable', 'print'],
  events: {
    "element.beforeDrop": function(element) {
      console.log("beforeDrop");
    },
    "element.dropped": function(element, t) {
      console.log("droppped");
    },
    'initialized': function() {
      // Do something here.
      var editor = this;

      editor.events.on('drop', function(dropEvent) {
        console.log("drop");
        console.log(dropEvent);

      });
    }
  }
})

Comparison of dragging feature between TinyMCE and Froala

At the time of writing this article, I went to the official TinyMCE full feature example page, I tried to drag the TinyMCE logo image but it didn’t move. Clicking on the image to drag it makes the image selected, but once I try to move it down, it selects the text below instead of dragging the image.

I copied the TinyMCE editor content and pasted it into the Froala editor full-featured example, moving the TinyMCE logo by drag and drop was a piece of cake.

Moreover, unlike Froala:

• TinyMCE doesn’t provide options to customize drag-and-drop behavior.
• TinyMCE only supports browser-native dragging events.

Overall, Froala provides a better user drag-and-drop experience.

Do I need to subscribe to a specific plan for using the Froala Draggable plugin?

The Froala draggable plugin, as well as other Froala plugins, are available in any of the Froala’s plans. Check our pricing page and select the plan that best fits your needs. Froala’s flexible licensing options ensure you can utilize the full capabilities of the draggable plugin, tailored to your specific requirements, without any additional costs or restrictions.

What is the difference between Froala’s annual and perpetual licenses?

Froala’s annual license lets you use the Froala editor for a full calendar year. Within this year, you can update your editor to the new releases. After that, you need to renew your license to continue using the editor in your product.

Froala’s perpetual license lets you use any version of the Froala editor that was released within one year of your license purchase, forever. To use versions that were released after that, you can renew your license at a discounted cost.

Can I test the editor before purchasing a license?

You may download the editor from our download page and test it at any time, without spending money. While testing, an unlicensed message will be displayed, however, it doesn’t limit any of the editor’s features. Once you are ready to use the editor in production, purchase a license to get the API key and remove the unlicensed message.

Conclusion

The Froala draggable plugin offers a seamless and customizable drag-and-drop experience, surpassing the capabilities of TinyMCE’s dragging functionality. With options to control the positioning of dragged elements and events to monitor the dragging process, Froala provides developers with greater control over the content structure. Froala’s flexible licensing, including annual and perpetual options, ensures the draggable plugin can be utilized effectively without additional costs or restrictions, making it a compelling choice for content-rich web.

In a React CMS application, initializing the React WYSIWYG editor after clicking an external button can improve the user experience in case the editor is not needed immediately when the page loads. This approach, known as lazy loading, helps to speed up the initial page load time, which is a critical factor in user experience.

Why are React CMS Applications popular?

React CMS Applications are popular because they offer a powerful combination of React’s component-based architecture and the flexibility of a Content Management System (CMS), making them a go-to choice for developers looking to build dynamic, scalable, and efficient web applications.

React CMS applications are popular for several reasons:

1. Scalability: React CMS applications can handle large amounts of traffic and data without breaking down, making them perfect for businesses that experience sudden spikes in traffic or have many users.
2. Flexibility: Whether it’s a change in design or functionality, React CMS applications can be easily customized and adapted to meet the specific needs of a business.
3. Fast development cycles: developers can quickly create and deploy new features and updates in React CMSs, allowing businesses to respond fast to changing market demand and customer needs.
4. Seamless user experience: React CMS applications provide a seamless user experience, with fast loading times and intuitive navigation, increasing customer satisfaction and loyalty.
5. Community support: React CMS has a large and active community of developers, which means plenty of resources are available for troubleshooting and solving problems.
6. Integration with other technologies: React CMS can be easily integrated with other technologies, such as server-side rendering, GraphQL, and state management libraries, allowing developers to create complex and sophisticated applications.
7. Performance: React CMS applications are optimized for performance, using techniques such as lazy loading and code splitting, to ensure that the application loads quickly and runs smoothly.

Why Does React CMS Use WYSIWYG Editors?

WYSIWYG (What You See Is What You Get) editors enable users to create and edit content while applying the inserted format in real time. Moreover, it doesn’t require users to be familiar with coding. This streamlines the content creation and management process, making it more accessible for non-technical users. Professional WYSIWYG editors can provide your team with many editing features, helping them create professional-looking content easily. The powerful React WYSIWYG editor, Froala, has over 100 features.

How to Lazy Load Froala WYSIWYG Editor in React application

Let’s look at how to use lazy loading to keep the Froala React WYSIWYG Editor from loading until needed.

Prerequisites

• JavaScript (including some of the newer, ES2015 features)
• Basic understanding of React
• Node.js and npm installed

Setting Up The React Project

If you don’t already have a React project set up, the create-react-app makes it easy to create one:

npm uninstall -g create-react-app

npm install -g create-react-app

npx create-react-app lazy-load-froala-app

Cd lazy-load-froala-app

Next, install the react-froala-wysiwyg package, which provides the Froala Editor component for React:

npm install react-froala-wysiwyg --save

The --save flag is important to add the React Froala WYSIWYG editor package to the dependencies in your package.json file. This ensures that the Froala editor is included in your deployed application.

Integrating The Editor

You should integrate the editor into where you want to display the editor. For simplicity, we will suppose we want to display on the homepage. Edit the app.js file.

• Import the editor CSS stylesheet so the editor UI appears correctly.
• Import the FroalaEditorComponent so you can use the component inside the app function.
• Import the required plugins.
• Add the customization options
• Add initialization text

import React, { useState  } from 'react';
import './App.css';

//froala_style.min.css: Only needed if you display the editor content outside the rich text editor to preserve the look of the edited HTML.
import 'froala-editor/css/froala_style.min.css';

//froala_editor.pkgd.min.css: Contains the editor UI styles, such as the toolbar, buttons, popups, etc.
import 'froala-editor/css/froala_editor.pkgd.min.css';

// Import all Froala Editor component;
import FroalaEditorComponent from 'react-froala-wysiwyg';

// Import all Froala Editor plugins;
import 'froala-editor/js/plugins.pkgd.min.js';

// Render Froala Editor component.
function App() {
  const [model, setModel] = useState("the integration of CMS with React has become a significant trend in web development, offering developers the best of both worlds: the robustness of a CMS and the agility of React.");

  const handleModelChange= (event) =>{

    setModel(event)
  
  }  


  //Froala custom options
    let config = {
      heightMin: 300,
      events : {
        'contentChanged' : function(e, editor) {
          console.log('test');
        }
      }
    };

    return (
    <div className="App">
      <header className="App-header">
      <h1>Lazy load Froala app</h1>
        <FroalaEditorComponent
            model={model}
            onModelChange={handleModelChange}
            config={config}
          />

      </header>
    </div>
  );
}

export default App;

Running the app will display the Froala editor.

For more explanation about the above code, refer to the “Integrate Froala with React“ guide.

Displaying the Editor on the Button Click

To display the editor on click, we need to implement the following:

• Set up a state to track whether Froala should be displayed or removed.
• Create a button that, when clicked, updates the state to initialize Froala.
  • A button to display the editor.
  • A button to hide the editor and display its content only.
• Conditionally render the Froala Editor based on the state.
• Import the FroalaEditorView component to display the editor content outside the editor correctly.

import React, { useState  } from 'react';
import './App.css';

//froala_style.min.css: Only needed if you display the editor content outside the rich text editor to preserve the look of the edited HTML.
import 'froala-editor/css/froala_style.min.css';

//froala_editor.pkgd.min.css: Contains the editor UI styles, such as the toolbar, buttons, popups, etc.
import 'froala-editor/css/froala_editor.pkgd.min.css';

// Import core Froala Editor component;
import FroalaEditorComponent from 'react-froala-wysiwyg';

// Import the component to display the editor content outside the editor;
import FroalaEditorView from 'react-froala-wysiwyg/FroalaEditorView';

// Import all Froala Editor plugins;
import 'froala-editor/js/plugins.pkgd.min.js';

// Render Froala Editor component.
function App() {
  const [model, setModel] = useState("the integration of CMS with React has become a significant trend in web development, offering developers the best of both worlds: the robustness of a CMS and the agility of React.");

  const handleModelChange= (event) =>{

    setModel(event)
  
  }  

  //Set up a state to track whether Froala should be displayed or removed.
  const [initializeEditor, setInitializeEditor] = useState(false);

  const handleButtonClick = (flag) => {
  setInitializeEditor(flag);
  };

  //Froala custom options
    let config = {
      heightMin: 300,
      events : {
        'contentChanged' : function(e, editor) {
          console.log('test');
        }
      }
    };

    return (
    <div className="App">
      <header className="App-header">
      <h1>Lazy load Froala app</h1>
      {
        //Conditionally render the Froala Editor based on the state.
      }
        { initializeEditor && <FroalaEditorComponent
            model={model}
            onModelChange={handleModelChange}
            config={config}
          />
        }
        
        { !initializeEditor && <FroalaEditorView
          model={model}
        />
        }

      { 
      // Add button
       }
      <button onClick={() => handleButtonClick(true)}>Edit Content</button>
      <button onClick={() => handleButtonClick(false)}>View Content</button>


      </header>
    </div>
  );
}

export default App;

Conclusion

Enabling the Lazy loading technique in React CMS improves the overall user experience of your application. Ask yourself if you need the Froala React WYSIWYG Editor component to be initialized immediately after the page loads. If not, implement the lazy load technique as described above.

Try it yourself and once you are ready to use Froala in production, subscribe to the plan that suits you.

In this guide, we will demonstrate how to integrate the Froala WYSIWYG editor within a standalone Angular component, particularly when Server-Side Rendering (SSR) is disabled. The Froala editor is known for its rich text capabilities and user-friendly interface, making it perfect for applications needing powerful content management abilities. By integrating Froala, developers can provide users with a robust editing tool that improves the functionality and user experience of web applications.

Start Developing Your Angular App

For those who are fresh, make sure you have Angular CLI installed. The Angular CLI is a tool on the command line that allows you to initialize and manage Angular projects right from the terminal.

If it is not installed, run this command:

npm install -g @angular/cli

Now you can run “ng” commands in your terminal.

Run the following command to create a new Angular app:

ng new froala-standalone-app

This will prompt you with the following

1. Which stylesheet format would you like to use? (CSS/SCSS/Sass/Less)
   Select your preferred format.
2. Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? (y/N)
   It inquires if you would like to configure your application to render pages on the server side and create static HTML files for your pages while building. Type “N” to turn off SSR.
   Enabling SSR and SSG means that your Angular app will be more performant and SEO-friendly, but it also implies a different build and deployment process, as you’ll need to handle the server-side and static aspects of your application. We will not cover this in this tutorial.

After completing the prompts, an Angular project structure will be created in a new folder called “froala-standalone-app”. Navigate into the project directory using

cd froala-standalone-app

As of Angular 17, using the “ng new” command generates standalone components as the default. No longer will an “app.module.ts” exist.

Open the folder in your IDE. The project structure is as follows:

In the “src” folder, you will find the “index.html” file and the default component “app”.

Integrate Froala With a Standalone Angular App

Let’s create another component with the name “wysiwyg“ to use for integrating the Froala editor into your application:

ng generate component wysiwyg

The command above will create a new folder, “wysiwyg”, inside the “src/app” directory. This folder will contain the following files for the “wysiwyg” component:

• wysiwyg.component.css
• wysiwyg.component.html
• wysiwyg.component.spec.ts
• wysiwyg.component.ts

Install the Froala Angular SDK

let’s install the Froala Angular rich-text editor into your Angular application. The Froala Angular SDK includes the essential tools and components to easily integrate the functionality of the Froala editor software into your standalone Angular components.

npm install angular-froala-wysiwyg

Once the installation is complete, the “angular-froala-wysiwyg” will appear in the “dependencies” section of the package.json file.

Styling the Froala Editor

Ensure that Froala’s style resources are included in your standalone Angular application. In angular.json, add Froala stylesheets under the “styles“ array.

"styles": [

"src/styles.css",

"node_modules/froala-editor/css/froala_editor.pkgd.min.css",

"node_modules/froala-editor/css/froala_style.min.css"

],

The “froala_editor.pkgd.min.css“ includes the styles for the core editor and all Froala plugins.

The “froala_style.min.css“ includes the styles needed for displaying the content created by the editor outside the editor.

Setting Up The Froala Component

Open the “wysiwyg.component.ts“ and import the FroalaEditorModule and FroalaViewModule components and add them to the “imports“ array

import { Component } from '@angular/core';
import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-wysiwyg';

@Component({
  selector: 'app-wysiwyg',
  standalone: true,
  imports: [FroalaEditorModule, FroalaViewModule],
  templateUrl: './wysiwyg.component.html',
  styleUrl: './wysiwyg.component.css'
})
export class WysiwygComponent {

}

Navigate to “wysiwyg.component.html” and add

<div [froalaEditor]>Hello, Froala!</div>

Now we can use “wysiwyg“ component to display the Froala editor in any other component in your Angular application.

Displaying Froala on the main page

Let’s add “wysiwyg“ component to the “app” component to display Froala on the main page.

Open “app.component.ts“ and import WysiwygComponent

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';

import { WysiwygComponent } from './wysiwyg/wysiwyg.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, WysiwygComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'froala-standalone-app';
}

Open “app.component.html“ and add the following code to include the “wysiwyg” component:

<app-wysiwyg></app-wysiwyg>

This code will render the Froala editor on the main page of your Angular application.

Start your App

Next, you can serve the app by running `ng serve`. This command compiles the application and serves it locally, typically on `http://localhost:4200/`. You can now access your Angular app in a web browser to see the initial application setup.

The editor will be displayed on the homepage.

Including Froala Plugins

You may notice that Froala is displayed with just its basic features. That’s because we haven’t included the plugin’s JavaScript files. Open the “wysiwyg.component.ts“ and add

import 'froala-editor/js/plugins.pkgd.min.js';

This will include all Froala default plugins. Return to `http://localhost:4200/`, you will find the full-featured editor is loaded.

If you are using just a few features, you can include the JavaScript files for the required plugins instead of “plugins.pkgd.min.js”. For example:

// import 'froala-editor/js/plugins.pkgd.min.js';

// Import plugins one by one

import 'froala-editor/js/plugins/align.min.js';

import 'froala-editor/js/plugins/image.min.js';

Customizing the Editor Options, Initial Content, and Setup Events

By adjusting the options, setting the initial content, and defining event handlers, you can create a unique and personalized editing experience for your users based on your specific requirements.

Inside the “WysiwygComponent“ class, define:

• A string with the editor’s initial HTML content
• An array containing the customized options, including the “events” option where you can set your editor events handlers.

import { Component } from '@angular/core';
import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-wysiwyg';
// import 'froala-editor/js/plugins.pkgd.min.js';
// Import plugins one by one
import 'froala-editor/js/plugins/align.min.js';
import 'froala-editor/js/plugins/image.min.js';

@Component({
  selector: 'app-wysiwyg',
  standalone: true,
  imports: [FroalaEditorModule, FroalaViewModule],
  templateUrl: './wysiwyg.component.html',
  styleUrl: './wysiwyg.component.css'
})
export class WysiwygComponent {
  
  editorContent = 'Learn more about <a href="https://froala.com/angular-rich-text-editor/">Froala Angular WYSIWYG Editor</a>';
  
  public options: Object = {

    toolbarButtons: ['alignRight', 'bold', 'insertImage'],

    events: {
      'froalaEditor.contentChanged': function () {
        console.log('Content updated!');
      },
    },
  };
  
}

Then, open “app.component.html“ and modify it

<div [froalaEditor]="options" [(froalaModel)]="editorContent"></div>

Now the editor should look like

Using the editor instance from the callback arguments, you can call editor methods as described in the method docs.

Using the editor content outside the editor

To display the editor content in other elements in your application, you can utilize the froalaView component and the variable you have passed to the froalaModel attribute of the froalaEditor component. Open the “app.component.html“ file and modify it to

<p>wysiwyg works!</p>

<div [froalaEditor]="options" [(froalaModel)]="editorContent"></div>

<h2>Preview the editor content </h2>

<hr>

<div [froalaView]="editorContent"></div>

Now open your homepage, start editing the editor content, and notice your changes appear outside it too.

Conclusion

By integrating the Froala HTML editor software in the Angular standalone component using the Angular Froala SDK, you can enhance the editing experience and functionality in your application.

In this article, we explored how to integrate the Froala editor into a standalone Angular component while Server-Side Rendering is disabled. By following our step-by-step guide, you learned how to create a new Angular app, set up the Froala Angular rich-text editor, customize editor options, and display editor content outside the editor.

Now that you have the tools to enhance your Angular application with the Froala editor, why not give it a try? Start creating dynamic and interactive content for your users today by incorporating this powerful editor into your projects. Happy coding!

By integrating Froala with MathType, you can easily insert math equations and chemistry formulas in the Froala editor. In this blog post, we will learn how to integrate Froala and mathType.

What is MathType?

MathType is an intuitive solution for creating quality math formulas in your documents and digital content. It is the leading formula editor and equation writer used by K-12 and university STEM students and faculty worldwide.

MathType has a user-friendly interface that makes writing scientific content on your computer fun. Forget about having to learn LaTeX to write math on a computer.

MathType has a handwriting interface powered with AI to convert your handwritten formula into a clean digital equation ready to be used in the editor.

MathType is not just for math equations but also provides a tool for handling chemistry formulas.

MathType is designed to meet accessibility standards in order to make the software accessible to individuals with disabilities. It follows the WCAG 2.0 guidelines from W3C, making sure content can be read by assistive technologies and operated with a keyboard.

Incorporating Froala HTML editor includes MathType capabilities, enabling easy writing of math equations and chemical formulas in your WYSIWYG editor.

How Can I Integrate MathType With Froala?

• include Froala stylesheet and scripts files and the element you want to initialize the editor in your HTML page

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" />
        // Froala Stylesheet
        <link href='https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css' rel='stylesheet' type='text/css' />
    </head>

    <body>
        <!-- HTML element for displaying the editor -->
        <div id="editor"></div>
        <!-- Froala JS file -->
        <script type='text/javascript' src='https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js'></script>  

    </body>

</html>

• Install the MathType for Froala npm module by running the following command:

npm i @wiris/mathtype-froala3

•  Include the MathType-Froala plugin script in your HTML page

<script src="node_modules/@wiris/mathtype-froala3/wiris.js"></script>

• Initialize the editor

new FroalaEditor('#editor', {
   // Add MathType and ChemType buttons to the toolbar and the image menu:
   toolbarButtons: ['wirisEditor', 'wirisChemistry'], 
   quickInsertButtons: ['image', 'table', 'wirisEditor', 'wirisChemistry'],
   // Allow all tags, in order to allow MathML:
   htmlAllowedTags:  ['.*'],
   htmlAllowedAttrs: ['.*'],
   // Allow empty tags on these next elements for proper formula rendering:
   htmlAllowedEmptyTags: ['mprescripts', 'none', 'textarea', 'a', 'iframe', 'object', 'video', 'style', 'script', '.fa', '.fr-emoticon', '.fr-inner', 'path', 'line', 'hr'],
});

In the above code:

• We customized the editor toolbar buttons to display a button for adding math equations “wirisEditor“ and a button for adding chemistry formulas “wirisChemistry“ using `toolbarButtons` option.
• We also customized the `quickInsertButtons` option to display the MathType buttons on the Quick Insert toolbar. This toolbar appears when you have the cursor on a blank new line.
• Additionally, we set the `htmlAllowedTags`, `htmlAllowedAttrs`, and `htmlAllowedEmptyTags` properties to ensure proper rendering of formulas in the editor and while displaying it later on the HTML page outside the editor.
  • htmlAllowedTags is an array containing allowed tags to be inserted in the editor, by default it’s set to

    ['a', 'abbr', 'address', 'area', 'article', 'aside', 'audio', 'b', 'base', 'bdi', 'bdo', 'blockquote', 'br', 'button', 'canvas', 'caption', 'cite', 'code', 'col', 'colgroup', 'datalist', 'dd', 'del', 'details', 'dfn', 'dialog', 'div', 'dl', 'dt', 'em', 'embed', 'fieldset', 'figcaption', 'figure', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'header', 'hgroup', 'hr', 'i', 'iframe', 'img', 'input', 'ins', 'kbd', 'keygen', 'label', 'legend', 'li', 'link', 'main', 'map', 'mark', 'menu', 'menuitem', 'meter', 'nav', 'noscript', 'object', 'ol', 'optgroup', 'option', 'output', 'p', 'param', 'pre', 'progress', 'queue', 'rp', 'rt', 'ruby', 's', 'samp', 'script', 'style', 'section', 'select', 'small', 'source', 'span', 'strike', 'strong', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'u', 'ul', 'var', 'video', 'wbr']

    Since MathType uses other HTML tags, we customized htmlAllowedTags to be

    htmlAllowedTags:  ['.*'],

    This allows MathType custom tags to be inserted in the editor.

  • htmlAllowedAttrs is an array containing allowed attributes to be used for tags, by default it’s set to

    ['accept', 'accept-charset', 'accesskey', 'action', 'align', 'allowfullscreen', 'allowtransparency', 'alt', 'aria-.*', 'async', 'autocomplete', 'autofocus', 'autoplay', 'autosave', 'background', 'bgcolor', 'border', 'charset', 'cellpadding', 'cellspacing', 'checked', 'cite', 'class', 'color', 'cols', 'colspan', 'content', 'contenteditable', 'contextmenu', 'controls', 'coords', 'data', 'data-.*', 'datetime', 'default', 'defer', 'dir', 'dirname', 'disabled', 'download', 'draggable', 'dropzone', 'enctype', 'for', 'form', 'formaction', 'frameborder', 'headers', 'height', 'hidden', 'high', 'href', 'hreflang', 'http-equiv', 'icon', 'id', 'ismap', 'itemprop', 'keytype', 'kind', 'label', 'lang', 'language', 'list', 'loop', 'low', 'max', 'maxlength', 'media', 'method', 'min', 'mozallowfullscreen', 'multiple', 'muted', 'name', 'novalidate', 'open', 'optimum', 'pattern', 'ping', 'placeholder', 'playsinline', 'poster', 'preload', 'pubdate', 'radiogroup', 'readonly', 'rel', 'required', 'reversed', 'rows', 'rowspan', 'sandbox', 'scope', 'scoped', 'scrolling', 'seamless', 'selected', 'shape', 'size', 'sizes', 'span', 'src', 'srcdoc', 'srclang', 'srcset', 'start', 'step', 'summary', 'spellcheck', 'style', 'tabindex', 'target', 'title', 'type', 'translate', 'usemap', 'value', 'valign', 'webkitallowfullscreen', 'width', 'wrap']

    Since MathType uses other HTML attributes, we customized htmlAllowedAttrs to be

    htmlAllowedAttrs: ['.*'],

  • htmlAllowedEmptyTags is an array containing a list of tags that are not removed when they have no content inside. We have added ‘mprescripts’ and ‘none’ tags since these tags can be inserted by MathType and could be empty.

Customize MathType Editor

MathType offers various choices for adjusting its design, enabling you to coordinate it with your application’s interface and enhance the user’s experience. Refer to the MathType documentation for a comprehensive list of available choices. Use the mathTypeParameters option to send these parameters. One way to adjust the MathEditor language is by following this process.

mathTypeParameters: { 
 editorParameters: { Language: 'es' },
},

You can also disable the handwriting interface by setting the detectHand option to false.

mathTypeParameters: { 
 editorParameters: { Language: 'es' },
       detectHand: false
},

Here is the full page code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href='https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css' rel='stylesheet' type='text/css' />
    <title>Froala & MathType integration</title>
</head>

<body>
    <!-- HTML element fo displaying the editor -->
    <div id="editor"></div>

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

    <script src="node_modules/@wiris/mathtype-froala3/wiris.js"></script>

    <script>
        new FroalaEditor('#editor', {
            // Add MathType and ChemType buttons to the toolbar and the image menu:
            toolbarButtons: ['wirisEditor', 'wirisChemistry'], 
            quickInsertButtons: ['image', 'table', 'wirisEditor', 'wirisChemistry'],
            // Allow all tags, in order to allow MathML:
            htmlAllowedTags:  ['.*'],
            htmlAllowedAttrs: ['.*'],
            // Allow empty tags on these next elements for proper formula rendering:
            htmlAllowedEmptyTags: ['mprescripts', 'none', 'textarea', 'a', 'iframe', 'object', 'video', 'style', 'script', '.fa', '.fr-emoticon', '.fr-inner', 'path', 'line', 'hr'],
            //mathType options
            mathTypeParameters: { 
                editorParameters: { 
                    Language: 'es',
                    backgroundColor: '#333',
                    detectHand: false
                 },
            },
        });
    </script>
</body>
</html>

How Can I Render MathML Data and Store Generated Images Locally?

The MathType npm package uses remotely hosted services to display MathML content remotely. Nevertheless, we suggest that you set up these services on your backend. This will enable you to, among other capabilities, set up the service and save the images produced by MathType on your server.

Plugins are available for Java, PHP, .NET, and Ruby on Rails. If you are using any of these technologies, make sure to get the plugin for your backend technology from here.

How To Display Math Equations and Chemistry Formulas Outside The Editor?

To display mathematical formulas on the webpage where content produced by the Froala HTML editor will be visible, the target page needs to include the MathType script. For example, for the default setting, this would be:

<script src="https://www.wiris.net/demo/plugins/app/WIRISplugins.js?viewer=image"></script>

How To Insert Math Equations and Chemistry Formulas Effortlessly?

Once you integrate MathType, there will be two icons added to the Froala toolbar.

Clicking on the square root icon will display all the symbols available for math equations. Once you are done, click on the OK button. The equation will be inserted into your WYSIWYG editor.

Clicking on the C icon will display all the symbols available for chemistry formulas. Once you are done, click on the OK button. The formula will be inserted into your WYSIWYG editor.

Conclusion

To sum up, integrating Froala with MathType provides a seamless solution to include math equations and chemistry formulas in your content creation workflow. By following the instructions provided in this blog post, you can enhance the functionality of Froala Editor, making it easier to create and display complex scientific content. Whether you are a student, educator, or professional in the STEM field, leveraging MathType’s capabilities within Froala Editor can streamline your workflow and improve the accessibility of your mathematical and chemical content. Embracing this integration opens up a world of possibilities for effectively communicating scientific concepts in a visually appealing and interactive manner.

Are you prepared to enhance your content by including flawless math equations and chemistry formulas? Try out the combination of Froala Editor and MathType now to see their powerful capabilities. Begin generating visually impressive and engaging scientific content with ease. Give it a try now and access a higher level of creativity!

Get ready to learn the secrets of special characters and level up your web design skills. Let’s make your web pages stand out with special characters that add a touch of magic!

What are Special Characters?

Special characters are characters that are not part of the standard alphanumeric or punctuation characters found on a typical keyboard. These characters serve specific functions or have special meanings in various contexts, such as programming languages, markup languages like HTML, and text processing.

Special characters can include symbols, diacritics, mathematical symbols, currency symbols, punctuation marks, and other characters used for specific purposes. Some common examples of special characters include:

1. & (ampersand): Used in HTML to start an entity reference.
2. # (hash or pound sign): Used in programming languages for comments or to indicate numbers.
3. $ (dollar sign): Used to represent currency or variables in programming.
4. @ (at sign): Used in email addresses and social media handles.

Special characters can have different meanings and functions depending on the context in which they are used. It is important to handle them correctly using HTML entities or Unicode values to avoid formatting issues or errors in the display of web content.

How to Include Special Characters in HTML?

Special characters in HTML can be handled using HTML entities or Unicode values. Both values are used in HTML to represent special characters that cannot be easily typed on a keyboard or may cause formatting issues if used directly in the code. They are used to display characters such as copyright symbols, arrows, and accented letters on web pages.

Using HTML entities or Unicode values, you can effectively include special characters in HTML and ensure they are displayed correctly on your web pages.

What is the Difference Between HTML Entity and Unicode for Special Characters?

An HTML entity and Unicode are both used to represent special characters in HTML, but they serve different purposes and have different formats.

An HTML entity is a named code that represents a specific character in HTML. For example, &copy; is the HTML entity for the copyright symbol ©. HTML entities begin with an ampersand (&) and end with a semicolon (;). Entities are easier to read and understand in the code, making them more human-friendly.

Unicode, on the other hand, is a universal character encoding standard that assigns a unique numerical value to every character and symbol in almost all the world’s writing systems. Unicode values are typically represented in HTML using the hexadecimal format &#xXXXX; (where XXXX is the Unicode value in hexadecimal). For example, the Unicode value for the copyright symbol © is 00A9, so it can be represented in HTML as &#x00A9;.

In summary, HTML entities are named codes for special characters in HTML, while Unicode provides a universal standard for encoding characters across different writing systems. HTML entities are easier to use and understand in the code, while Unicode allows for a broader range of characters to be represented in a standardized way.

Simplifying Handling HTML special characters in web pages

Developers face challenges in using special characters due to the need for accurate HTML symbol codes, entities, or Unicode values for each character. Mishandling these characters can result in formatting problems or display errors on websites. While there are reference websites available for these codes and values, a more effective solution is to utilize an editor that gives you a dropdown menu for selecting special characters visually. Using a text editor that supports Unicode encoding ensures correct display and saving of characters.

Froala Wysiwyg editor is an example of a powerful editor that supports special characters efficiently by providing a convenient way to select and insert symbols without the need to remember specific codes or values. This editor simplifies the process of incorporating special characters into web content, ensuring accurate display and compatibility across different browsers. By utilizing tools like the Froala Wysiwyg editor, developers can enhance the visual appeal and functionality of their websites with ease.

How does Froala manage special characters?

Froala offers two plugins for managing special characters in the editor.

Special Characters Plugin

The special Characters plugin adds a toolbar button that opens a dropdown menu. This menu contains a list of special characters for users to select from. By utilizing the specialCharactersSets option, you can specify the special characters to be displayed and categorize them. For example, consider the following initialization code:

new FroalaEditor('div#froala-editor', {
  // Set custom buttons.
  toolbarButtons: ['bold', 'italic', 'underline', 'specialCharacters', 'html'],
  specialCharactersSets: [    
  {
      title: "Letters",
      "char": "Ī",
      list: [{
        "char": "ī",
        desc: "LOWERCASE I WITH MACRON"
      }],
    },
    {
      title: "Punctuation",
      "char": "©",
      list: [{
        "char": "®",
        desc: "REGISTERED TRADE MARK SIGN"
      }, {
        "char": "©",
        desc: "COPYRIGHT SIGN"
      }]
    },

  ],
})

In the code above, the editor toolbar was customized with a limited selection of buttons, including the “specialCharacters” button. Two categories of special characters were defined to be displayed when the user clicks on this button using the specialCharactersSets option.

The first category is “Letters,” represented by the uppercase letter I with macron (Ĩ), and includes only one symbol: “the lowercase letter i with macron (ĩ)”. The second category, “Punctuation,” contains two symbols: the copyright © and the registered trademark ® signs.

Now when using the editor, you can conveniently select and insert the defined special characters without having to remember specific codes or values. This simplifies the process of incorporating special characters into web content, ensuring accurate display and compatibility across different browsers.

However, if you insert the “ĩ” and then switch the editor to the code view mode, you will find that it is still showing as “ĩ” and not converted to the corresponding entity value ”&imacr;”. That’s why the Froala Entities plugin comes in to fix this problem.

Entities Plugin

The Entities plugin displays HTML entities in the code view when their related special character symbol is inserted in the editor. Use the entities option to specify the HTML entities that should be displayed in the code view when their related special character symbol is inserted in the editor. For instance, using the following initialization code will convert “ĩ” to the corresponding entity value ”&imacr;” in the code view.

new FroalaEditor('div#froala-editor', {

  entities: 'ī'

})

The power of using Special Characters and Entities Plugins together

Combining the functionality of the Special Characters and Entities plugins provides a comprehensive solution for handling special characters seamlessly within the Froala Wysiwyg editor. This integration enhances the editing experience and ensures the proper display of special characters in the HTML code.

For example, consider the following initialization code:

new FroalaEditor('div#froala-editor', {
  // Set custom buttons.
  toolbarButtons: ['bold', 'italic', 'underline', 'specialCharacters', 'html'],
  specialCharactersSets: [    
  {
      title: "Letters",
      "char": "Ī",
      list: [{
        "char": "ī",
        desc: "LOWERCASE I WITH MACRON"
      }],
    },
    {
      title: "Punctuation",
      "char": "©",
      list: [{
        "char": "®",
        desc: "REGISTERED TRADE MARK SIGN"
      }, {
        "char": "©",
        desc: "COPYRIGHT SIGN"
      }]
    },

  ],
  entities: 'ī®©'
})

Using the above code, the Special Characters plugin will display a popup containing ĩ, ©, and ® symbols. When one of them is selected, the entities plugin converts it to their respective HTML entity – ĩ to “&imacr;“, © to “ &copy;“, and ® to “ &reg;“ in the code view.

By combining the Special Characters and Entities Plugins, users no longer need to search for special character entity values every time they want to use one. They can simply select the icon from the dropdown menu.

Conclusion

The Froala WYSIWYG editor with its Special Characters and Entities Plugins streamlines the process of inserting special characters, eliminating the need to memorize specific codes or values. This powerful editor not only enhances the editing experience but also guarantees the proper display of special characters within the HTML code.

By simplifying the handling of special characters, developers can focus on enhancing the visual appeal and functionality of their websites without worrying about formatting issues. The comprehensive solution offered by Froala empowers developers to effortlessly incorporate special characters, adding a touch of magic to their web pages and creating a seamless user experience.

Embrace the power of special characters in your HTML projects by utilizing the Froala WYSIWYG editor with its Special Characters and Entities Plugins. Experience the seamless integration, streamlined workflow, and accurate display of special characters. Try Froala editor today and unleash your creativity in web design!

In this technical guide, we will explore integrating the powerful Froala as the best WYSIWYG html editor with the Quasar Framework. By leveraging the capabilities of both tools, developers can create rich text editing experiences that meet the needs of modern web development. This guide is designed to be beginner-friendly and will walk you through the process step by step.

What is the Quasar framework?

Quasar framework is an MIT-licensed open-source Vue.js-based framework, which allows you as a web developer to create responsive websites and applications in many flavors quickly:

• SPAs (Single Page App)
• SSR (Server-side Rendered App) (+ optional PWA client takeover)
• PWAs (Progressive Web App)
• BEX (Browser Extension)
• Mobile Apps (Android, iOS, …) through Cordova or Capacitor
• Multi-platform Desktop Apps (using Electron)

Prerequisites

We assume you have a working knowledge of:

• JavaScript (including some of the newer, ES2015 features)
• Vue 3
• How to use the terminal/command line
• Make sure that you have Node >=14 (or any newer LTS Node.js version) and NPM >=6.14.12 installed on your machine.

Step 1: Setting Up Quasar Project

Open your terminal, navigate to the location where you want to create your project and run the following command:

npm init quasar

you’ll be prompted with some options. Depending on your needs, you can select the CLI type (Vite or Webpack) and you can add things like TypeScript support or a different CSS preprocessor. If you are unsure about any of the options, just take the defaults (hit enter) and you’ll be good to go. You can change the options, except for the CLI type, later if you wish.

Here are our selections:

And we agreed to install project dependencies using NPM.

When we were prompted to enter the project name, we entered “my-project“.

Navigate to the project directory

cd my-project

Step 2: Installing Vue WYSIWYG editor

Following the Froala Vue SDK docs, install Froala’s Vue WYSIWYG editor by running the following command:

npm install vue-froala-wysiwyg --save

 Step 3: Integrating Froala Editor

3.1: Import Froala Vue component

As per the Froala document, we need to inject the Froala component before the root Vue app instance is instantiated.

Since you won’t have access to any /main.js file in the Quasar framework (so that Quasar CLI can seamlessly initialize and build the same codebase for SPA/PWA/SSR/Cordova/Electron), Quasar provides an elegant solution to that problem by allowing users to define so-called boot files.

By using Quasar Boot files, you can easily set up and configure the Froala Editor Vue component to be available globally in your Quasar application.

To import the Froala Editor Vue component using Quasar Boot files, you can create a boot file (e.g. froala-editor.js) in the src/boot/ directory of your Quasar project. In this boot file, you can import and configure the Froala Editor Vue component, and then use app.use() to make it available globally.

Here’s an example of how you can set up the best wysiwyg html Editor Vue component in a Quasar Boot file:

//Import Froala Editor plugins
import 'froala-editor/js/plugins.pkgd.min.js';

// Import Froala Editor css files.
import 'froala-editor/css/froala_editor.pkgd.min.css';
import 'froala-editor/css/froala_style.min.css';

// Import Froala Editor component
import VueFroala from 'vue-froala-wysiwyg';

export default async ({ app }) => {
  // Use Froala Editor Vue component
  app.use(VueFroala);
};

After creating the boot file, you need to register it in the quasar.config.js file under the boot property to ensure that it is loaded when your Quasar application starts:

boot: [

'froala-editor'

],

By following this approach, you can easily import the Froala Editor Vue component using Quasar Boot files in your Quasar application.

3.2 Configure and Initializing the Froala Editor

Ideally, you may need to define a route for a subpage where you’ll display the Froala editor but for our basic tutorial, we will edit the main page to display the Froala editor directly.

Open src/pages/IndexPage.vue, and somewhere inside the <template> tag call the Froala component.

<template>
  <q-page class="flex flex-center">
    <froala id="edit" :tag="'textarea'" :config="config" v-model:value="model"></froala>
  </q-page>
</template>

Inside the <script> tag defines the config and model variables where you can pass the editor options and the initialization content.

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'IndexPage',
  data () {

    return {

      config: {

        heightMin: 300,

        events: {

          initialized: function () {

            console.log('initialized')

          }

        }

      },

      model: '<i>Edit Your Content Here!</i>'

    }

  }
})
</script>

Step 4: Run the project

After the integration is complete, it’s time to run your project to see the editor in action.

To start your local development server and see your application, run the following command in your terminal:

npx quasar dev

This command will start the development server and open the default browser at http://localhost:9000/

You can always stop the server by using the CTRL + C command.

Customizing Your Froala’s Vue WYSIWYG editor

You can learn about the Vue Froala component tags and how to customize the editor from the Vue SDK docs and the following articles:

• How to integrate Froala With Vue 3
• Crafting a Custom Button for the Froala Editor in Vue.js
• Special tags in Froala Vue component in details
• Converting Froala to a Vue Markdown Editor
• Optimizing Vue Applications: Initializing Froala Editor on Click

If you encounter any issues, comment below and I’ll be glad to help.

Conclusion

Integrating Froala Editor with the Quasar Framework can enhance the editing capabilities of your web application. By following the steps outlined in this guide, you can easily incorporate a feature-rich WYSIWYG editor into your project. Experiment with different customization options to tailor the editor to your specific needs and create a seamless editing experience for your users.

In this article, we will learn how to use the Froala Paragraph Style plugin to enhance the appearance of your text. You can apply different formatting options to make your paragraphs visually striking. Additionally, you can experiment with various font styles, colors, and sizes to create a unique and captivating design. Let’s dive into the features and functionalities of this plugin to elevate your paragraph presentation.

How does the Froala Paragraph Style Plugin Work?

When the Froala Paragraph Style plugin is activated, a button appears on the editor toolbar that opens a list of predefined styles. These styles are defined using CSS classes through the paragraphStyles API option. Choosing a style will apply its corresponding class to the selected paragraphs allowing you to effortlessly enhance the visual appeal of your text. By experimenting with different fonts, colors, and sizes, you can create a unique and captivating design for your paragraphs. This plugin offers a user-friendly way to make your text more engaging and visually appealing, helping you stand out with iconic paragraph styles with your online javascript editor.

What does the Froala Paragraph Style Plugin API do?