React Rich-Text Editor with Advanced Images and Cloud Storage

React rich-text editor

Rich-text editor is a crucial component that allows your users to seamlessly add and edit content. But have you ever found the process of integrating image uploads and storage to be a complex and time-consuming task?

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.

A React Rich-Text Editor with Advanced Image Capabilities and Seamless Cloud Storage Solution

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:

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.

create Filestack account

5.2: Set the Filestack Plugin Options

Login to your account and copy your Filestack API key.

Get 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.

Rich text-editor integrated with Filestack

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.

 

Posted on October 18, 2024

Mostafa Yousef

Senior web developer with a profound knowledge of the Javascript and PHP ecosystem. Familiar with several JS tools, frameworks, and libraries. Experienced in developing interactive websites and applications.

No comment yet, add your voice below!


Add a Comment

Your email address will not be published. Required fields are marked *