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!

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.

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 new SDK angular-froala-wyswiyg (froala:RC-v4.1 sdk) supports Angular 15+ with Ivy Engine (Angular’s next-generation compilation and rendering pipeline) enabled.
  While using this SDK, you should set the enableIvy option to true inside the angularCompilerOptions
• The older SDK version supports Angular versions (9) to (15), except for those using the Ivy engine.

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.

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.

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.

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

});

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

Only Froala Enterprise customers can use the editor in a SaaS product and the only customers that are allowed to re-distribute the editor. Improving the core editor and supporting the popular modern frameworks React, Angular, and Vue will help them to provide a better user experience to their customers that interface with the editor. They could rebuild their apps using React, Angular, or Vue without having integration errors. As a result, this release could help them to increase their customer base, sales, and profits.

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, Track Changes, 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.

• React: (https://froala.com/wysiwyg-editor/docs/framework-plugins/react/)
• Vue.js: (https://froala.com/wysiwyg-editor/docs/framework-plugins/vue/)
• Angular: (https://froala.com/wysiwyg-editor/docs/framework-plugins/angular/)

If you are using a plain JavaScript library or other framework, you might want to look at our Get Started page.

Try The Latest Froala Editor

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

Change Log

• Please visit the release notes for a complete list of changes.

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

• If you have a technical question, you can check whether we have already answered it in our help center. If not, contact our Support team.