React has evolved to make state management and side effects efficient and expressive. One significant addition to React is the hooks, which allow functional components to manage state and side effects traditionally associated with class components.

In this article, we will explain a basic introduction to React Hooks, with a focus on the “useState“.

Additionally,  Using the “useState” hook, we will show how the Froala React WYSIWYG editor can manage its state and dynamically display the editor changes.

React Hooks Overview

Before the hooks, state and lifecycle methods were exclusive to class components.

Hooks were introduced in React to enable functional components to manage local state and other React features without the need for class components. They provide a concise way to handle stateful logic.

The useState is a fundamental hook used for adding state to functional components. It allows you to declare state variables in functional components, making them dynamic.

The basic syntax for “useState” is:

const [state, setState] = useState(initialState);

Here, state is the current state value, and setState is a function that allows you to update the state. The “initialState” is the initial value of the state variable.

Integrating Froala React WYSIWYG Editor

Now, let’s explore how to integrate the Froala with React and the “useState” hook.

The Froala React WYSIWYG editor is a powerful WYSIWYG editor that allows users to easily create rich content. First, install the necessary packages on your React project:

npm install react-froala-wysiwyg --save

Next, create a new React component and import the required dependencies on the “App.js” file:

import React, { useState } from 'react';

import FroalaEditorComponent from 'react-froala-wysiwyg';

import FroalaEditorView from 'react-froala-wysiwyg';

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

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

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

1. React and useState are imported from the ‘react’ library. useState is a React hook used for managing state in functional components.
2. FroalaEditorComponent and FroalaEditorView are components provided by the ‘react-froala-wysiwyg’ package. They are used for integrating the Froala WYSIWYG editor into a React application.
3. This code imports the styles and scripts for the Froala WYSIWYG editor. These include CSS files for styling and a packaged JavaScript file (plugins.pkgd.min.js) that contains bundled plugins for the editor.

Now, let’s use the “useState” hook to manage the editor’s content:

function App() {

  const [model,setModel] = useState("Example Set");

  const handleModelChange= (event)=>{

    setModel(event)

  }

  return (

    <div className="App">

      <FroalaEditorComponent 

        tag='textarea'

        onModelChange={handleModelChange}

      />

      <FroalaEditorView

        model={model}

    />

    </div>

  );

}

export default App;

1. The component uses the useState hook to define a state variable named model with an initial value of “Example Set”. This state will hold the content of the Froala editor.
2. The handleModelChange function is a callback function that will be called when the content of the Froala editor changes.
3. Inside the function, it updates the model state using setModel(event), effectively updating the content of the editor.
4. The return statement renders JSX for the component.
5. The component is wrapped in a div with the class name “App”.
6. FroalaEditorComponent is rendered with a textarea as the underlying HTML tag. The onModelChange prop is set to the handleModelChange callback function.
7. FroalaEditorView is rendered with the model prop set to the model state. This component is used to display the content of the Froala editor.
8. The App component is exported as the default export of the module, making it available for use in other parts of the application.

In this example, we’ve created a React component named App. It uses the “FroalaEditorComponent” for editing and the “FroalaEditorView” for displaying the content.

The model state variable is used to manage the content of the editor.

When the content changes, the “handleModelChange” function is called. It updates the model state and triggers a re-render with the new content.

This integration demonstrates how the “useState” hook can manage the state of the Froala. It’s used in a React functional component.

Conclusion

React hooks have upgraded how developers manage state in functional components. The “useState” hook, in particular, is a key part of this upgrade.

Using hooks provides a more concise and readable syntax. It also makes it easier to work with stateful logic in functional components.

Integrating Froala with React enhances the development experience. It allows for seamless content creation and management within your applications. You can manage the editor’s state using the “useState” hook. It enables dynamic creation.

As you explore React hooks and their integration with libraries like Froala React WYSIWYG editor, you’ll find that the combination of these lets you easily build feature-rich web applications.

Laravel, a popular PHP framework, provides a robust and efficient platform for building web applications. It offers various features and tools to make development easier and faster.

We will use Laravel and the Froala Rich-text editor to create a comprehensive support system for your web application. In this series of tutorials, we will cover how to set up the Laravel project, integrate the Froala editor, save data to a MySQL database, manage support tickets, and more. Let’s dive in and start building!

What should you expect to learn from this tutorial?

This series of articles will include:

In this article, we will create a page with a form that lets users submit requests to the support team. We will integrate the Froala editor to support rich text requests. Finally, we will store the submitted data in the MYSQL database.

The second article will explain how to configure the Froala Editor to upload images and files and how to store them on our PHP server. We may cover this topic over multiple articles.

In the last article, we will create a page for the support team to view all submitted requests. They can access these requests from that page and modify, update, or delete them.

Prerequisites

In this tutorial, I will use XAMPP as my local PHP development environment. XAMPP includes Apache, MySQL, and PHP, which allows you to set up a local server on localhost to test PHP web applications. You can also use alternatives such as WAMP or LAMP, as long as you install and configure them properly.

Also, make sure you install Composer, a dependency manager for PHP, on your computer.

Create a new Laravel project.

After installing PHP and Composer, open your XAMPP server “htdocs”, and create a new Laravel project in your terminal using the command:

composer create-project laravel/laravel support-app

This command downloads the Laravel framework and creates a new project for you.

Once you create the project, navigate to the project directory using the cd command:

cd support-app

Configure the Project Database

Use your preferred IDE, such as Visual Studio Code, to open the project folder. Open the .env file at the root of your application. Update the database configuration values.

DB_CONNECTION=mysql 

DB_HOST=127.0.0.1 

DB_PORT=3306 

DB_DATABASE=laravel 

DB_USERNAME=root 

DB_PASSWORD=

Setup the Database Tables

Run this command in your terminal to create a migration file for the table that will store the support requests:

php artisan make:migration create_requests_table

This above command creates a new migration file in the database/migrations directory. Open the file and define the requests table schema inside the up function.

/**

* Run the migrations.

*

* @return void

*/

public function up()

{

   Schema::create('requests', function (Blueprint $table) {

     $table->id();

     $table->string('name');

     $table->string('email');

     $table->string('subject');

     $table->text('request');

     $table->timestamps();

  });

}

This will create a table with the following columns:

• id (auto-incrementing integer)
• name (string) to store the username
• email (string) to store the user’s email
• subject (string) – the subject of the request
• request (text) – the request details
• created_at (timestamp)
• updated_at (timestamp)

Once you have defined the schema, ensure your MySQL server runs and contains a database with the name you specified in the .env file.

Run the following command in your terminal to migrate the database and create the table:

php artisan migrate

This command will execute the migration and create the “requests” table in your database.

Create a Support Table Model

Create an Eloquent model to interact with the “requests” table by running the command

php artisan make:model Request -crR

The -crR code instructs Laravel to generate model, controller, and request files for the “request” table.

Create the Request Page

We will add a request page to the homepage. Navigate to resources/views/welcome.blade.php, and replace the existing code with the form code. We will use a Bootstrap form to save time.

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Support App.</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">

        <!-- Styles -->
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
    </head>
    <body>
        <div class="container">
            <div class="row justify-content-center">
                <h1 class="col-md-8 my-5 text-center">
                    Welcome To Our Support App
                </h1>
            </div>
            <div class="row justify-content-center">
                <div class="col-md-8">
                    <div class="card">
                        <div class="card-header">Submit a Support Request</div>

                        <div class="card-body">
                            <form method="POST" > 
                                @csrf
                                <div class="mb-3">
                                    <label for="name" class="form-label">Full Name</label>
                                    <input type="text" class="form-control" id="name">
                                </div>
                                <div class="mb-3">
                                    <label for="exampleInputEmail1" class="form-label">Email address</label>
                                    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                                    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
                                </div>
                                <div class="mb-3">
                                    <label for="subject" class="form-label">Subject</label>
                                    <input type="text" class="form-control" id="subject">
                                </div>

                                <div class="mb-3">
                                    <label for="request" class="form-label">Request Details</label>
                                    <textarea class="form-control" id="request" rows="5"></textarea>
                                </div>

                                <button type="submit" class="btn btn-primary">Submit</button>

                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

The above code creates a basic HTML form for submitting a support request, including input fields for the user’s name, email, subject, and request details.

Open “http://localhost/support-app/public/“ on your browser to see the page in action.

Integrate the Froala WYSIWYG Editor into your Laravel application

Integrate the Froala WYSIWYG Editor into our Laravel application to transform the “More Details“ field into one that accepts rich-text editing, which lets users format their requests with advanced styling and formatting options. In the welcome.blade.php file, perform the following steps

• Add the Froala stylesheet and scripts to the page.

<link href='https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css' rel='stylesheet' type='text/css' />

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

• Initialize the editor by using the constructor function FroalaEditor and pass the ID value of the requested field as the first parameter.

<script>
   new FroalaEditor("#request");
</script>

• Reload your page to display the Froala rich text editor instead of the request field.

Customize the Froala Editor

The Froala editor’s API provides powerful customization options. Refer to the documentation to discover options, events, and methods that will help you adapt the editor to your needs. In this tutorial, we will use the toolbarButtons API option to customize the editor’s toolbar buttons.

<script>
   new FroalaEditor("#request", {

       toolbarButtons: [
            ['fontSize', 'bold', 'italic', 'underline', 'strikeThrough'],
            [ 'alignLeft', 'alignCenter', 'alignRight', 'alignJustify','textColor', 'backgroundColor'],
            ['formatOLSimple', 'formatUL', 'insertLink','insertImage','insertFile'],
       ]

    });
</script>

Handle the Form Submission

Create a route for the RequestController in routes/web.php to manage form submissions. Since the RequestController is a resource controller, add the following route definition.

Route::resources(['requests' => App\Http\Controllers\RequestController::class]);

We will use the store method in the RequestController to process the form submission. In the welcome.blade.php file, add the action attribute to the form tag, like:

<form method="POST" action="{{ route('requests.store') }}" >

In the store method, add the following code to save the submitted data to the database:

    /**
     * Store a newly created resource in storage.
     *
     * @param  \App\Http\Requests\StorerequestRequest  $request
     * @return \Illuminate\Http\Response
     */
    public function store(StorerequestRequest $request)
    {
        // Retrieve form data and save it to the database

        $model = new Request;

        $model->name = $request->input('name');
        $model->email = $request->input('email');
        $model->subject = $request->input('subject');
        $model->request = $request->input('request');

        $model->save();

        // Redirect back to the form page with a success message
        return redirect()->back()->with('success', 'Your support request has been submitted successfully.');

    }

Make sure the authorize method in the StorerequestRequest.php file returns true to allow visitors to submit the form.

<?php

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

class StorerequestRequest extends FormRequest
{
    /**
     * Determine if the user is authorized to make this request.
     *
     * @return bool
     */
    public function authorize()
    {
        return true;
    }

    /**
     * Get the validation rules that apply to the request.
     *
     * @return array
     */
    public function rules()
    {

    }
}

Now, upon form submission, data will be saved in the database, including content from the Froala editor. Then, it redirects the user back to the form page and displays a success message.

Form Validation

To avoid errors when saving the form data to the database, we need to add validation rules. Update the rules method in the StorerequestRequest class found in the App\Http\Requests namespace.

    public function rules()
    {
        return [
            'name' => 'required',
            'email' => 'required|email',
            'subject' => 'required|max:255',
            'request' => 'required',
        ];
    }

In this example, we added validation rules for the “name”, “email”, “subject”, and “request” fields. The “name” field is mandatory, the “email” must be valid, and both the “subject” and “request” fields must be filled. The “subject” field must not exceed 255 characters.

When an invalid input is submitted via the form, the Laravel blade @error and old methods can be used to identify and display an error message as well as repopulate the form fields with previously entered values. This prevents the user from having to re-enter values incorrectly in the fields without having an error.

Update the code in the welcome.blade.php file like the following

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Support App.</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">

        <!-- Styles -->
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

        <link href='https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css' rel='stylesheet' type='text/css' />

    </head>
    <body>
        <div class="container">
            <div class="row justify-content-center">
                <h1 class="col-md-8 my-5 text-center">
                    Welcome To Our Support App
                </h1>
            </div>
            <div class="row justify-content-center">
                <div class="col-md-8">
                    <div class="card">
                        <div class="card-header">Submit a Support Request</div>

                        <div class="card-body">
                            <form method="POST" action="{{ route('requests.store') }}" >
                                @csrf
                                <div class="mb-3">
                                    <label for="name" class="form-label">Full Name</label>
                                    <input type="text" class="form-control @error('name') is-invalid @enderror" id="name" name="name" value="{{(old('name') ? old('name')  : '')}} ">
                                    @error('name')
                                    <span class="invalid-feedback">
                                            <strong>{{ $errors->first('name') }}</strong>
                                        </span>
                                     @enderror
                                </div>
                                <div class="mb-3">
                                    <label for="email" class="form-label">Email address</label>
                                    <input type="email" class="form-control @error('email') is-invalid @enderror" name="email" id="email" value="{{(old('email') ? old('email')  : '')}} " aria-describedby="emailHelp">
                                    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
                                    @error('email')
                                    <span class="invalid-feedback">
                                            <strong>{{ $errors->first('email') }}</strong>
                                        </span>
                                     @enderror
                                </div>
                                <div class="mb-3">
                                    <label for="subject" class="form-label">Subject</label>
                                    <input type="text" class="form-control @error('subject') is-invalid @enderror" id="subject" name="subject" value="{{(old('subject') ? old('subject')  : '')}} " >
                                    @error('subject')
                                    <span class="invalid-feedback">
                                            <strong>{{ $errors->first('subject') }}</strong>
                                        </span>
                                     @enderror
                                </div>

                                <div class="mb-3">
                                    <label for="request" class="form-label">Request Details</label>
                                    <textarea class="form-control @error('request') is-invalid @enderror"
                                    id="request" name="request" rows="5">{{(old('request') ? old('request')  : '')}}</textarea>

                                    @error('request')
                                    <span class="invalid-feedback">
                                            <strong>{{ $errors->first('request') }}</strong>
                                        </span>
                                    @enderror
                                </div>

                                <button type="submit" class="btn btn-primary">Submit</button>

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

        <script>
            new FroalaEditor("#request", {

                toolbarButtons: [
                    ['fontSize', 'bold', 'italic', 'underline', 'strikeThrough'],
                    [ 'alignLeft', 'alignCenter', 'alignRight', 'alignJustify','textColor', 'backgroundColor'],
                    ['formatOLSimple', 'formatUL', 'insertLink','insertImage','insertFile'],
                ]

            });
        </script>
    </body>
</html>

Once you submit the form, the data will be validated using the specified rules. If validation fails, the user will be returned to the form page with error messages displayed, and the form inputs will be repopulated with the previously entered values.

Conclusion

In this tutorial, we explored the powerful combination of Laravel and the Froala Rich-text editor to create a comprehensive support system for web applications. By following this series, you learned how to set up the Laravel project, set up your MySQL database, and integrate the Froala editor. We also implemented form submission handling and form validation.

Utilizing Laravel’s robust features and the flexibility of the Froala editor enhances the user experience, empowers your support team, and streamlines the process of handling support requests.

Stay tuned for the next part of this series where you will learn how to save images uploaded with the Froala Editor and store them on a PHP server. We will use the Froala PHP SDK for a smooth experience.

If you have any questions or need further assistance, leave a comment below. Happy coding!

Paragraph Styles in a text editor are defined sets of formatting rules that can be applied to paragraphs of text in a document. These styles allow users to format their content by defining how text should appear. The options are font, size, color, spacing, and all typographic elements.

Paragraph Styles are used to keep the formatting consistent in a document for a unified look. Instead of changing each paragraph’s settings, users can use a Paragraph Style to get a pre-set format.

Paragraph Styles mean consistency, efficiency, and customization. They can update the whole document when formatting requirements change.

Modern text editors, including WYSIWYG (What You See Is What You Get) editors and HTML code writers like Froala, provide interfaces for managing Paragraph Styles. Users can access these styles through a dropdown menu or toolbar, making the process friendly.

Froala’s WYSIWYG editor and HTML code writer provides a customizable solution for handling text content. We will explain how to use Froala Paragraph Styles in a React project. This plugin allows you to take the text editing capabilities to the next level with our react rich text editor.

Froala WYSIWYG editor provides a customizable solution for handling text content. We will explain how to use Froala Paragraph Styles in a React project. This plugin allows you to take the text editing capabilities to the next level with our react rich text editor.

Understanding Froala

Froala is a feature-rich and easy-to-use text editor that provides various tools for formatting text, handling images, and managing other multimedia elements. It is highly customizable and can be integrated seamlessly into various web applications. One of the standout features of Froala is its support for Paragraph Styles.

Setting Up Your React Project

To get started, make sure you have Node.js and npm installed on your machine.

Create a new project using the Create React App, or use your existing project if you have one. Open your project in your preferred code editor.

npx create-react-app froala-styles-demo

cd froala-styles-demo

npm start

Installing Froala WYSIWYG Editor

Next, you’ll need to install Froala WYSIWYG Editor. You can do this by running the following command in your project directory:

npm install react-froala-wysiwyg --save

This package provides a React wrapper for the Froala editor, making it easy to integrate into your React application.

Creating a new Froala component on the project

Now, let’s create a simple React component that includes the Froala editor. Use the file App.js.

import './App.css';

import FroalaEditorComponent from "react-froala-wysiwyg";

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

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

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




function App() {




  let model = '<p><a href="https://froala.com">Froala WYSIWYG Editor</a></p>';

  

  return (

    <div id="froala-editor">

      <h1>Froala</h1>

      <FroalaEditorComponent

        tag="textarea"

        model={model}

        config={{

        }}

      />

    </div>

  )

}

export default App;

Let’s break down the provided React code for the Froala Editor component:

• import ‘./App.css’; – This line imports the CSS styles from the “App.css” file. 

• import FroalaEditorComponent from “react-froala-wysiwyg”; – This line imports the FroalaEditorComponent from the “react-froala-wysiwyg” package.

• import “froala-editor/css/froala_style.min.css”;

import “froala-editor/css/froala_editor.pkgd.min.css”;

import “froala-editor/js/plugins.pkgd.min.js”;

These lines import plugins for the Froala Editor. The first two lines import CSS styles, and the third line imports the packaged JavaScript plugins for the editor.

• function App() { – Defines a functional React component named App.

• let model = ‘<p><a href=”https://froala.com”>Froala WYSIWYG Editor</a></p>’; – Declares a variable named model and assigns it a string containing HTML code.

•  return (

     <div id=”froala-editor”>

Begins the component’s JSX markup, returning a div element with the id “froala-editor”.

• <h1>Froala</h1> – Includes an h1 element with the text “Froala”.

• <FroalaEditorComponent

         tag=”textarea”

         model={model}

         config={{

         }}

       />

Includes the FroalaEditorComponent, configuring it with the tag (“textarea”), initial model content, and an empty configuration object. This is where the Froala Editor will be rendered.

</div> ) } – Closes the JSX markup for the component.

export default App; – Exports the App component as the default export of this module.

The standard Froala Editor component has some Paragraph Styles already formatted as gray, bordered, spaced, and uppercase.

• Gray Style: This style involves setting the text color to gray.
• Bordered Style: A bordered style allows adding a border around an element.
• Spaced Style: Adding spacing between elements makes setting margins or padding.
• Uppercase Style: To make text uppercase, you can use the text-transform property.

Styling Paragraphs with Froala

Now that we have the basic editor set up, let’s explore how to customize Paragraph Styles.

You can customize the appearance of each paragraph style by modifying the Froala configuration. On the config use this code:

      config={{

          paragraphStyles: {

            class1: 'Class 1',

            class2: 'Class 2'

          },

        }}

On the file App.css, use this code:

.class1 {

  text-align: center;

  font-weight: bold;

}

.class2 {

  font-weight: 300;

  font-size: 30px;

}

This code is a set of CSS rules that define styles for HTML elements with specific class names.

• text-align: center; – This rule centers the text within the element horizontally.
• font-weight: bold; – This rule makes the text bold.
• font-weight: 300; – This rule sets the font weight to 300, which is relatively light or normal weight.
• font-size: 30px; – This rule sets the font size to 30 pixels.

Conclusion

In this article, we’ve covered the integration of Froala WYSIWYG Editor into a React project and explored how to implement and customize Paragraph Styles.

With the ability to define custom styles and easily apply them, Froala provides a powerful solution for creating rich text editors in your web applications.

Explore Froala’s extensive documentation for more advanced features and customization options.

The key to mastering Paragraph Styles is experimentation. Play around with the configurations, try different styles, and see how they impact your editor.

Express framework is a popular web application framework for Node.JS. It provides a simple and minimalistic approach to building web applications. Froala is an advanced WYSIWYG editor for effortless content creation and editing. We discussed the integration between Froala and Express framework before. However, uploading images and files into the Node server needs additional configuration. The Froala Node.js SDK simplifies uploading images and files to Froala in an Express application. With this SDK, you can easily handle image uploads, validate them, store them, and delete them on your server. This makes it incredibly convenient to integrate Froala into your Express application and provide a seamless image-uploading experience for your users.

Throughout this tutorial, we will cover the steps to set up the uploading image process in your Express application using the Froala Node.JS SDK. We will continue from where we left off in the integration article. We recommended reading the integration guide first.

Install Froala Node.JS SDK

You can install the Froala Node.JS SDK by running the following command in your terminal:

npm install wysiwyg-editor-node-sdk

Import the SDK into your Express application after installing it by adding this line of code in the app.js file.

var FroalaEditor = require(__dirname+'/node_modules/wysiwyg-editor-node-sdk/lib/froalaEditor.js');

Configure the Froala Editor

We will need to configure the Froala initialization function to assign the image upload options and events. There are six API options and five events related to this feature.

• imageUploadParam: is the name of the parameter that contains the image file information in the upload request. The default value is “file” but you can change it to whatever name you want.
• imageUploadURL: is the URL where the upload request is being made.
• imageUploadParams: are additional parameters that are passed in the upload request to the server.
• imageUploadMethod: is the HTTP request type. It is ‘POST’ by default.
• imageMaxSize: sets the upper limit for image size during uploading.
• image.beforeUpload: Froala triggers this event before starting the upload request and it can be used to change the upload params or cancel the action.
• image.uploaded: Froala triggers this event after a successful image upload request, but before inserting the image into the editor.
• image.inserted: Froala triggers this event after inserting the image into the editor.
• image.replaced: Froala triggers this event after replacing the image in the editor.
• image.error: Froala triggers this event if any errors occur during the upload process.

In the “editor.ejs” file, change the initialization method to

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

imageUploadURL: '/upload_image'

});

The above code will configure the Froala Editor to upload images to the ‘/upload_image’ URL.

Handle the Image Upload Request

We need to define the ‘/upload_image’ route in our Express application to handle the image upload request. It will receive the image file and save it on the server using the FroalaEditor.Image.upload method.

Add the following code to your app.js file:

app.post('/upload_image', function (req, res) {
    // Store image.

    FroalaEditor.Image.upload(req, '/uploads/', function(err, data) {

    // Return data.

    if (err) {

         return res.send(JSON.stringify(err));

     }

     res.send(data);

   });

});

The above code will create a POST route in your Express application at ‘/upload_image’. When this route receives a request, it will use the FroalaEditor.Image.upload method to store the uploaded image in the ‘/uploads/’ directory on the server. If there are any errors during the upload process, it will return the error as a JSON string. Otherwise, it will send the data object containing information about the uploaded image as the response.

Create an “uploads” folder in the root of our Express app to store uploaded images.

Also, add the below code to the “app.js” file to give the server access to the static files in the root directory. This will allow images and files in ‘/uploads/’ to be accessed.

app.use(express.static(__dirname + '/'));

Now, when you upload an image with the Froala Editor, it will be saved in the ‘/uploads/’ directory and accessible through the ‘/uploads/’ URL.

The full app.js code is

var express = require('express');

var FroalaEditor = require(__dirname+'/node_modules/wysiwyg-editor-node-sdk/lib/froalaEditor.js');

var app = express();

// Set EJS as the view engine

app.set('view engine','ejs');

//Froala editor CSS & JS files

app.use('/froalacss',express.static(__dirname+'/node_modules/froala-editor/css/froala_editor.pkgd.min.css'));

app.use('/froalajs',express.static(__dirname+'/node_modules/froala-editor/js/froala_editor.pkgd.min.js'));

//So images can be displayed after stored

app.use(express.static(__dirname + '/'));

// Define routes

app.get('/',(req,res)=>{

  res.render('editor');

});


// Path to upload image.

app.post('/upload_image', function (req, res) {

     // Store image.

     FroalaEditor.Image.upload(req, '/uploads/', function(err, data) {

    // Return data.

    if (err) {

    return res.send(JSON.stringify(err));

    }

    res.send(data);

   });

});

var port = process.env.PORT || 3000;

app.listen(port,()=>console.log('server run at port '+port));

Test the Image Upload Functionality

Now that we have configured the Froala Editor and created a route to handle the image upload request, we can test the functionality. Start your Express application by running the following command:

node app.js

Once your application is running, open http://localhost:3000/ and start working with the editor. Upload an image using the editor and see if it gets stored in the “uploads” directory. You should be able to successfully upload and store images using the Froala Editor in your Express application.

Image Validation

To further enhance the image upload functionality, you can add validation to ensure that only specific image types and sizes are allowed. Froala Node.JS SDK simplifies the image validation process.

Using the SDK, you can pass an object with the validation roles at the third parameter of the FroalaEditor.Image.upload method. The supported validation rules are:

• allowedExts: Contains the allowed image extensions
• allowedMimeTypes: Contains the allowed mime types

In the following code, we altered the “/upload_image“ route handler to allow only JPEG and JPG image types to be uploaded through Froala editor

// Path to upload image.

app.post('/upload_image', function (req, res) {

var options = {

  validation: {

   'allowedExts': [ 'jpeg', 'jpg'],

   'allowedMimeTypes': [ 'image/jpeg', 'image/pjpeg']

  }

}

// Store image.

FroalaEditor.Image.upload(req, '/uploads/', options, function(err, data) {

   // Return data.

   if (err) {

     return res.send(JSON.stringify(err));

   }

   res.send(data);

  });

});

However, if you want to perform other validation, it is possible too. You can pass a custom method instead of the validation object with filePath, mimetype, and callback parameters. This gives you full control over what types of images you want to store on disk. Learn how the custom validation works.

Deleting Images with Froala Node.JS SDK

The Froala Node.JS SDK also simplifies deleting images on the editor from the server. When You click on an image in the editor, a pop-up appears. On that pop-up, there is a delete image button. When a user clicks on that button, the editor triggers two events:  froalaEditor.image.beforeRemove and froalaEditor.image.removed. You can use either option to delete the image from the server, but it’s recommended to use the second one to ensure that the image is removed from the editable area.

In the froalaEditor.image.removed event, we will send a request to the server to delete the image. In the “app.js” you will need to define a route to handle the delete request. This handler will use the FroalaEditor.Image.delete() method from the Node.JS SDK to remove the image from the server.

Unlocking the other capabilities of the Froala Node.JS SDK

The Froala Node.JS SDK will help you also store images on the Amazon S3 bucket, display the uploaded images on Froala Image Manager, and handle other files on your Node.JS server.

Streamlining the editor Image handling in Express with Froala Node.JS SDK

With these configurations and code in place, you have successfully simplified uploading images to Froala Editor in an Express framework application using the Froala Node.js SDK. The Froala Node.JS SDK provides a convenient way to handle image uploads, validate them, and store them on your server. This integration allows you to provide a seamless image-uploading experience for your users. You can now continue building your Express application with the enhanced functionality of Froala Editor.