We see AI everywhere these days, but what makes it so valuable in practical applications? For one, removing the dreaded “red eye” effect from photos. Another example is automatically generating some relevant tags for an image after uploading it. These features are just a glimpse into how AI can take images to the next level. In this blog post, we’ll explore how you can easily incorporate AI enhancements like red eye removal and auto image tagging into your visual HTML editor using Froala v4.4, Filestack, and React 18. Let’s dive in!

Key Takeaways

• Images and applications greatly benefit from AI enhancements
• Red eye removal fixes the “red eye” effect from photos taken in low-light conditions
• Auto image tagging gathers descriptive tags that correspond to an image’s general features
• Froala makes implementing both red eye removal and auto image tagging much easier
• Explore more AI features like OCR and image sentiment detection with Froala and Filestack

What Are AI Enhancements?

AI enhancements refer to tools or processes that use machine learning and computer vision to analyze and improve images or other data. These features streamline processes that would normally take plenty of effort and time. This may sound daunting, but thankfully ready-made AI tools exist today. This means that now’s a great time to start incorporating these into your applications (if you haven’t already). Some examples include:

• Red eye removal: Deals with fixing the “red eye” effect caused by low-light photography (e.g., using flash in a dark setting). By removing such unwanted effects, you can delight your users by making their pictures look a lot cleaner.
• Auto image tagging: Analyzes an image and generates descriptive tags that highlight its key features. This greatly helps marketers, advertisers, eCommerce platforms, and more.
• Image SFW checking: Scans an image and determines whether it’s safe for work (SFW) or not. Perfect for community applications, social media platforms, or other user content-heavy applications.
• Image sentiment analysis: Detects emotions from images (e.g., happy, sad, frustrated, confused). This is a flexible tool for a wide range of users.

Filestack already has some APIs that help with implementing most of these enhancements. Moreover, Froala also natively comes with Filestack, making the implementation process even easier when using a WYSIWYG editor. Let’s see how we can do that in the next section.

How to Include AI Enhancements in Your Visual HTML Editor

Set up Your Visual HTML Editor

First, create a React app, and then navigate to your project’s directory. Afterwards, run the following command to install the latest version of Froala:

npm install react-froala-wysiwyg

Froala v4.4 comes with some cool updates, including support for React 18 and Angular 19. This time, we’ll use the former. Now that you have Froala in your project, create a new folder called “components” under the “src” directory. Under this new folder, create a new file called “FroalaComponent.jsx” and add the following code:

import React, { useEffect, useState } 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() {
    const [tags, setTags] = useState([]);
    const config = {
        filestackOptions: {
            uploadToFilestackOnly: true,
            filestackAPI: 'YourFilestackAPIKey',
            pickerOptions: {
              accept: ["image/*"],
              fromSources: ["local_file_system"],
            },
        },
        events: {
            'filestack.uploadedToFilestack': function (response) {
                if(response && response.filesUploaded[0].handle){
                    const fileHandle = response.filesUploaded[0].handle;
                    // this is where we'll handle the red eye removal and image tagging AI enhancements
                    performEnhancements(fileHandle, this);
                }
                else{
                    console.error("Image upload failed, no URL found in response", response);
                }
            }
        },
        heightMin: 500,
        width: 1000
    };

    useEffect(() => {
        // import Filestack scripts
        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>
            <div className="editor">
                <FroalaEditorComponent tag='textarea' config={config} />
            </div>
            <div id="image-tagging-results">
                <h3>Image Tagging Analysis:</h3>
                <ul>
                    {tags.map(([key, value], index) => (
                        <li key={index}>
                            {key}: {value}
                        </li>
                    ))}
                </ul>
            </div>
        </div>
    );
}

export default FroalaComponent;

The code above deals with the editor setup, including the necessary Froala options, Filestack options and scripts, and events. On a successful upload, we’ll call the “performEnhancements” function, which takes both the uploaded file’s handle and the editor instance as parameters. But we’ll talk about this more later on. For now, note that the FroalaComponent includes both the editor and a space where we’ll load the image tags. When you’re done with the editor setup, go to the “App.js” file and replace the default code with:

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

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

      <FroalaComponent />
    </div>
  );
}

export default App;

This calls the FroalaComponent in your application. By now, you should see the editor when you run the application. And while you’re free to play around with its features, we’re not quite done yet. It’s time to add some AI enhancements into our React application.

Add Red Eye Removal

Remember the “performEnhancements” function in FroalaComponent? Let’s create it now:

async function performEnhancements(fileHandle, editorInstance) {
        const redEyeURL = `https://cdn.filestackcontent.com/redeye/${fileHandle}`;

        try {
            editorInstance.html.insert(
                `<img src="${redEyeResultURL}" alt="Enhanced Image" style="display: block; margin: 20px auto; width: 302px; height: 190.23px;" />`
            );
        }
        catch(error) {
            console.error("Error during enhancements:", error);
        }
    }

Red eye removal requires just the Filestack API (“redeye”) and your file handle. To start off, create the URL by appending these requirements to the Filestack CDN. We’ll call that “redEyeURL.” Next, we can insert the URL directly into the editor to display it. If you need to store this URL or use it elsewhere, you can declare it as a constant or variable. That’s it for red eye removal. Let’s move on to how you can generate image tags automatically.

Handle Auto Image Tagging

In the same file (and “performEnhancements” function), add the following code:

const policy = "YourFilestackPolicy";
const signature = "YourFilestackSignature";
const autoTagURL = `https://cdn.filestackcontent.com/security=p:${policy},s:${signature}/tags/${fileHandle}`;

const autoTagResult = await fetch(autoTagURL);
const tagData = await autoTagResult.json();
const tags = tagData?.tags?.auto;
if(tags) {
     setTags(Object.entries(tags));
}
else {
     console.error("No tags found in response.");
}

You can get both the policy and signature by generating them under the “Security” tab of the Filestack dashboard. You’ll need these for the auto image tagging feature. This time, instead of appending just the API keyword, add the security keywords, followed by the “tags” part and the file handle. Next, fetch a result from the auto tagging URL and convert it into JSON format. You’ll end up with an object of tags. Extract the data (key-value pairs, e.g., “face: 98, human: 99”) and set the tags into our displayable constant. All that’s left now is to run the application.

Upload an Image Using the Visual HTML Editor

In your CLI, run “npm start” to view the application. Click on the Filestack upload icon, which brings up the Filestack uploader UI. Choose an image that contains some form of red eye effect and upload it:

After clicking the upload button, you should see the new, enhanced image together with the results of the image tagging process.

From the result of the image tagging analysis, the uploaded image contains a portrait of an adult woman’s face. All the tags seem correct and accurate. Furthermore, the red eye effect from the original photo has disappeared, cleanly, I might add. And all it took to implement both AI enhancement features were a few lines of code.

Wrapping up: Enhance Your Visual HTML Editor with AI Today

Adding AI enhancements like red eye removal and automatic image tagging to your visual HTML editor isn’t just cool—it’s practical and efficient. With tools like Froala and Filestack, you can easily implement these advanced features to significantly improve the user experience in your application. And why stop there? Dive into other powerful AI features like OCR, image sentiment analysis, and SFW detection to take your app to new heights. It is, after all, a great time to include AI in our applications.

An old adage states that “a picture is worth a thousand words.” Even now, at the advent of new technology and AI, it still holds true. What’s even more interesting is that today, technology can actually help us describe an image through words. This process is called image tagging. It involves using AI and machine learning to recognize patterns in an image and generate human-readable tags that define the image. Despite its complex inner workings, however, image tagging has become a lot easier to implement because of ready-to-use tools. In this tutorial, we’ll explore image tagging for Angular 19 using the latest version of our WYSIWYG editor, Froala v4.4.

Key Takeaways

• Image tagging is a useful tool for getting the general features of an image
• You can use image tagging for organizing images, optimizing targeted ads, adding tags to online products, and more
• Froala has built-in image tagging due to its native integration with Filestack
• As of v4.4, Froala now supports Angular 19
• Use image tagging synchronously or through Filestack Workflows

Some Real-world Applications for Image Tagging

Image tagging has become more prominent nowadays. You can go to your favorite online store, social media platform, or travel app, and you’ll see some form of it. You can even encounter it at work. Here are a few ways that people use image tagging in their applications:

• Digital Asset Management: When organizing a business’ digital assets, they can use image tagging to sort photos not just by metadata but also according to image features. For example, businesses can automatically put together logos, screen designs, and advertising photos by getting and processing tags from images.
• Product Classification: Image tagging proves valuable for eCommerce applications by efficiently sorting product images by their respective categories. For instance, when an online store uploads an image of a laptop, it will receive tags like “electronics,” “laptop,” and “technology.” This practice consequently improves product recommendations for users.
• Advertising and Marketing: Images are of great assistance to marketers. With image tagging, they can automatically detect what a user’s interests are, such as “ramen” or “skiing.” This helps them make their advertisements more relevant to users.
• Travel and Tourism: Notice how travel applications always seem to recommend places that are similar to the ones you book? Chances are they’re using tags for that, and with image tagging, this practice can improve. Based on the images that your favorite destination or establishment uploads, the app can recommend destinations with similar tags.

Now that we have some ideas on where to apply image tagging, how about we show you how you can actually implement it?

Implementing Image Tagging in Angular 19 Using Froala HTML Editor Software

To implement image tagging, all you’ll need are your favorite tech stack, a file handling tool, and a solid HTML editor software. In this case, we’ll be using Angular 19 and Froala Editor v4.4. This latest version of Froala supports Angular 19, allowing for more speed, simplification, security, and compatibility. Moreover, it also natively includes Filestack, an advanced file uploader and transformation tool with image tagging features. With these tools, image tagging turns into a significantly easier task.

Project Setup

To get started, open your CLI and navigate to your preferred directory. Create a new Angular app by running:

ng new filestack-integration

In this case, I used “filestack-integration” as the project name. After creating the project, navigate to its root directory and install Froala’s Angular SDK. This allows you to integrate Froala into your Angular application. Let’s run the following command:

npm install angular-froala-wysiwyg --save

Now, open your project using your preferred code editor. Go to the “angular.json” file and replace the “styles” and “scripts” options with:

"styles": [
     "src/styles.css",
     "node_modules/froala-editor/css/froala_editor.pkgd.min.css",
     "node_modules/froala-editor/css/froala_style.min.css"
],
"scripts": [
     "node_modules/froala-editor/js/froala_editor.pkgd.min.js"
]

This loads the necessary stylesheets and JS for Froala Editor. Next, let’s create the editor itself.

Creating the WYSIWYG Editor

In your CLI, type and run:

ng generate component editor

This generates a new component called EditorComponent, which is where we’ll configure the editor and create the necessary functions for image tagging. After creating this component, open your “editor.component.ts” file and replace the code with this:

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 {

}

The next step involves opening “index.html” and including the required Filestack files for uploading and transforming (and, in our case, tagging) images:

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

Now, let’s go back to our “editor.component.ts” file and configure the necessary editor options and events.

export class EditorComponent{
  private froalaEditor: any;
  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: "YourFilestackAPIKey", // replace this with your actual key
      pickerOptions: {
        accept: ['image/*'], // accept only images of any type from the local file system
        fromSources: ['local_file_system']
      }
    },
    events: {
      'filestack.uploadedToFilestack': (event: any) => {
        const fileHandle = event.filesUploaded[0].handle; // get the handle of the uploaded file after every successful upload
        this.performImageTagging(fileHandle); // let's type this in for now; we'll get to the actual function later
        console.log("Callback is triggered for upload event",)
      },
      'filestack.filestackPickerOpened': () => {
        console.log("Callback is triggered for open picker event",)
      },
      'filestack.filestackPickerClosed': () => {
        console.log("Callback is triggered for close picker event",)
      },
      'filestack.uploadFailedToFilestack': () => {
        console.log("Callback is triggered for upload failure",)
      },
    },
  };
}

When configuring your Froala Editor, remember to include your Filestack API key (which you can obtain by creating a free Filestack account). You can also change the picker options to whatever you like, but for this demo, which only requires images, we’ll go with just images. Next, we’ll start scanning images after they’re uploaded, so call your function (in this case, “performImageTagging“) from the “filestack.uploadedToFilestack” event. This function will take the file handle as the parameter. Once you’re done with this, open “editor.component.html” and include the following code:

<div [froalaEditor]="options" [(froalaModel)]="editorContent"></div>
<div id="image-tagging-results"></div> <!-- This will hold the image tags -->

This creates the elements for both the editor and the container for the tags. The next step is to display Froala on the main page of the application. To do so, open “app.component.ts” and import 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';
}

And on your “app.component.html” file, replace the initial code with:

<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * * * 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="">

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

Now, you have a custom component that includes both Froala Editor and Filestack. You can already use this for robust file transformations and rich text editing, but we still need image tagging, right? Don’t worry, it won’t be long before you have it in your application as well.

Adding Image Tagging Features to the WYSIWYG Editor

Go back to your “editor.component.ts” file and add the following functions to your EditorComponent:

// Perform image tagging after file upload
  async performImageTagging(fileHandle: string) {
    const policy = 'YourFilestackPolicy'; 
    const signature = 'YourFilestackSignature'; 
    const imageTaggingURL = `https://cdn.filestackcontent.com/security=p:${policy},s:${signature}/tags/${fileHandle}`;

    try {
      const result = await this.scanImage(imageTaggingURL);
      const tags = result?.tags?.auto;
  
      if (tags) {
        // Loop through the keys and values of tags dynamically
        let tagsList = '';
        for (const [key, value] of Object.entries(tags)) {
          // Create a displayable list item for each tag
          tagsList += `<li>${key}: ${value}</li>`;
        }
        
        console.log("Image tagging result:", result);
        const resultElement = document.getElementById('image-tagging-results');
        if (resultElement) {
          resultElement.innerHTML = `<p>Image Tagging Analysis:</p><ul>${tagsList}</ul>`;
        }
        else {
          console.error("Element for displaying tags not found.");
        }
      }
      else {
        console.error("Empty tags.");
      }
    }
    catch (error) {
        console.error("Error during image tagging:", error);
    }
  }

  // Function to call the Filestack Image Tagging API
  async scanImage(url: string) {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error("Failed to fetch image tagging results.");
    }
    const data = await response.json();
    return data;
}

These two functions deal with calling Filestack’s image tagging API and then looping through the results to create a displayable list of tags. This starts when the successful upload event calls the function “performImageTagging” (yes, the one from earlier). First, you’ll create a URL that includes the Filestack CDN, your generated Filestack policy and signature, the API keyword “/tags/” and the file handle. Afterwards, we’ll call the function “scanImage” to fetch a result from the generated URL. Once we get a result, we’ll create a list of tags using the generated key-value pair from the image tagging API and display it. And that’s it for the coding part. Now, let’s test out our application!

Running the Application

Type “ng serve” into your CLI and hit the enter key to run the application, which you can view at “http://localhost:4200” in your browser. You should see the Froala Editor and the sample text inside. Try uploading an image using the Filestack upload icon on the toolbar. In this case, I uploaded an image of steak.

After picking an image, click the upload button, and you’ll see it added to the editor. More importantly, you’ll see that the container for the tags now has some values.

According to Filestack’s image tagging API, the steak image is very certain that it detects food, beef, and meat. Additionally, it also generated keywords related to the knife in the image. Now, let’s try uploading an image of a snowy ski slope.

After uploading the image, the API generated some very relevant tags, such as nature, outdoors, person (since people are in the image), piste (which is exactly what the image is), and plant (because of the trees). It generated few other words, but in your implementation, you could limit the tags to just the top three or five keywords for better precision.

And there we have it: a reliable image tagging solution using Angular 19 and Froala 4.4. From here, you can do various other modifications, including combining it with other Filestack processes, such as NSFW checking, image sentiment analysis, image enhancement, and more. Additionally, consider using Filestack Workflows to further simplify the implementation and task chaining process. We may be done with this example, but there are various other things we can do with the tools that we have.

Conclusion

In this tutorial, we discussed image tagging, its applications in the real world, and how you can implement it with ease. As image tagging will continue its status as an important feature in the future, the need for the knowledge to implement it will keep increasing. Thankfully, with tools like Angular, Froala WYSIWYG editor, and Filestack, implementing image tagging has become much easier. It is, of course, technology’s job to make us more efficient, and it is ours to create things that will contribute to people in some way.

Get your Filestack API here for free.

Watch the image tagging demo in action.

Imagine building web applications with the same elegance and efficiency as assembling a Lego masterpiece. That’s the power of React JS, where reusable components snap together to create dynamic and interactive user interfaces.

React JS has undeniably changed the web development landscape. But mastering its intricacies can be a journey fraught with challenges.

• State management headaches: Keeping your application’s data organized and predictable can feel like juggling chainsaws. 
• Styling struggles: Creating a visually appealing and responsive UI can be a time-consuming battle with CSS. 
• API integration woes: Connecting your frontend to a backend API can feel like navigating a maze blindfolded.
• The dreaded blank screen of death: Debugging cryptic error messages can leave you feeling lost and frustrated. 

Our new e-book, Froala React JS Full Tutorial, is your guide to conquering these challenges and building React applications with confidence and finesse.

A Journey In Depth

This e-book is not your typical introductory guide. We go beyond the fundamentals, delving into the nuances of React JS to provide you with a deep understanding of its capabilities.

Here’s a glimpse of what you’ll discover:

• Taming State Management: Master the art of managing your application’s data flow with ease. We’ll explore different techniques, including hooks and context APIs, to help you build predictable and maintainable React applications. 
• Styling with Tailwind CSS: Say goodbye to CSS struggles! We’ll show you how to leverage the power of Tailwind CSS, a utility-first framework that makes styling a breeze. Create elegant and responsive UIs with minimal effort.
• Effortless API Integration: Connect your React frontend to any backend API seamlessly. We’ll guide you through the process of making API requests, handling responses, and managing data flow between your frontend and backend.
• Debugging Like a Pro: Don’t let errors derail your development process. We’ll equip you with the knowledge and tools to debug React applications effectively, identify the root cause of errors, and implement robust error handling.  
• And much more! From building dynamic forms to creating interactive charts with Chart.js, this ebook covers a wide range of topics to help you become a proficient React developer.

A Valuable Resource for Web Developers

The Froala React JS Full Tutorial is a valuable resource for any web developer looking to master React JS and build sophisticated web applications. We believe this ebook will empower you to create dynamic, interactive, and user-friendly web experiences.

We invite you to download the e-book today and embark on your React JS journey. We are confident that you will find it an invaluable asset in your web development endeavors.

We hope you enjoy this comprehensive guide to React JS and find it helpful in your web development journey. If you have any questions or feedback, please don’t hesitate to reach out to us.

As we head into 2025, many developers find that rich text editors (RTEs) are no longer just small features tucked into larger products. Instead, these editors have become important parts of content management systems, CRMs, productivity platforms, and e-learning solutions. A few years ago, basic text formatting was enough. Now, developers want more customization, better performance, stronger scalability, and even advanced features like AI-driven help. Recent data from CKEditor’s “2024 State of Collaborative Editing” and TinyMCE’s “2024 RTE Survey” shows these new priorities very clearly.

Key Takeaways

• Developers prioritize customization, seeking full control to tailor rich text editors to their needs.
• Performance is the top concern, with lightweight editors like Froala providing faster load times and smoother experiences.
• Scalability is essential for handling growing user bases and integrating with cloud infrastructures.
• Demand for AI-powered features is increasing, moving beyond basic formatting to include predictive text and grammar checks.
• Rich text editors are now core infrastructure components in modern applications, crucial for content creation and collaboration.

Trend No. 1: More Control and Customization

To start, many developers now need rich text editors that fit their unique needs. According to TinyMCE’s 2024 RTE Survey, 52% of developers want full control over their editor’s experience. This number is important because it shows that most developers do not want a “one-size-fits-all” editor. Instead, they want to shape the editor to match their application’s look, feel, and workflow.

Some ways developers achieve this include:

• Adding or removing toolbar buttons to match the project’s brand and style.
• Using flexible APIs to create custom plugins or special formatting features.
• Including revision histories or other custom workflows that feel natural for their teams.

By having this level of control, developers can make sure their editors feel like a true part of their product, not just a separate tool.

Trend No. 2: Faster Performance Matters Most

Next, performance has become a top priority. In TinyMCE’s 2024 RTE Survey, 79% of respondents said performance is the most critical factor. Today’s users have high standards. If an editor loads slowly or feels sluggish, they might lose focus or trust.

By paying attention to performance, developers can offer a better user experience. They can make sure that, as soon as a user opens the editor, it feels responsive and stable.

Trend No. 3: Scaling for Bigger Workloads

As we move forward, many products must handle larger and more spread-out user bases. According to the TinyMCE 2024 RTE Survey, 43% of developers prioritize scalability. This makes sense because many apps now serve global teams and large groups of users, sometimes all at once. Editors must handle:

• Many users editing documents at the same time.
• Real-time changes appearing smoothly for everyone.
• Growing workloads as the product becomes more popular.

By choosing an RTE that can scale without breaking, developers can trust that their editor won’t slow down or fail as more users rely on it. In the end, scalability means fewer headaches when traffic increases or when a project grows in complexity.

Trend No. 4: Going Beyond

Everyone expects basic formatting features like bold, italics, and headings. In fact, TinyMCE’s 2024 RTE Survey shows that 88% of developers consider these core features a given. But basic formatting alone will not set an editor apart anymore.

Today, developers are looking for ways to enhance the writing process. Some are interested in AI-driven tools, such as:

• Predictive text suggestions that help users write faster.
• Grammar and spelling checks that improve the quality of content.
• Intelligent formatting that adjusts style automatically.

With these new features, the editor becomes more than just a text box. It starts to feel like a smart assistant, guiding users and helping them produce better results. This aligns with a finding in Cloudinary’s 2023 State of Visual Media Report: “68% of developers believe that AI’s main benefit is enabling productivity and efficiency.”

For instance, Froala integrates with Gemini and other popular generative AI tools to improve readability, SEO, and content quality. Making such features accessible in a rich text editor’s toolbar helps users produce top-notch content in significantly less time. Because of this, the most advanced RTEs have gone beyond basic formatting, making them a core part of modern applications.

Trend No. 5: RTEs as Core Infrastructure

In the past, some teams saw RTEs as extras, but that is no longer the case. CKEditor’s “2024 State of Collaborative Editing” report found that 71% of respondents consider RTEs critical to their platforms. This shows a big change.

Developers now treat these editors as key building blocks. For example:

• In a CMS, a well-designed RTE lets marketing teams update content without needing a developer for every small change.
• In a productivity suite, the RTE supports collaboration by letting multiple people edit the same document at once, track changes, and comment.
• In an e-learning platform, the RTE can help teachers build lessons, quizzes, and discussions that include rich media and advanced formatting.

Because these scenarios depend on a reliable editor, choosing the right one is a big decision.

Trend No. 6: Real-World Integration

When we think about these trends, it is easy to see them in real products. Many developers remember times when a slow editor frustrated writers or when a lack of custom features forced the team to find odd workarounds. On the other hand, a good, flexible editor can make everyone’s job easier.

For example, a CMS might use a customizable editor that matches a company’s brand and makes sure that authors can create content without needing a technical person. A collaboration tool might rely on an RTE that loads fast enough to keep everyone’s ideas flowing smoothly. An e-learning platform might use an RTE that handles tables, images, videos, and special formatting to keep students engaged.

Trend No. 7: Why a Lean and Flexible Tool Helps

Some tools already fit these new needs without shouting about it. For example, an editor like Froala stays light and easy to load while still offering ways to add custom features. Furthermore, it scales nicely and works well with popular languages and frameworks.

According to the 2024 Stack Overflow Development Survey, JavaScript continues to dominate as the most popular programming language. With 62.3% of developers using JS, 39.8% desiring it, and 58.3% admiring it in 2024, it’s here to stay. This highlights the importance of using rich text editors that integrate into diverse technologies, especially widely used ones. Such versatility allows developers to quickly adapt to new requirements, such as changes in tech stacks, promoting scalability.

A lean tool like Froala can help developers meet their goals without slowing them down. Even if it is not the only choice, it represents the kind of editor that developers now look for—something that does not get in the way but instead supports growth and new ideas.

In Conclusion

The data from these surveys is hard to ignore. More than half of developers want deep customization. Nearly four-fifths put performance first. Almost half focus on scalability. Also, a large majority expect at least some baseline formatting, and many want even more advanced features, including AI-driven help.

These changes show that choosing the right RTE is more important than ever. Today’s developers need an editor that fits into their workflow, loads quickly, scales easily, and offers a path to smarter features. By paying attention to these factors, teams can pick an editor that feels like part of the product’s core, not just another add-on.

References
CKEditor. “The 2024 State of Collaborative Editing.” CKSource, a Tiugo Technologies Company.
https://ckeditor.com/insights/collaboration-survey-report-2024/

TinyMCE. “The 2024 RTE Survey.” Tiny Technologies.
https://www.tiny.cloud/blog/announcing-the-2024-state-of-rich-text-editors-report

2024 Stack Overflow Developer Survey.
https://survey.stackoverflow.co/2024/

Cloudinary. “2023 State of Visual Media Report.”
https://cloudinary.com/state-of-visual-media-report

Text Editor Market Insights Report. “Global Text Editor Market Overview and Trends.” Verified Market Reports.
https://www.verifiedmarketreports.com/product/text-editor-market/

Froala Official Site. “Why Froala? Key Features and Benefits.”
https://www.froala.com

Every image has a story to tell, which means that emotion matters in each image upload. For example, let’s say that some moviegoers will have to choose between two horror films. It’s highly likely for them to choose the film with a poster that exhibits more fear and uneasiness. This is where image sentiment analysis comes in. It unlocks emotional context within visuals to help creators and decision-makers optimize their content for maximum impact. When combined with a visual HTML WYSIWYG editor, it allows end users to easily upload images and receive feedback about the emotions in their images instantly. In this tutorial, I’ll show you how to add image sentiment analysis features in your HTML WYSWIG editor to determine emotion in images.

Key Takeaways

• Image sentiment is an advanced feature that suits portrait-centric applications
• Easily implement image sentiment analysis with an intelligent visual editor
• Scan images from uploads or external sources
• Chain image sentiment analysis together with other Filestack tasks
• Some use cases for image sentiment detection include marketing, entertainment, social media, and more

What is Image Sentiment?

Image sentiment is a process that uses machine learning and algorithms like neural networks and deep learning to evaluate an image’s conveyed emotions. For instance, when a user uploads a photo of a person, image sentiment detection can determine whether the person is happy, calm, angry, and so on. This process is useful across different fields, such as marketing, user studies, content creation, entertainment, and more. In all these examples, image sentiment analysis can enhance engagement strategies, helping organizations convey their message better and give their audience what they need. Now that we know a bit about image sentiment, let’s explore how we can implement it in a WYSIWYG editor.

How to Analyze Image Sentiment Using a Visual HTML WYSIWYG Editor

To start off, we’ll need to create and initialize our Froala editor. Afterwards, we’ll use Filestack’s Image Sentiment API to evaluate any uploaded images. In our setup, Filestack is natively integrated into Froala Editor (v4.3.0 and up). Once we get both the editor and image sentiment detector running, we’ll display the results of the API call in our editor.

Initialize the Visual HTML WYSIWYG Editor

In your HTML file, add the code:

<head>
     <!-- Add your other CSS here -->

     <!-- Froala and Filestack stylesheets -->
     <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>
     <!-- Your other elements go here -->
     <div id="froala-editor"></div>
     <!-- Your other elements go here -->

     <!-- Froala and Filestack JS -->
     <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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js"></script>

     <!-- Your other JS files go here -->
     <script src="js/index.js"></script>
</body>

The HTML, along with your other elements, styles, and JS, should contain the Froala and Filestack dependencies. Furthermore, this is where you’ll create the element in which you’ll initialize the editor. When you’re done, navigate to your JS file or script and include the following:

new FroalaEditor('#froala-editor',{
    filestackOptions: {
        filestackAPI: 'YourFilestackAPIKey',
        uploadToFilestackOnly: true,
        pickerOptions: {
            accept: ['image/*'],
            fromSources: ['local_file_system']
        }
    },
    toolbarButtons: {
        'moreRich': {
            'buttons': ['openFilePickerImageOnly', 'insertLink', 'insertTable', 'emoticons', 'specialCharacters', 'insertHR'],
            'buttonsVisible': 3
        },

        'moreText': {
            'buttons': ['bold', 'italic', 'underline', 'fontFamily', 'fontSize', 'textColor', 'backgroundColor', 'clearFormatting']
        },

        'moreParagraph': {
            'buttons': ['alignLeft', 'alignCenter', 'formatOLSimple', 'alignRight', 'alignJustify', 'formatOL', 'formatUL', 'paragraphFormat', 'paragraphStyle', 'lineHeight', 'outdent', 'indent', 'quote']
        },
        'moreMisc': {
            'buttons': ['undo', 'redo', 'fullscreen', 'selectAll', 'html', 'help'],
            'align': 'right',
            'buttonsVisible': 2
        }
    },
    events: {
        'filestack.uploadedToFilestack': function (response) {
            // when a file is uploaded, begin the image sentiment detection process
            performAnalysis(response.filesUploaded[0].handle, this);
        },
        'filestack.uploadFailedToFilestack': function (response) {
            console.log(response);
        },
    },
    heightMin: 500,
    heightMax: 1000
});

This script initializes Froala Editor into the element that we created earlier. We also declare some Froala options along with some Filestack options. In the Filestack options, we specify that we want to upload images of any type from the local file system to Filestack. On the other hand, in our Froala options, we also specify our buttons, editor size, and two callback functions. The first event deals with a successful image upload, while the other deals with possible upload failure. Whenever the user successfully uploads an image, we’re calling a function called “performAnalysis,” which takes the uploaded image’s file handle and the editor instance as its parameters. This function is where we’ll use Filestack’s image sentiment features to evaluate the emotions.

Call the Image Sentiment Analysis API

In your JS file, append the code below:

async function performAnalysis(fileHandle, editorInstance) {
    // use the generated policy and signature from your Filestack dashboard
    const policy = 'YourGeneratedPolicy';
    const signature = 'YourGeneratedSignature';
    const imageSentimentURL = `https://cdn.filestackcontent.com/security=p:${policy},s:${signature}/image_sentiment/${fileHandle}`;

    // fetch results from the Image Sentiment API, then insert the result into the editor
    try {
        const result = await scanImage(imageSentimentURL);
        // format the emotions (for display)
        const emotions = formatEmotions(result.emotions);
        editorInstance.html.insert(`<p>Image Sentiment Analysis:</p><ul>${emotions}</ul>`);
        console.log("Image sentiment result inserted into the editor:", result);
    } catch (error) {
        console.error("Error during sentiment analysis:", error);
    }
}

// function that makes the API call
async function scanImage(url) {
    const response = await fetch(url);
    if (!response.ok) {
        throw new Error("Failed to fetch image sentiment results.");
    }

    const data = await response.json();
    return data;
}

Notice how we have two functions, performAnalysis and scanImage. The first one is responsible for generating the URL that we’ll be using for the API call. Once it does that, it then passes the constructed URL to the second asynchronous function, which calls the API call and returns the result back to the first function. Afterwards, we insert the result of the fetch call back into the editor. But to do that, we need another function for turning the raw results into an easy-to-read list.

Format and Display the Results in the Editor

In the same script, add the following function:

// function for formatting the JSON object of emotions into an HTML list
function formatEmotions(emotions) {
    if (!emotions.hasOwnProperty('HAPPY')) return '<li>No sentiment detected.</li>';

    return Object.entries(emotions)
        .map(([emotion, value]) => `<li>${emotion}: ${(value).toFixed(2)}%</li>`)
        .join('');
}

This function first checks if the JSON result (emotions) has empty values. If it doesn’t, it returns that no sentiment was detected in the image. Otherwise, it returns a list that contains the keys (emotions) and values (in percentage and rounded up to two decimal points). After this, you now have a working image sentiment analysis feature in your application. But we’re not quite done yet. Let’s run the application and check the results. Here I uploaded an image of a person who appears to be confused.

After uploading the image, Filestack determined that the person in the image displays 99.27% confusion, which checks out. After checking the console, here’s what I saw:

This is the unformatted version of the result. Now, let’s try uploading a picture of a person smiling:

Filestack’s Image Sentiment Detection feature correctly determined that the overall sentiment of the image is 100% happy. But what if the image has no person at all? Let’s try uploading a picture of a landscape:

Here, we can see that the image has no sentiment or emotions since it doesn’t contain a portrait of anybody. Now, you’re free to experiment with Filestack’s image sentiment features. Note that you can also do other things with it. For instance, you can use it in your Filestack Workflows with other tasks, use it on images with external URLs, and use it with storage aliases.

Wrapping up: Enhance Your Visual HTML WYSIWYG Editor with Image Sentiment Features

By integrating image sentiment analysis into your visual HTML WYSIWYG editor, you add a layer of intelligence and user engagement to your content-centric apps. This feature not only streamlines workflows for developers but also provides meaningful insights into visually conveyed emotions and helps you connect more with your users. So, take advantage of this powerful combination to create smarter tools that cater to a wide variety of creative needs.

Get your Filestack API here for free.