This week’s promo -  20% off on Enterprise Plans
Days
Hours
Minutes
Seconds
x

New Froala Editor v4.5.1 is here – Learn More

Pricing
Get Started
Skip to content

A look inside the core editor improvements in Froala 4.1

Core Editor Improvments

Most JavaScript developers prefer modern libraries and frameworks for coding due to their ability to create web applications that are not only fast and scalable but also easy to maintain. These frameworks provide a set of features and conventions that simplify the development process and reduce the amount of boilerplate code. They also offer security, performance optimization, testing, and deployment benefits. All of these features make it the best choice for developers.

We understand your needs and requirements for having an editor that supports Modern JavaScript Frameworks and we released our 4.1 version for you. A release that supports the popular React and Vue JavaScript libraries’ latest versions. As well as the Angular framework’s latest version.

Moreover, the 4.1 release contains enhancements and bug fixes to the core editor functionality as part of periodic updates to our rich text editor.

The release contains too many improvements. We couldn’t cover all of them in one blog post. We focused on framework improvements in our first post. Today, we will recap quickly the Frameworks improvements and then discuss the core editor improvements in more detail.

React, Angular, and Vue Support

Froala 4.1 supports React 18, Angular 15, and Vue 3. Please refer to the documentation page of your preferred framework and follow it for easy integration. If you want more details, you can read our blog posts about integration with React and Angular. The Vue integration post will be published soon.

Supporting the latest version of these frameworks was very imperative for several reasons:

  1. Maximized Compatibility: Frameworks are frequently updated to deal with emerging issues, optimize performance, and add new features. These updates can sometimes interfere with older code. Froala 4.1 ensures compatibility with other software that’s built using the same version of the used framework- this means fewer breakdowns and better performance overall.
  2. Improved Performance: The most recent versions of a framework aim to provide optimal performance. They might contain code optimizations that make the applications built with them run faster and smoother. In other words, up-to-date SDKs can make better use of system resources.
  3. Access to Latest Features: By supporting the latest version of these frameworks, developers get access to new and enhanced features that weren’t available in previous versions. These features can significantly streamline the development process and allow for more sophisticated applications.
  4. Security Measures: As with most software updates, new versions of a framework often come with patches for known security vulnerabilities. By supporting the latest version in the SDK, It helps protect applications from potential attacks or hacking attempts linked to outdated versions.

Now you can enjoy all of these benefits with Froala 4.1, ensuring your web application development is up-to-date, efficient, and secure.

TypeScript Definition Support

Froala 4.1 comes with a TypeScript definition. This is another big feature added to this version. Having a proper TypeScript definition helps developers by providing helpful hints, type-checking at compile-time, and more robust auto-completion.

  1. Better Intelligence
    The tooling can provide software development teams with more context-rich granularity when coding — leading to fewer errors.
  2. Compile-time Type Checking: Allow for catching possible bugs in your code that you may miss without TypeScript’s type-checking benefit. It greatly enhances build-time code reliability.
  3. Definitive Auto-completion: Better auto-completion aids in quick coding, with suggestions based on TypeScript definitions giving developers an accurate find-and-replace functionality. By having accurate types, your editor gets a clear insight into the value or the functionalities that are available without searching the entire code base.

What else

Read our release blog post to learn more about:

  • Display The Editor Toolbar At The Bottom On Mobile Devices
  • Improved Accessibility
  • Enhanced Pasting of content from 3rd party tools
  • Change Default Settings for Images Inside Iframe
  • Consistent API for image, video, and file uploading
  • Improved adding table rows functionality

Core Editor Improvements

Feedback from our user community continues to drive the development and refinement of Froala’s core editor. Improvements include expanding functionality, enhancing user experience, and fixing bugs.

Improvements to the Editor API

Say hello to the toolbarResponsiveToEditor API option for improved editor toolbar responsiveness. 

Froala is known for its responsive toolbar. It was the first editor to introduce API options to handle toolbar button visibility based on screen size. It provides developers with four API options: toolbarButtons, toolbarButtonsMD, toolbarButtonsSM, and toolbarButtonsXS. These options accept objects or arrays to give the developer flexibility when writing code. 

  • toolbarButtons: used to set the list of buttons that appear in the rich text editor’s toolbar on large devices (≥ 1200px).
  • toolbarButtonsMD: used to set the list of buttons that appear in the rich text editor’s toolbar on medium devices (≥ 992px). If you don’t set it, the toolbarButtons value will be used.
  • toolbarButtonsSM: used to set the list of buttons that appear in the rich text editor’s toolbar on small devices (≥ 768px). If you don’t set it, the toolbarButtonsMD value will be used.
  • toolbarButtonsXS: used to set the list of buttons that appear in the rich text editor’s toolbar on extra small devices (< 768px). If you don’t set it, the toolbarButtonsSM value will be used.

As you can see, these options are set based on window width. But in real applications, there are many cases where the developers limit the width of the editor to a reasonable width, for example, setting the editor max-width to 800px. In such cases, if you resize your browser, you may observe the toolbar buttons adjust before the editor size itself changes. It was the developer’s responsibility to use the provided options to adjust the toolbar display as needed. However, there were many requests to change this toolbar behavior to make it responsive to the editor size, not the screen size. 

In this release, we introduce another option to control editor toolbar behavior. The toolbarResponsiveToEditor API option accepts a Boolean with a default value set to false. This means the toolbar responds to the browser window size. If you prefer to make the editor toolbar responsive based on editor size, set the toolbarResponsiveToEditor option to true. This option enhances the editor’s UI by making toolbars more responsive. To enjoy this new option, update your editor now.

The updated API method html.wrap generates cleaner HTML output

The editor html.wrap API Method helps developers customize the HTML output by wrapping the text using a div with the class fr-temp.

  • The first parameter determines if the editor text should be wrapped or not.
  • The second parameter determines if the <td> and <tr> text should be wrapped or not.
  • The third parameter determines if the text inside the<blockquote> tag should be wrapped or not.

Merging cells in a table wrapped using html.wrap creates empty paragraphs inside the merged cell.

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

// Call the method inside the initialized event.

editor.html.unwrap(false, true, false);

})

With the new updated html.wrap API Method, developers will now experience cleaner editor content when using this method. We encourage you to explore this improved feature and harness its potential in your web application development projects.

Get rid of console error when inserting content using the editor html.insert API method

The html.insert API method allows developers to insert content inside the editor programmatically. You may want to insert content inside the editor in different cases. For example, when a specific event occurs or when you create a custom button that inserts specific content when clicked.

The method takes two parameters:

  1. The first parameter is the HTML to be inserted.
  2. A Boolean parameter. Set it to True if you want the editor to clean HTML content upon insertion, or False to insert content without any cleaning.

Occasionally, a “TypeError: Cannot read properties of undefined (reading 'which')“ error message shows up in the console when calling this method. This no longer happens.

var editor = new FroalaEditor('.selector', {}, function () {
  // Call the method inside the initialized event.
  editor.html.insert('foo bar', true);
})

Improved drag and drop experience

The Froala Draggable plugin allows you to move elements using your computer mouse. In the latest update, we have improved the overall drag and drop experience. User interactions are now more fluid and accurately represented on screen, providing a smooth, responsive experience while moving elements.

The plugin comes with thedragInline API option which specifies how the dragged elements should be placed in the new position. When this option is set to false, dragged elements are placed between block tags and not inside them.
Try to drag the section with red border in the below example:

Improved Safari Support

As part of Froala’s ongoing effort for cross-browser usability, continued improvements have been made to ensure better support for Safari. Now pasting links and images from third-party tools inside the Safari editor has been improved. We have also resolved issues related to incorrect behavior on Ipad Safari when backspacing on Korean text.

As always, we highly encourage developers to update their Froala version to enjoy these improvements and keep their editor within specifications.

Maintaining Viewport Stability: Enhanced FullScreen Transitions and Resolving iFrame Scrolling while pressing backspace

In an effort to deliver a more fluid user experience, we have enhanced full-screen transitions, resulting in more intuitive and engaging displays that go easy on the eyes whenever the mode is toggled. As a result of these UI enhancements, you can expect seamless switches between full-screen and standard modes, ensuring viewport stability for user convenience.

We have also addressed an issue regarding iFrame scrolling while pressing backspace. This unusual activity created difficulty navigating backward through the text. The loss of place posed a significant inconvenience, particularly in lengthy texts. This issue is now resolved. Pressing the backspace key no longer triggers unexpected and intrusive scrolling behavior, enabling greater ease and focus when editing and revising your content. 

Many bug fixes

Every new release of Froala features bug fixes to improve its software stability and quality.

Table row with display: none style no longer causes issues

Consider the following scenario

  • You have a table inside the editor
  • One of the table rows has a display: none style
  • You delete a row after the row with the display: none style

Previously, the editor was deleting the incorrect row, but this issue has now been resolved, and the correct row will now be deleted.

Check the release notes for the complete list of updates and improvements

How do I upgrade to V4.1?

Downloading and updating the Froala Editor is extremely straightforward. We have a dedicated page for each Framework SDK that explains in detail how to install or update your SDK to the latest version. Follow the links below to get started.

If you are using a plain JavaScript library or other framework, check the get started page to know the proper way of downloading the latest Froala Editor release and how to include it in your project based on your preferred method.

If you are using a plain JavaScript library or other framework, follow the table below to know the proper way of downloading the latest Froala Editor release and how to include it in your project based on your preferred method.

Method How to download Include in your project
CDN – 
<!-- Include Editor stylesheet-->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />

<!-- Include Editor JavaScript file-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/js/froala_editor.pkgd.min.js"></script>
CDN (Always the latest version) – 
<!-- Include Editor stylesheet-->
<link href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />

<!-- Include Editor JavaScript file-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js"></script>
NPM 
npm install froala-editor
 
<!--

Replace the {download-folder-path} in the following example with the path to the folder containing the stylesheet file e.g.

../css/froala_editor.pkgd.min.js

-->

<link href="{download-folder-path}/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />

<!--

Replace the {download-folder-path} with the path to the folder containing the JS file e.g.

../js/froala_editor.pkgd.min.js

-->

<script type="text/javascript" src="{download-folder-path}/froala_editor.pkgd.min.js"></script>
bower 
bower install froala-wysiwyg-editor
NO Package Manager Download Froala WYSIWYG Editor files using the download form here.
Integrated with a Framework Select your preferred framework from 17 different popular frameworks.
Other options Check here for other options to use Froala WYSIWYG Editor in your project.

For Froala Editor Version 2 Users:

Follow this migration guide to get step-by-step instructions on how to upgrade from version 2.

Try The Latest Froala Editor

Explore a variety of examples that demonstrate the functionality of the Froala HTML Editor.

Change Log

Get Started

  • You can download and start using Froala in less than five minutes following our get started guide.

Support and Feedback

  • We would like to hear what you think of the latest release! Join us on our GitHub Community to chat with our product manager, developers, and other members of the Froala team.

Technical Questions

Download Froala Editor

How to Integrate Froala with Angular

How to Integrate angular

Before diving in, it’s crucial to understand why you might want to use Froala. Apart from its rich set of features, it’s customizable, intuitive, and plays well with frameworks like Angular. The Froala community is active, ensuring that the editor keeps improving and that you receive support when needed with angular wysiwyg editors.

 

How to integrate Froala with Angular

 

1. Create a New Angular Project (If you haven’t already):

For those who are starting fresh:

npm install -g @angular/cli

ng new your-project-name

cd your-project-name

2. Installation

Begin by integrating the angular-froala-wysiwyg package:

npm install angular-froala-wysiwyg

3. Styling the Froala Editor

Ensure that Froala’s style resources are linked. In your project’s index.html, paste:

<link href="node_modules/froala-editor/css/froala_editor.pkgd.min.css" rel="stylesheet">

Icon styling boosts the editor’s appeal. Use Font Awesome:

 npm install font-awesome

4. Setting Up in Angular

Head to app.module.ts and import necessary modules:

import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-wysiwyg';

Update your @NgModule:

@NgModule({
   ...
   imports: [
     ...,
     FroalaEditorModule.forRoot(),

     FroalaViewModule.forRoot()
   ],
   ...
})

5. Ensure All Styles are Loaded:

In angular.json, add:

"styles": [

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

6. Using Froala in a Component

Let’s see this in action. Navigate to your component, like app.component.html:

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

For two-way data binding:

public editorContent: string = 'My initial content';

<div [froalaEditor] [(froalaModel)]="editorContent"></div>

7. Test it out by running:

ng serve

If you have default settings, it will be running on localhost:4200/ and you should see this:

Angular localhost

8. Adding a Custom Button

Here’s where the fun begins! We can expand Froala’s capabilities by adding our own custom buttons. Let’s dive into a real-world example:

Firstly, import Froala and define the component structure:

import FroalaEditor from 'froala-editor';
import { Component, OnInit  } from '@angular/core';
@Component({
  selector: 'app-demo',
  template: `<div class="sample">
               <h2>Sample: Add Custom Button</h2>
               <div [froalaEditor]="options" [(froalaModel)]="content" ></div>
             </div>`,
  ...
})

Within the component, implement the OnInit method:

export class AppComponent implements OnInit{
  ngOnInit () {
    FroalaEditor.DefineIcon('alert', {NAME: 'info'});
    FroalaEditor.RegisterCommand('alert', {
      title: 'Hello',
      ...
      callback: () => {

        alert('Hello!');
      }
    });
  }
  public options: Object = {
    ...
    toolbarButtons: ['bold', 'italic', ...,'alert'],
    ...
  };
}

9. Events and Methods

Froala events allow you to run specific actions in response to editor activities. For instance, you can run a function when the editor’s content changes.

public options: Object = {
  events : {
    'froalaEditor.contentChanged' : function(){
      console.log('Content updated!');
    }
  }
};

Methods provide control over the editor’s behavior. For instance:

// Initialize the editor first
editor = new FroalaEditor('div#editor');
// Use a method
editor.html.set('<p>New HTML content</p>');

With regards to Manual Initialization

Get the functionality to operate on the editor: create, destroy and get editor instance. Use it if you want to manually initialize the editor.

(froalaInit)="initialize($event)"
// Where initialize is the name of a function in your component that will receive an object with different methods to control the editor initialization process.
public initialize(initControls) {
  this.initControls = initControls;
  this.deleteAll = function() {
    this.initControls.getEditor()('html.set', '');
  };
}

The object received by the function will contain the following methods:

  • initialize: Call this method to initialize the Froala Editor
  • destroy: Call this method to destroy the Froala Editor
  • getEditor: Call this method to retrieve the editor that was created. This method will return null if the editor was not yet created

Displaying HTML

To display content created with the Froala editor use the froalaView directive.

[froalaView]="editorContent"
<div [froalaEditor] [(froalaModel)]="editorContent"></div>
<div [froalaView]="editorContent"></div>

Use Cases for Froala and Angular Integration

  1. Dynamic CMS: Make a content management system where users can edit and publish content in real time, while the backend (which is powered by Angular) handles and stores data efficiently.
  2. Educational Platforms: Froala can be used to create and edit rich-text course content, quizzes, and assignments on platforms that offer courses, while Angular can be used to manage user data, track progress, and do other things.
  3. E-Commerce Platforms: Froala can be used to change product descriptions, customer reviews, and any other text on e-commerce platforms. Angular, on the other hand, can handle the cart, user authentication, and managing products.
  4. Collaborative Tools: Tools like document editors or design platforms that let more than one person edit at the same time. Froala can handle the editing, and Angular can handle user sessions, updates in real time, and resolving conflicts.

Why choose Froala with Angular?

Angular is one of the most powerful front-end frameworks because it is scalable, modular, and has a responsive ecosystem. On the other hand, Froala has a rich-text editor that is sleek, easy to use, and powerful. When put together, the two can make applications that are very interactive and dynamic.

1. Reactive Forms with Froala

Reactive forms in Angular are a powerful way to react to form inputs. When developers combine Froala with Angular’s reactive forms, they can easily link the editor’s content to the form controls. This makes sure that when users change content in Froala, the form control underneath is updated automatically, and vice versa.

To integrate Froala with Angular’s reactive forms, you’ll first set up your form and then bind the Froala editor content to a form control:

// In your component.ts

import { Component } from '@angular/core';

import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-editor',
  templateUrl: './editor.component.html'
})
export class EditorComponent {
  editorForm: FormGroup;
  constructor(private fb: FormBuilder) {
    this.editorForm = this.fb.group({
      content: ['Initial content']
    });
  }

In your HTML:

<form [formGroup]="editorForm">
  <textarea [froalaEditor] formControlName="content"></textarea>
</form>

2. Dynamic Content Loading

Similarly, you can easily get content from a backend service and bind it to the Froala editor using Angular’s dynamic content loading features. In other words, this means that for CMS-based applications, the content can be fetched, edited in Froala, and then saved back in a very responsive way.

3. Custom Directives with Froala

Above all, with Angular’s powerful directive system, developers can give DOM elements their own custom behaviors. With Froala, you can make your own directives to give the editor special features. For example, you could use a directive to automatically format content, add custom validations, or even work with plugins from other sites.

4. Component-Based Architecture

In addition, the modularity of Angular is ensured by its component-based architecture. You can make a Froala editor component that works on its own and can be used in other parts of your application. This makes sure all instances of the editor behave and look the same.

Example:

Create a standalone Froala editor component:

editor.component.ts:

import { Component, Input } from '@angular/core';

@Component({

  selector: 'app-froala-editor',

  templateUrl: './froala-editor.component.html'

})

export class FroalaEditorComponent {

  @Input() content: string;

}

In your froala-editor.component.html:

<textarea [froalaEditor] [(ngModel)]="content"></textarea>

Then, you can reuse this component throughout your application:

<app-froala-editor [content]="myContent"></app-froala-editor>

When you use this Angular wysiwyg editor, adding these features will help improve the dynamic capabilities of your Angular application, making it both efficient and easy to use.

5. AOT Compilation and Lazy Loading

Furthermore, by converting Angular components and templates into JavaScript code that the browser can immediately execute, Angular’s Ahead-of-Time (AOT) compilation optimizes the application. When you combine this with Froala, the editor is quick and the user experience is improved. With lazy loading, the editor and its assets can be loaded only when they are needed, making the first load time faster.

6. Event-Driven Architecture

Both Angular and Froala are heavily event-driven. In other words, this makes it easy to set up event listeners that respond to certain actions. For example, you could set up an event that happens when the content in Froala reaches a certain number of words or when a certain style is used. Use the best angular wysiwyg editor to do all of these things.

Ready to build more with Froala and its Angular Wysiwyg Editor?

Because of this, the integration of Froala with Angular isn’t just about embedding a text editor within an Angular application. It’s about harnessing the combined power of a world-class text editor and a leading front-end framework. Whether you’re building a small blog or a full-fledged web application, this combination ensures scalability, reactivity, and a top-notch user experience with an angular wysiwyg editor.

 

Get Froala Editor Now

Integrate Froala with React

integrate Froala with React

Earlier this week, Froala announced its most impressive editor release ever 4.1. This release was eagerly anticipated by React developers since it supports React 18. This means you can now easily include a React WYSIWYG editor component in your React application made using Froala, the top WYSIWYG editor.

Froala provides a modern user interface React WYSIWYG editor equipped with hundreds of features including a powerful API, basic and advanced rich text editing functions, SEO-friendly content, accessibility support, security, and compatibility with MS Word, Excel, and Google documents.

In this article, we will demonstrate how to initialize Froala’s editor in a React application using Froala’s React SDK.

We assume you have a working knowledge of:

  • JavaScript (including some of the newer, es2015 features)
  • React
  • How to use the terminal/command line
  • Node and npm

We will create a simple application and guide you step-by-step through this tutorial. There will be a working demo at the end of the article.

React WYSIWYG editor

Step 1: Creating A React App.

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

  1. Open the Node.js command prompt
  2. Navigate to the location where you want to install the React app.
  3. Since we don’t have a running React app. we will create a new React application using a package called create-react-app. To install the package run 
    npm install -g create-react-app
    Note:
    If you’ve previously installed create-react-app it globally via npm install -g create-react-app, we recommend uninstalling the package using npm uninstall -g create-react-app or yarn global remove create-react-app. Then install it again to ensure that npx always uses the latest version.
  4. Run: 
    npx create-react-app my-froala-editor-app

    A command which creates a React app. Create React app

    After running this command, if you go to the specific location you will find a folder called my-froala-editor-app containing the React app files.

Step2: Installing Froala

Navigate to the my-froala-editor-app folder via your terminal/command line window.

cd my-froala-editor-app

Once inside, install Froala’s React SDK by running the following command:

npm install react-froala-wysiwyg --save

Don’t forget, the --save flag is important as it adds the installed NPM package to the dependencies in your package.json file. This ensures that the Froala editor is included in your deployed application.

install Froala react SDK

Check your application’s node_modules directory or the package.json file for a successful installation of the Froala library. The react-froala-wysiwyg should now be present

Step3: Displaying the Froala Editor

Once you have installed the Froala React SDK, you can display the editor in any existing component by nesting <FroalaEditorComponent tag='textarea'/> into it.

As a test, open the app.js file in the src folder and edit it as follows:

    1. First, import the editor CSS stylesheet so the editor UI appears correctly 
      // Require Editor CSS files.
import 'froala-editor/css/froala_style.min.css';
import 'froala-editor/css/froala_editor.pkgd.min.css';

      Note:
      froala_style.min.css: Only needed if you display the editor content outside the rich text editor to preserve the look of the edited HTML.
      froala_editor.pkgd.min.css: Contains the editor UI styles, such as the toolbar, buttons, popups, etc.

    2. Import FroalaEditorComponent so you can use the component inside the app function 
      import FroalaEditorComponent from 'react-froala-wysiwyg';
    3. Place a <FroalaEditorComponent tag='textarea'/> where you want the editor to appear. I will add it under the <header> element. The app.js should now look like this 
      import logo from './logo.svg';

import './App.css';

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

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

import FroalaEditorComponent from 'react-froala-wysiwyg';

function App() {

return (

<div className="App">

<header className="App-header">

<img src={logo} className="App-logo" alt="logo" />

<p>

Edit <code>src/App.js</code> and save to reload.

</p>

<a

className="App-link"

href="https://reactjs.org"

target="_blank"

rel="noopener noreferrer"

>

Learn React

</a>

</header>

<FroalaEditorComponent tag='textarea'/>

</div>

);

}

export default App;
    4. That’s it, run the app using the command npm start
    5. The http://localhost:3000 should be open automatically on your browser and that app now is running. Scroll down and you will find the Froala editor displayed with its basic configuration under the default React header

Step4: Create a custom Froala Editor component

As you can see it is very simple to install and use the Froala editor inside your application. However, since most developers will need to customize the editor function and style to their needs before displaying it, let’s see how we can do this.

Ideally, you will need to create a custom React component. Component files are where you define the structure, the UI logic, and the component’s specific behaviors, including state handling and methods that get executed in response to user actions.

React supports two types of components:

  1. Class component
  2. Functional component

There are a few fundamental differences between the class and functional components:

  1. Syntax: Class components are written as ES6 classes, while functional components are simple JavaScript functions.
  2. Lifecycle Methods: Class components allow you to use lifecycle methods (like componentDidMount, componentDidUpdate, and componentWillUnmount). Prior to React 16.8, functional components did not have this ability. However, with the introduction of Hooks in React 16.8, you can now use features like state and lifecycle methods in functional components using useEffect.
  3. State Management: Before React 16.8, state could only be used in class components. Now, however, with the introduction of the useState and useReducer hooks, you can use state in functional components too.
  4. This Keyword: In class components, the this keyword is used to access props, state, and methods. In functional components, there’s no this keyword, and props are passed in as a function argument.
  5. Boilerplate & Readability: Class components often require more code than functional components. And due to the simplicity of functional components, especially with hooks, they can lead to more readable code for some developers.

Froala SDK can be used in both types as declared in the SDK documentation. In this article, we will use the functional component.

Create a new directory in the src directory called components and create a file called FroalaBasicEditorComponent.jsx in that directory. Feel free to use a different name but remember to write it correctly in the code.

folder stracture

Similar to what we did in the App.js we will import the editor styles, and the editor component and call it inside whatever HTML markup we want. The EditorComponent.jsx now should be like

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

// Render Froala Editor component.

function EditorComponent (){

return (

<div class="editor">

<h3> Froala's React WYSIWYG Editor</h3>

<FroalaEditorComponent tag='textarea'/>

</div>

);

}

export default EditorComponent;

As you can see, we simply return a header and put FroalaEditorComponent inside a div with class editor. Finally, we export the new component so we can import it into other components.

Now we can remove the lines we added previously to the App.js file and add the following:

import EditorComponent from './components/EditorComponent';

and <EditorComponent /> replaces <FroalaEditorComponent tag='textarea'/> so App.js should look like this:

import logo from './logo.svg';

import './App.css';

import EditorComponent from './components/EditorComponent';

function App() {

return (

<div className="App">

<header className="App-header">

<img src={logo} className="App-logo" alt="logo" />

<p>

Edit <code>src/App.js</code> and save to reload.

</p>

<a

className="App-link"

href="https://reactjs.org"

target="_blank"

rel="noopener noreferrer"

>

Learn React

</a>

</header>

<EditorComponent />

</div>

);

}

export default App;

and if you open http://localhost:3000 you will see it display the same page layout as it is. Now we will customize the EditorComponent.jsx to customize the editor.

Let’s create a custom stylesheet file called EditorComponent.css where we can style the HTML elements related to the component. For example, centering the “.editor” div

.editor{

width: 60%;

margin: 60px auto;

}

We should then import that CSS file inside the EditorComponent.jsx like this

import './EditorComponent.css';

Basic Froala React editor

Now let’s customize the editor to load all plugins:

To load the full-featured editor, simply import the plugins JS file

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

Now the editor turns out to be like this

full-featured React editor

More customizations

The Froala editor has a powerful API with more than a hundred options, events, and methods. For example, you can use the API options to turn the editor into a document editor. Easily pass the desired options in the config object while calling the FroalaEditorComponent in your component.

function EditorComponent (){

    let config = {
      documentReady: true,
      heightMin: 300,
      events : {
        'contentChanged' : function(e, editor) {
          console.log('test');
        }
      }
    };

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

}

export default EditorComponent;

Similarly, the events are also passed through the config object. For example:

function EditorComponent (){

    let config = {
      documentReady: true,
      heightMin: 300,
      events : {
        'contentChanged' : function(e, editor) {
          console.log('test');
        }
      }
    };

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

}

export default EditorComponent;

There is a lot you can do with Froala, such as changing the default language, changing the editor theme, adding a custom button, and loading a special component. Later, we will have dedicated articles about this.

For now, have fun with Froala’s React WYSIWYG editor demo.

Froala Blog Call To Action

Introducing Froala Editor v4.1: The Long-Awaited Update Packed with Modern Framework Compatibility!

Core editor improvments

We are thrilled to announce the latest release of Froala, the WYSIWYG rich text editor, that everyone eagerly awaits. This new release comes with game-changing features that enhance compatibility with modern frameworks, making integration an absolute breeze. In this blog post, we’ll dig into the newly added Froala’s powerful feature set that makes content creation a pleasure rather than a chore.

Embracing Modern Frameworks: Angular, React, and Vue Compatibility!

One of the major reasons to get excited about this release is that Froala now supports the latest Angular, React, and Vue frameworks. This means you can enjoy Froala’s advanced feature set while quickly integrating and using the editor in a wide range of projects. Say goodbye to compatibility headaches and hello to smooth project workflows!
Froala 4.1 release
Customers will benefit from the support of these popular JavaScript frameworks, reducing development time and improving user experience. This release ensures that the editor performs efficiently when working with these modern frameworks, minimizing the chances of performance bottlenecks or slowdowns. It was designed to work harmoniously with your chosen framework for a smoother user experience.

React Support

The editor now supports React V18. Providing support for the latest React version helps React developers reduce their development time and avoid errors. React is a popular framework with 17M+ NPM weekly downloads. This upgrade demonstrates our commitment to keep pace with technological innovation and modern design trends. It presents our users with a more sophisticated cutting-edge tool to maximize their productivity.

We have updated the React SDK documentation to show you how to use it with Class or Functional components. Additionally, it provides an example of how to create a custom button. This is one of the most valuable things you can do if you want to learn how to customize the Froala editor for enhanced functionality.

Angular Support

Froala Editor 4.1 now fully supports Angular, providing seamless integration with the framework. Developers can benefit from improved compatibility and create engaging content using Froala and Angular.

The editor now provides two Angular SDKs:

The updated Angular SDK documentation is more organized than ever before. It is now easier to explore different integration guides. It explains how to use the editor API and its options, events, and methods more clearly. Moreover, you will find an explanation of how to extend the editor’s functionality and more.

Vue Support

The Vue.js community can also breathe a sigh of relief! Froala embraces Vue.js 3, a progressive JavaScript framework. This makes it easier than ever to benefit from the rich text editor’s advanced features while simplifying the integration processes.

The editor now provides two Vue SDKs:

The Vue SDK documentation includes instructions on how to integrate the SDK, how to use the editor API, how to add a custom button, how to display the editor, and more.

How Supporting Modern Frameworks Gives Developers a Better User Experience

As part of Froala now supports the React, Angular, and Vue frameworks, the editor now provides

  • Typescript definition support
  • Display the Froala editor’s toolbar at the bottom on mobile devices
  • Improved accessibility
  • Enhanced pasting of content from 3rd party tools
  • Change default settings for Images Inside Iframe
  • Consistent API for image, video, and file uploading
  • Improved adding table rows functionality
  • And much more!

Typescript Definition Support

In addition to its compatibility with key JavaScript frameworks, Froala 4.1 takes a forward-looking leap in the right direction by incorporating support for Typescript definitions. This inclusion enhances certainty and reduces the possibility of errors during code compilation. Why does this matter? Typescript, a statically-typed superset of JavaScript, essentially aids developers in writing error-free code, verifying it at the development stage rather than during execution.

By integrating Typescript definitions, users can now benefit from auto suggestions offered by the software while coding. Auto suggestions prompt users in real-time with suitable code autocompletion as they type, creating a more seamless and agile development process. This great feature added to Froala 4.1 reduces Typescript integration complexity. By making sense of user needs, targeted coding becomes a smoother, more focused process, thereby minimizing the scope of errors.

For example, the API iframe option is defined as “Boolean” in Typescript definitions. If a developer, by mistake, configures it this way:
Iframe: "True"
This will highlight an error because “True” (inside double quotes) becomes a string, not a boolean. This will help users integrate the Froala editor using Typescript easily and avoid errors.

Display The Editor Toolbar At The Bottom On Mobile Devices

Forala lets you customize how the editor toolbar looks and where it is displayed. By default, the Froala Toolbar appears at the top. This can be changed and the toolbar displayed at the bottom by setting the toolbarBottom API option to true. This is suitable for chatting and messaging applications. This was only occurring on large screens.

new FroalaEditor('.selector', {

toolbarBottom: true

});

Starting with version 4.1, Froala also displays a toolbar at the bottom of mobile and small screens when this option is enabled. Open the Toolbar Bottom example on your mobile to play with it.

Froala bottom toolbar

Improved Accessibility

In the context of HTML content, accessibility refers to the design and creation of web content that is easily understandable and usable by disabled people. This ensures that everyone, including individuals with disabilities, can interact with the web content effectively.

The Froala WYSIWYG Editor is compliant with ARIA (Accessible Rich Internet Applications). The ARIA markup adds specific attributes to HTML elements, making them more accessible.

It’s important to make emoticons and special characters accessible by providing a description text in addition to their visual representation for screen readers.

To add ARIA markup for emoticons or special characters, use the aria-label attribute along with the role attribute (with a value “img”). The aria-label should contain a description of the emoticon or special character. Here is an example:

<span role="img" aria-label="Smiling face emoji">😀</span>

Screen readers will read the “aria-label” value, “Smiling face emoji”, making it accessible to users who rely on assistive technologies.

Inserting emoticons or special characters using Froala automatically adds an ARIA markup.

Froala is also Web Content Accessibility Guidelines (WCAG)-compliant, which includes implementing keyboard navigation to enable users with mobility impairments to interact with the website. By upgrading to Froala 4.1, you can navigate inside the emoticons and special characters popups using the arrow keys, the Tab and Enter keyboards.

Using the Froala editor, HTML content will be accessible to a broader range of users, promoting inclusivity.

It’s even possible to customize the emoticons you want to display to your users with Froala. Check the below example.

Enhanced Pasting of content from 3rd party tools 

Froala is known for its ability to paste content from 3rd party tools without losing the pasted format. Compared to other WYSIWYG html editors, Froala was superior. Due to the complex operations, Froala performed on the content through the pasting process, it hung if the content was extremely large. Froala 4.1 can process and load large pasted content without crashing or freezing.

Change Default Settings for Images Inside Iframe 

In the Froala editor’s normal mode, the editor content can be affected by the CSS code of the pages where the editor is loaded.  In certain cases, this could apply unwanted styles to the editor’s content. For example,

If you have the following CSS code on your page

h1{

color: red;

}

Then, after you add H1 heading inside your editor, it will be red. To avoid this, load the editor inside Iframe. In this case, the editor will not be affected by page style.

To enable Iframe mode, easily set the Iframe API option to true.

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

iframe: true

});

When Iframe mode was enabled, the uploaded images were

  • Aligned to left
  • Inserted at the top of the content
  • The user cannot use the Align button

Once you update your editor to version 4.1, the uploaded images inside the iframe mode will behave as in the normal mode and be

  • Center aligned
  • Inserted at the cursor position
  • The user will be able to change the image alignment using the Align button.

You are still able to change the default alignment by setting the imageDefaultAlign API option to ‘left’ or ‘right‘ as you like.

new FroalaEditor('.selector', {

imageDefaultAlign: 'left'

});

In the below example, the Froala editor is loaded inside iframe

Consistent API for image, video, and file uploading 

We believe that maintaining consistent coding functions is crucial for several reasons.

  1. Readability: When a code has a consistent style, it becomes easier for you and others to read and understand. Consistency enables developers to focus on the logic of the code rather than spending time discerning arbitrary differences in style or formatting.
  2. Maintainability: A consistent code allows developers to predictably make changes and updates, reducing the chance of introducing errors or creating conflicts with other parts of the code base. This predictability makes it easier for team members to navigate and work in different sections of the code.
  3. Collaboration: Consistency helps improve collaboration between developers. By following shared coding standards and conventions, developers can quickly understand each other’s work and reduce the risk of miscommunication or confusion when working on the same project.
  4. Onboarding: In large development teams or when onboarding new team members, a consistent coding style allows newcomers to understand the code, its structure, and patterns more quickly. This aids in increasing productivity and contributes to a smoother transition for new developers in the team.
  5. Quality: When a code is consistently written and organized, it explains the logical flow and simplifies the debugging and error identification. With a consistent style, finding potential flaws and issues becomes more efficient, helping to maintain the overall software quality.

Therefore, we rewrote the Video, File, and File Manager plugins API to flow with the image plugins API.

Improved adding table rows functionality

Froala makes the insertion and editing of tables easy. The edit table toolbar provides all the necessary functions. With a single click, you can add a table header or footer. You can also:

  • Add/remove a row
  • Add/remove a column
  • Remove table
  • Style table
  • Style table cell.
  • Merge cells vertically or horizontally
  • Split cells vertically or horizontally
  • Align cell content horizontally
  • Align cell content vertically

In the previous releases, when an additional table row is added, it creates a normal table row <td> regardless of the cell or row type, that is, header or normal.

Starting from the Froala 4.1 release, when you are on a table header cell <th> and insert an additional row or column, it will add another header row or column. Otherwise, a normal row or column is added.

As a side note, you can customize the editing table popup using the tableEditButtons API option.

new FroalaEditor('.selector', {

tableEditButtons: ['tableRows', 'tableColumns', 'tableCells', 'tableCellVerticalAlign', 'tableRemove']

});

Many bug fixes

Issues like:

  • Markdown UI breaks when enabling the iframe option
  • Hovering over the toolbar buttons generates a lot of errors in the console

are no longer happening

Core Editor Improvements

As a company that innovates web editing, we are constantly improving our core editor’s functionality. As part of this release, many improvements were made to the core editor. Check the changelog for the complete list of improvements and fixes.

 

How this release benefits key Enterprise account customers

While Froala is a powerful tool for all customers, it’s our Enterprise customers who get to enjoy the exclusive benefit of incorporating the editor within their SaaS offerings.

The beauty of the Froala editor lies not just in its core capabilities, but in its robust compatibility with leading-edge modern frameworks like React, Angular, and Vue. This means you can rebuild your apps with these frameworks, confident that you won’t face a barrage of integration errors.

Consider the impact this seamless user experience could have. By integrating the editor, you’re offering an upgraded interface to your customers, one that could broaden your customer base and escalate your sales.

So, why not let the enhanced functionality of Froala’s editor play a pivotal role in your success story? Boost your SaaS product, improve your profits, and let the journey of your customer be as smooth and appealing as it can possibly be!

 

In Conclusion: Embrace the Future with Froala Editor

Froala’s latest release enables a seamless editing experience with the latest React, Angular, and Vue frameworks. It delivers an unmatched content creation experience, backed by an impressive feature list and powerful compatibility with modern frameworks, such as React, Angular, and Vue. With effortless integration and customization capabilities, Froala Editor is quickly becoming the go-to choice for developers and content creators alike. Give it a try today and elevate your projects to new heights!

Why Froala?

Froala Editor v4.1 is a WYSIWYG-rich text editor compatible with modern frameworks and provides a powerful feature set, powerful API, detailed documentation, easy customization, and easy theming. Froala Editor features include Font Awesome icon support, document mode and PDF export, responsive videos, advanced Image Manager, advanced list item types, and enhanced text formatting with inline classes & line height

Froala is rated as one of the top WYSIWYG text editors on the market. This is due to its ease of use, setup, and clean design.

How Can I Update?

Downloading and updating the Froala Editor is extremely straightforward. We have a dedicated page for each Framework SDK that explains in detail how to install or update your SDK to the latest version. Follow the links below to get started.

If you are using a plain JavaScript library or other framework, check the get started page to know the proper way of downloading the latest Froala Editor release and how to include it in your project based on your preferred method.

If you are using a plain JavaScript library or other framework, follow the table below to know the proper way of downloading the latest Froala Editor release and how to include it in your project based on your preferred method.

Method How to download Include in your project
CDN – 
<!-- Include Editor stylesheet-->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />

<!-- Include Editor JavaScript file-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/js/froala_editor.pkgd.min.js"></script>
CDN (Always the latest version) – 
<!-- Include Editor stylesheet-->
<link href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />

<!-- Include Editor JavaScript file-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js"></script>
NPM 
npm install froala-editor
 
<!--

Replace the {download-folder-path} in the following example with the path to the folder containing the stylesheet file e.g.

../css/froala_editor.pkgd.min.js

-->

<link href="{download-folder-path}/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />

<!--

Replace the {download-folder-path} with the path to the folder containing the JS file e.g.

../js/froala_editor.pkgd.min.js

-->

<script type="text/javascript" src="{download-folder-path}/froala_editor.pkgd.min.js"></script>
bower 
bower install froala-wysiwyg-editor
NO Package Manager Download Froala WYSIWYG Editor files using the download form here.
Integrated with a Framework Select your preferred framework from 17 different popular frameworks.
Other options Check here for other options to use Froala WYSIWYG Editor in your project.

For Froala Editor Version 2 Users:

Follow this migration guide to get step-by-step instructions on how to upgrade from version 2.

Try The Latest Froala Editor

Explore a variety of examples that demonstrate the functionality of the Froala HTML Editor.

Change Log

Get Started

  • You can download and start using Froala in less than five minutes following our get started guide.

Support and Feedback

  • We would like to hear what you think of the latest release! Join us on our GitHub Community to chat with our product manager, developers, and other members of the Froala team.

Technical Questions

Download Froala Editor

 

 

Enhance Your React Forms With a Rich Text Editor

react rich text editor
React, a popular JavaScript library for building user interfaces, offers a seamless development experience.  The 2023 StackOverFlow survey with 60,000 developers highlights that React remains one of the most popular frameworks and web technologies used by professionals. However, when it comes to forms, React’s native input components cannot handle rich text formatting.  In content creation, blog posts, or email composition scenarios, users need formatting options like bold, italic, bullet points, and hyperlinks. 

Improving the experience

Integrating a rich text editor is essential to overcome this limitation and provide a robust form experience.  By incorporating a rich text editor, developers can empower users to express themselves more effectively and enhance their experience. This article will explore how to enhance React forms using Froala Editor, a customizable rich text editor solution. 

Creating a Project

If you haven’t already, set up a new React project by running a Create App React:
npx create-react-app my-app
Before installing the Froala package, enter the newly created app directory with the command.
cd my-app
Install the Froala Editor package in your React project.  This package provides components and stylesheets required for integrating Froala Editor seamlessly into the application. You can do this by running the following command in your project directory. 
npm install react-froala-wysiwyg 

Starting the code

Import Froala Editor: In the component where you want to use the rich text editor, import the elements from the Froala Editor package.
import ‘froala-editor/css/froala_editor.pkgd.min.css’; import ‘froala-editor/css/froala_style.min.css’; import FroalaEditor from ‘react-froala-wysiwyg’; import React from ‘react’;
Implement the Editor: In your component’s render method, add the FroalaEditor component, passing the necessary props. 
  class ReactForm extends React.Component {     constructor(props) {       super(props);       this.state = {         editorContent: ”,       };     }
The code is defining a class called ReactForm which extends React.Component class. This indicates that ReactForm is a component in a React application. The constructor method is used to initialize the state of the component. In React, a state is an object that holds the data that can change over time and affect the component’s rendering. The constructor takes in a props parameter, representing the properties passed to the component. Inside the constructor, the super(props) statement is called, which is necessary when defining a constructor in a subclass of React.Component. It calls the constructor of the parent class (React.Component), passing in the props parameter. This ensures that the component is initialized correctly according to the React.Component implementation. The state property of the component is set using this.state = { editorContent: ” }. Here, editorContent is the key in the state object, and its initial value is an empty string (”). The state object is used to store and manage the data specific to the component.
    handleEditorChange = (content) => {       this.setState({ editorContent: content });     }
This code defines an arrow function called handleEditorChange within the class ReactForm. This function takes a parameter called content. The function is used as an event handler for updating the state of the component. In particular, it is designed to handle changes in an editor, where the content parameter represents the updated content of the editor. Inside the function body, this.setState({ editorContent: content }) is called. setState is a method provided by the React.Component class that allows you to update the state of a component. In this case, setState is called with an object { editorContent: content }. This object specifies the new state values to be updated. Using setState, React knows that the state has changed, and it triggers a re-render of the component, causing any parts of the UI that depend on the state to update accordingly.
    render() { return ( <div> <h2>React Form</h2> <FroalaEditor tag=’textarea’ onModelChange={this.handleEditorChange} config={{ toolbarButtons: [‘bold’, ‘italic’, ‘underline’], }} /> </div> ); } } export default ReactForm;
The code shows the render method of the ReactForm component. In React, the render method is responsible for generating the JSX (JavaScript XML) that represents the component’s UI. Inside the render method, there is a return statement that wraps the JSX within parentheses. The returned JSX represents the structure and content of the component’s UI. In this case, the returned JSX consists of a <div> element as the root container. Within the <div>, there is an <h2> element with the text “React Form” as the heading. Below the <h2> element, there is a FroalaEditor component. It is assumed that the FroalaEditor component is imported from an external library or component module. The FroalaEditor component represents an editor component for handling text input. The FroalaEditor component has several props passed to it: tag=’textarea’: This prop sets the underlying HTML tag of the editor component to be a <textarea>. It indicates that the editor should behave as a textarea input field. onModelChange={this.handleEditorChange}: This prop sets the event handler function handleEditorChange to be called whenever the content of the editor changes. It means that whenever the user makes changes to the editor’s content, the handleEditorChange function will be invoked. config: This prop is an object that contains configuration options for the editor component. In this case, the toolbarButtons option is set to an array [‘bold’, ‘italic’, ‘underline’]. This configures the toolbar buttons of the editor to only display the buttons for bold, italic, and underline formatting options. Overall, the render method generates the JSX that represents the UI of the ReactForm component. It includes a heading, a FroalaEditor component for text input, and sets the event handler and configuration options for the editor. The complete component will be this:
import ‘froala-editor/css/froala_editor.pkgd.min.css’; import ‘froala-editor/css/froala_style.min.css’; import FroalaEditor from ‘react-froala-wysiwyg’; import React from ‘react’; class ReactForm extends React.Component {     constructor(props) {       super(props);       this.state = {         editorContent: ”,       };     }        handleEditorChange = (content) => {       this.setState({ editorContent: content });     }        render() {       return (         <div>           <h2>React Form</h2>           <FroalaEditor             tag=‘textarea’             onModelChange={this.handleEditorChange}             config={{               toolbarButtons: [‘bold’, ‘italic’, ‘underline’],             }}           />         </div>       );     }   }   export default ReactForm;
In this example, we limit the toolbar buttons to include bold, italic, and underlined options. You can explore the Froala Editor documentation to discover the available toolbar buttons and their corresponding names. That’s it! You now have a rich text editor integrated into your React form using Froala. 

Formatting options

Users can input and format text content with formatting options provided by the editor. Integrating a rich text editor into React forms empowers developers to offer users a powerful and intuitive content creation experience.  By providing a range of formatting features, Froala Editor enhances the functionality of React forms, enabling users to create visually appealing and well-structured content effortlessly.  Integrating a rich text editor into React forms is a game-changer for capturing and manipulating rich text content.  React forms become more versatile and user-friendly, allowing users to format text, insert media, and customize their content.  Froala Editor provides a solution for seamlessly integrating a feature-rich text editor into React applications.  Its extensive customization options and plugin support allow developers to create highly tailored and engaging editing experiences. Download Froala Editor

Froala & StackOverflow 2023 Insights: Guiding Devs’ Path

froala stackoverflow featured image

The Stack Overflow Developer Survey has always been a good way to find out about trends, tastes, and how the technology industry is changing. The results of a recent survey are interesting because they show how the world developer community works. How they fit with Froala shows why it is the best WYSIWYG (What You See Is What You Get) editor on the market right now.

Dominance of JavaScript

JavaScript continues to be the most popular language for the 11th year in a row. This trend shows how flexible and widely used JavaScript is in different types of application development, such as front-end, back-end, and even mobile app development.

Froala fits right in with this style because its implementation is in JavaScript. Our WYSIWYG editor uses JavaScript’s strong features to create an easy-to-use and efficient user interface. This makes sure that the development process goes smoothly. This is especially helpful for developers who want to make web apps that are interactive and easy to use.

Python: Surpassing SQL

Python has surpassed SQL in popularity and is currently the third most popular language. It’s because it is simple to learn and can be applied in a variety of circumstances. The language’s versatility allows it to be utilized in various areas, including data analysis, machine learning, and web development.

Froala seamlessly integrates with Python, which is a popular programming language. Explore endless possibilities by combining Python’s power with Froala’s WYSIWYG editing features for developers. This makes it easier for them to make innovative and dynamic web applications.

Cloud Platform Trends: AWS and Azure

Even though cloud platforms are changing the way we build and launch apps, AWS is still in charge. But Microsoft’s Azure is quickly making a name for itself. The fact that these platforms are so popular shows how the industry is moving more and more toward cloud-native apps.

Froala is a flexible editor that works just as well with both AWS and Azure. In fact, here’s a tutorial on how to upload your images to an s3 bucket via Froala with Node.js

Leading Web Technologies: Node.js and React.js

The poll also shows that Node.js and React.js are still the most popular web technologies, which shows how important they are to web development today. Developers have popularized Node.js as a choice for back-end development, and React.js, with its virtual DOM, offers a good way to quickly build user interfaces that can be changed.

Froala gives great support for both Node.js and React.js, which is in line with these trends. Because our editor works well with these technologies, you can use their best features when making web apps with Froala. This connectivity improves the development process and makes it easier to make web apps that are reliable, fast, and scalable.

Froala: The Ideal WYSIWYG Editor for Today’s Developer

The results of the Stack Overflow poll give an idea of what developers like and what is going on in the industry right now. Froala’s dedication to popular languages, frameworks, and tools empowers developers to navigate this landscape effectively.

As an easy-to-use and powerful WYSIWYG editor, Froala simplifies and speeds up the creation process. Our choice of popular languages, technologies, and cloud platforms delivers a reliable, flexible, and innovative tool for workers.

Don’t just believe what we say. Experience the power of Froala: boost your development, align with industry trends, and simplify your developer life.