Introduction to the Froala Editor Integration

Do you find the Froala editor the perfect rich text editor for your project, but require robust table sorting capabilities? No problem! The Froala editor is a highly extensible WYSIWYG HTML editor, making it remarkably easy for developers to add the specific table sorting functionality you need using a suitable plugin.

Many developers rely on the Froala editor for its powerful features and ease of use when constructing HTML pages. This editor simplifies the content creation experience.

This article demonstrate how straightforward it is to integrate a table sorting feature into the Froala editor. We’ll achieve this by leveraging the popular DataTables JavaScript library, acting as a powerful plugin. This example showcases how the flexibility of the Froala editor allows developers to enhance this excellent editor with the exact tools their project requires – even if a specific capability isn’t in the core editor.

This example should provide a clear path for many developers looking to add advanced table controls. We will provide essential code examples below, showing how developers can implement this feature. The editor becomes much more powerful with this plugin.

You’ll see how the Froala editor empowers users and developers to create sophisticated editable content. This specific example focuses on table manipulation within the editor, using external library code. The goal is to improve how users interact with table data within the editor.

Key Takeaways

• Implementing Froala table sorting significantly improves data usability and the overall user experience for manipulating table data within the Froala editor.
• Integrating the DataTables plugin enhances the core functionality of Froala editor tables, adding sorting to each column. This plugin is a great example for developers. Using this plugin requires including specific code.
• Performance optimization is essential when the editor needs to handle tables with numerous rows and large data sets; developers must consider this when adding custom code.

The Power of Froala Tables in a WYSIWYG Editor

The Froala WYSIWYG editor already includes robust table editing functionality out of the box. People using the editor can easily create, modify, and format tables directly within the rich text editor.

Native capabilities like multi-cell selection, cell merging, and custom style options (even controlling border collapse or font family) make Froala tables a cut above many other editor solutions.

But the native table features in the Froala editor can be further enhanced by integrating with the powerful DataTables library integration. DataTables provides advanced sorting, filtering, paging (rows per page), and other table management capabilities that complement Froala’s built-in table edit tools within the editor.

This plugin adds significant ability through its JavaScript code. This plugin is a popular choice for developers working with tables in web applications and the Froala editor. The editor becomes a more complete tool for data presentation.

Importance of Table Sorting within the Rich Text Editor

Okay, so you’ve used the editor to create a table. Great! But what if users need to find specific data within its rows? That’s where sorting comes in. Table sorting is important because it lets users quickly organize data in a way that makes sense within the editor.

Imagine a table with a list of customers. Without sorting, users would have to manually scan all the rows to find someone. But with sorting enabled by the plugin, users can instantly arrange the table by name, order date, or whatever column they need. This saves a ton of time and makes your table data way more useful for anyone using the editor.

It’s not just about finding stuff faster, though. Sorting tables can also help users highlight trends and patterns in their data that they might otherwise miss inside the editor. For example, sorting a sales table by revenue could quickly highlight your top-performing products. The editor makes managing this table data easier for users.

Here are some reasons why sorting within the editor is important for developers and end-users:

• Faster data retrieval from tables for users.
• Improved data analysis within the editor by users.
• Enhanced user experience for those interacting with the editable content in the Froala editor. This example clearly shows the benefit of adding this plugin code. The editor feels more interactive.

Froala Table Sorting – How it works

There are several ways developers can add table sorting support to the Froala editor using any JavaScript HTML table enhancing library or plugin. In this guide and code example, we’ll use the popular DataTables library.

DataTables provides advanced sorting, filtering, and pagination features that complement the Froala editor’s built-in table edit tools. We select this plugin due to its extensive features, good documentation for developers, and ease of integration with the editor via simple code additions.

This JavaScript library is a common choice for enhancing HTML tables. Its code is widely used by developers. It interacts directly with the table elements within the editor.

The approach or method we’ll take has the following key steps:

1. Add a new custom button to the Froala editor table edit popup (menu) that initializes the DataTables plugin on the selected table. The necessary code is shown below.
2. This will enhance the table, adding sorting buttons (visual signs) to each column header cell.
3. Users can then click these buttons to sort the table data in ascending or descending order. The underlying code handles the table row manipulation directly in the editor.
4. This tutorial serves as a good starting point example for integrating the Froala editor with the DataTables library plugin. However, developers may need to optimize the provided code further to handle certain scenarios, such as when a user adds new rows and columns to the table after initializing the DataTables on it. In this case, developers may need to re-initialization the DataTables on the modified table.

Adding the Froala Table Sorting Feature: A Code Example

Adding this table sorting capability via the DataTables plugin to your Froala editor setup is a straightforward process. Here are the key steps involved in this setup:

Step 1: Include the Required Libraries (CSS & JS Code)

To get started with this editor enhancement, developers must include the following CDN links in their web page:

• Froala WYSIWYG Editor Stylesheet and JavaScript CDN links
• DataTables JavaScript library (which requires jQuery)
• Font Awesome stylesheet for custom button icons

<!-- Font Awesome library for icons -->
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.5.0/css/all.min.css' rel='stylesheet' type='text/css' />

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

<!-- DataTables stylesheet -->
<link href='https://cdn.datatables.net/2.2.2/css/dataTables.dataTables.min.css' rel='stylesheet' type='text/css' />

<!-- jQuery script -->
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js'></script>
<!-- DataTables script -->
<script type='text/javascript' src='https://cdn.datatables.net/2.2.2/js/dataTables.min.js'></script>
<!-- Froala script -->
<script type='text/javascript' src='https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js'></script>

Step 2: Create a New Custom Button For Froala

Let’s create a custom button within the Froala editor system to enable the sorting function on the selected table.

We will use the “filter” Font Awesome icon (font) to represent our button in the editor toolbar. Add this JavaScript code before initializing the Froala editor.

// Use Font Awesome icons
FroalaEditor.ICON_DEFAULT_TEMPLATE = "font_awesome_5" 

//Define icon for "advancedTable" buttton
FroalaEditor.DefineIcon("advancedTable", { NAME: "filter" })

This code tells the editor how to display the button icon using the specified font.

2.2 Define the Button Function (Command Code)

Now, let’s register one of the Froala editor commands that executes our table sorting logic using the DataTables plugin. This code defines the button’s action. Place this code before the editor initialization.

The following code block shows the command registration.

FroalaEditor.RegisterCommand("advancedTable", {   
   title: "Advanced Table",   undo: true,
   callback: function callback(cmd) {
     let table = this.$el.find(".fr-selected-cell").closest("table");
     if (table[0] && table[0].getElementsByTagName("thead").length > 0) {
       let advTable = new DataTable(table, {
         searching: false,
         paging: false,
       });
     } else {
       alert("You should add a table header first.");
     }
   },
 });

In the above JavaScript code:

• We registered a new Froala editor button command with the name “advancedTable”.
• The button will be represented by the font icon we defined in the previous step using separate code. It will appear on the table edit menu.
• It has a title attribute shown as a tooltip in the editor.
• The callback function contains the core logic. This function code runs when the button is clicked by a user in the editor.
• It finds the parent table HTML element from the currently selected table cell within the editor. This part of the code uses jQuery selectors provided by the Froala editor.
• Crucially, it checks if the selected table has a header row (<thead> tag). This is a requirement for the DataTables plugin code to identify columns for sorting.
• If a header row exists, it initializes the DataTables plugin (new DataTable(…)) on the HTML table DOM element. Note the options object uses false for searching and paging in this specific code example. This code line activates the plugin. The boolean value false turns those features off.
• If no header row is found, it displays an alert message. This ensures the DataTables plugin functionality works as expected.
• This code provides the essential mechanism for developers to trigger the plugin. It’s the core integration code.

Step 3: Initialize the Froala Editor

Finally, developers need to setup the Froala Editor instance on their page. This usually involves targeting a textarea HTML element or a div. Add the new “advancedTable” button to the tableEditButtons array in the editor configuration options.

This code integrates our custom button into the editor’s table edit menu. The following code block shows the editor initialization. This code makes the editor appear on the page.

new FroalaEditor("#editor", {
  tableEditButtons: [
    "tableHeader",
    "tableRemove",
    "|",
    "tableRows",
    "tableColumns",
    "tableStyle",
    "-",
    "tableCells",
    "tableCellBackground",
    "tableCellVerticalAlign",
    "tableCellHorizontalAlign",
    "tableCellStyle",
    "|",
    "advancedTable",
  ],
})

This final block of code:

• Creates the Froala editor instance, targeting an HTML element (e.g., <textarea id="editor"></textarea> or <div id="editor"></div>). This HTML element becomes the editor element where users edit content.
• Crucially, advancedTable is added to the tableEditButtons array. This makes our custom button appear in the table edit menu within the editor.
• Developers can add many other options to this initialization code to customize the editor (e.g., license key, height, available font size, font family options like sans serif, event handlers, other plugins). This example code shows only the essential part for adding the button. The Froala documentation lists all available code options.
• This editor setup code should run after the page’s HTML body is loaded and the previous JavaScript code (icon and command definition) has executed. Ensure all prerequisite code is loaded.

Testing the Froala Table Sorting Feature

Once the Froala editor is set up with the new “Advanced Table” button using the provided code, users and developers can test it:

1. Insert a new table into the editor’s editable content area using the toolbar.
2. Add content to the table rows and columns. Make sure to add a header row using the editor’s table menu. Each table cell should contain appropriate data. The table needs a <thead> for the plugin code to work.
3. Click inside any table cell of the table you want to sort within the editor.
4. The table edit toolbar / popup menu should appear. Find and click the “Advanced Table” button (the one with the filter font icon).
5. The DataTables plugin code will execute, enhancing the table. Users should see sorting icons (a visual sign) appear in each column header cell. These icons are often added via CSS defined in the plugin’s stylesheet code.
6. Click these column headers to sort the table data within that column in ascending or descending order. The rows will rearrange directly within the editor, handled by the plugin’s code.

This integration allows Froala editor users to leverage the advanced table management features of the DataTables plugin while still maintaining the rich edit capabilities of the Froala WYSIWYG HTML editor. This enhances the content creation experience. Try pasting data into the table as well. Users can edit table cell content freely after sorting. The editor remains fully functional.

Advanced Configurations for Froala Table Sorting

While the default DataTables plugin integration (using the minimal code shown) provides a great baseline table sorting functionality, developers may want to further customize the experience. DataTables offers a wide range of configuration options in its code API.

Developers can modify the initialization code (example: the options object { searching: false, paging: false } passed to new DataTable(…) in the command’s code) to:

• Implement pagination by setting paging to true instead of false and control the number of rows displayed per page. The plugin code handles this display logic.
• Customize the applied CSS classes for different table states. Apply custom border styles or width controls using your own CSS code. The plugin adds specific CSS classes that developers can target.
• Define custom sorting functions (function code) for specific data types (e.g., dates, currency) if the default plugin sorting isn’t sufficient. This involves writing more JavaScript code for the plugin.
• Change the sorting mode (e.g., multi-column sorting). Requires different options in the initialization code.
• Control the position of elements like the search box or pagination controls relative to the table using CSS code.

Leveraging these configurability options in the code requires more effort from developers but allows tailoring the table sorting experience within the Froala editor to perfectly fit the needs of your project and the people using the editor. Consult the DataTables plugin documentation for full details and more code examples. Many developers find the plugin very flexible. You can find many code examples online for this plugin.

Handling Dynamic Table Changes (Developer Considerations for Table Columns and Cells)

One potential challenge for developers when integrating the Froala editor and the DataTables plugin using the provided code is handling scenarios where the user adds, removes, or modifies table rows, table columns, or table cell content after the DataTables plugin initialization code has run. The sorting state might become inconsistent with the actual table data in the editor.

To address this, developers must implement more sophisticated code:

1. Store References: Keep track of the DataTables instances initialized on each table within the editor. Developers could use JavaScript code to manage this, perhaps using a Map keyed by table IDs.
2. Listen to Froala Events: Use the Froala editor’s event system (like contentChanged, table.inserted, commands.after, etc.) by adding event handlers in the editor initialization code. These editor events signal changes to the HTML. Developers need to write listener code.
3. Update or Re-initialize DataTables: When relevant editor events fire for a specific table, get the corresponding DataTables instance using your tracking code. Developers might need to write code to:

• Destroy the existing DataTables instance (table.destroy()) and re-initialize the plugin on the modified HTML table structure using the original initialization code. This is often the simplest method for developers to ensure the plugin sees all HTML changes, including new rows or changes affecting border or width. This requires careful execution of code.

Developers must test these scenarios thoroughly in different browser environments. Look for code examples online or in documentation for handling these dynamic updates in the editor.

Frequently Asked Questions about the WYSIWYG HTML Editor and Plugin

What is Froala WYSIWYG HTML Editor?

Froala is a powerful, front-end WYSIWYG HTML editor (a type of rich text editor) that allows people (users) to easily create and edit HTML content directly in a web page, often replacing a standard textarea. It’s known for its clean interface and extensive API (code methods and events) for developers. It provides a great content creation experience. The editor renders HTML tags visually.

Why use DataTables with the Froala Rich Text Editor?

Using the DataTables plugin with the Froala editor adds powerful features for managing HTML tables, like sorting by column, filtering data, and pagination across multiple rows. This makes it much easier for people using the editor to work with large amounts of table data. It enhances the core editor functionality via external code. This plugin makes the editor more suitable for data-heavy content.

How do I integrate DataTables into my Froala editor setup?

Developers can integrate the DataTables plugin by including the necessary DataTables CSS and JavaScript library code (https links) in their project’s HTML page (often in the <head> or before the </body> tag).

Then, write JavaScript code (like the example in this article) to initialize the plugin on specific HTML table elements within the Froala editor’s editable content area, usually triggered by a custom button defined with editor API code.

Does Froala integrate with DataTables in Inline Editor mode?

Yes, the Froala-DataTables integration can also be used in Froala’s Inline Editor mode. The inline editor mode is used when the user wants to minimize the disruptions and maintaining the page layout during the editing process.

Does Froala support multiple table cell editing?

Yes, Froala does support multiple cell table editing. Users can select multiple cells and apply formatting, styles, or other operations across the selected range. This enables powerful table management capabilities within the Froala WYSIWYG editor. By leveraging DataTables sorting alongside Froala’s multi-cell editing, users can efficiently organize and structure tabular data to meet their specific requirements. The combination of these features provides a robust and flexible table editing experience within the Froala editor.

Does Froala support image uploads within tables?

Yes, Froala allows users to insert images directly within table cells, providing a seamless way to incorporate visual elements alongside tabular data. This flexibility enables content creators to build rich and visually engaging tables that blend text, numbers, and imagery. The integration of image uploads within Froala’s table editing capabilities empowers users to create more dynamic and informative tabular content, enhancing the overall presentation and effectiveness of the information being conveyed.

How to modify table cell font family and size?

To modify the font family and size of table cells in the Froala WYSIWYG editor, you can use the editor toolbar. Moreover, you can set a specific font family and size in a CSS class and apply that class to the desired cell using the “tableCellStyles” button.

Conclusion

Integrating the Froala editor with the DataTables JavaScript library plugin is an excellent method for developers to provide a comprehensive table management experience for users. Froala’s built-in table edit capabilities, combined with the advanced sorting provided by the DataTables plugin, create a powerful solution for content-rich web applications needing sophisticated table interactions within a rich text editor. The ability to sort rows by column is crucial for data analysis within the editor.

By following the simple steps and the code examples outlined in this article, and further customizing the integration code and CSS style to meet your specific needs, developers can quickly add this valuable feature to their projects using the Froala editor. This empowers people using the editor with a best-in-class table editing and data exploration experience, improving the overall content creation experience.

As a Delphi developer, you know the importance of building modern, responsive web applications with a great user experience. The TMS WEB Core framework is a powerful tool for creating such apps, but what if you need a robust WYSIWYG (What-You-See-Is-What-You-Get) editor for your content management features?

No worries, the TMS WEB Core framework has a WEB Component for integrating Froala, a powerful WYSIWYG Editor, allowing Delphi web applications to seamlessly incorporate rich text editing capabilities and enhance user experience.

In this step-by-step guide, we’ll walk you through the simple process of integrating the Froala editor into your TMS WEB Core Delphi applications. By leveraging the power of Froala and the flexibility of TMS WEB Core, you can deliver a high-quality content management solution within your Delphi web projects.

Why Use the TMS WEB Core Framework?

The TMS WEB Core framework is the foundation of an exciting new and modern way for creating web client applications from Delphi using a component-based framework. Some key benefits of using TMS WEB Core include:

• Cross-platform compatibility: TMS WEB Core allows you to create web applications that can run on a variety of platforms, including Windows, macOS, and Linux.
• Rapid development: The framework provides a wealth of pre-built components and tools, enabling you to quickly build and deploy feature-rich web applications.
• Seamless integration: TMS WEB Core integrates seamlessly with other Delphi technologies, such as the Froala WYSIWYG Editor, allowing you to create a cohesive and efficient development ecosystem.
• Modern web standards: The framework is built on the latest web technologies, ensuring your applications are up-to-date and provide an optimal user experience.
• The TMS WEB Core web client application is open to work with different server technologies. This includes but is not limited to Embarcadero RAD Server, Node.js, ASP.NET Core microservices.

Why Integrate Froala Editor with TMS WEB Core?

The Froala WYSIWYG HTML Editor is a lightweight WYSIWYG HTML editor. However, it is a feature-rich, customizable editor that allows users to easily format text, insert images, and more, all without needing to write HTML code.

Some key benefits of this integration include:

• Intuitive WYSIWYG editing experience for your users
• Extensive customization options to match your app’s branding and design
• Robust feature set including table manipulation, responsive video embedding, and more
• Seamless integration with the TMS WEB Core framework for a cohesive user experience

Froala TMS Web Core Integration Guide

The TMS WEB Core offers the TMSwebFroalaEditor WEB Component that simplifies the Froala Editor integration with TMS WEB Core framework. The integration process is straightforward, allowing you to quickly set up the Froala editor, saving a lot of development time and effort.

Integrate the Froala WYSIWYG Editor into your TMS WEB Core Delphi application using the TMSwebFroalaEditor component by following these steps:

Step 1: Install the RAD Studio IDE

As a Delphi developer, you may already be using RAD Studio. If not, we recommend installing it. RAD Studio is an advanced IDE for rapidly and visually building high-performance platform-native apps for Windows, Linux, iOS, macOS and Android from a single codebase.

Step 2: Install the TMS WEB Core Framework

The TMS WEB Core is a framework for creating modern web applications in Delphi. You can download and install the latest version of the framework from the official TMS Software website. Download the version compatible with your RAD Studio. The integration requires TMS WEB Core version 1.2.3.0 or newer.

Step 3: Install the TMSwebFroalaEditor Component

1. 1. Download and install the TMSwebFroalaEditor component from the TMS Software website.

2. Extract the downloaded ZIP file: it contains the following folders:
   • The “Component Library Source” folder,
   • The “Core Source” folder.
   • The “Demo” folder.
3. Add the Library path: Add the “Core Source” folder path to the TMS WEB library path (RAD Studio: Tools > Options > TMS WEB > Library Path). Restart RAD Studio afterwards to ensure changes are applied.
4. Install the package file “TMSWEBFroalaEditor”:
   1. Open the "Component Library Source/TMSWEBFroalaEditor.dpk" package file in the Rad Studio.
   2. This package requires the TMSWEBCorePkgLibDXE11.dcp library. Update this line if you are using a different TMS WEB Core version.
   3. Compile the package: Right-clicking on the package in the Project Manager and selecting “Compile”.
   4. Install the package: Right-clicking on the package in the Project Manager and selecting “Install”. Now you are ready to use the component in your project.

Step 4: Play with the Demo

The demo illustrates displaying the Froala Editor within your TMS WEB Core Delphi application. To run it, you need to do the following steps:

1. 1. Open the Demo Project: Locate the "Demo/FroalaEditor.dpk" package file in the downloaded ZIP folder and open it in your RAD Studio IDE.
   2. Include Froala Editor: Open “Index.html“ file. Note, the code assumes you will download the Froala Editor files and host them on your server. However, you can replace the local Froala stylesheet and JavaScript links with CDN links so we don’t need to download it. 

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

       

1. 3. Understand the Demo Structure: The demo project likely consists of several files, including:
      • FroalaEditor.dpr: The main project file.
      • FroalaEditorForm.pas: The main form file, which contains the Froala Editor component and other UI elements.
   4. Run the Demo: To run the demo application, simply click the “Run” button in your RAD Studio IDE. This will compile and launch the demo, allowing you to interact with the Froala Editor integrated into the TMS WEB Core application.
   5. Inspect the Code: Once the demo is running, you can inspect the code to understand how the TMSWEBFroalaEditor component is being used. This can provide valuable insights and help you integrate the Froala Editor into your own TMS WEB Core projects.

Understanding the Source Code

By exploring the demo, you’ll get a better understanding of how to use the TMSWEBFroalaEditor component and integrate the Froala Editor into your own TMS WEB Core Delphi applications. The demo serves as a helpful starting point and reference for your own implementation.

For instance, to setup your own Froala Editor, do the following

• Declare an external function so we can use Object Pascal to create the Editor Object.
• Create an object that links the Froala Editor events with the WEB Core event handlers.
• Initialize the Froala Editor

var  
  FEvents: TJSObject;  
  FFroalaEditor: TJSObject;  
  function froalaEditor(s: string; jsObject: TJSObject): TJSObject; overload; external name 'new FroalaEditor';  
  
begin  
    FEvents := new([  
     'contentChanged', @HandleChanged,  
     'initialized', @HandleLoaded,  
     'focus', @HandleStartEdit,  
     'blur', @HandleEndEdit  
     ]);  
  
    FFroalaEditor := froalaEditor('div#' + ElementID,   new([  
      'toolbarInline', false,  
      'events', FEvents  
      ]));  
end;

Froala WYSIWYG HTML Editor Modes

Note the demo offers two ways to use the Froala Editor:

Classic: This is the default behavior.

Inline: Show the Editor toolbar upon content selection.

Connect any TWebLabel to the TWebFroalaEditor component to instantly make it editable in the browser.

WebLabel1.EventStopPropagation := [];  
WebFroalaEditor1.Visible := False;  
WebFroalaEditor1.InlineEditing := True;  
WebFroalaEditor1.Editor := WebLabel1;

By now, you have learned how to easily add a powerful, customizable WYSIWYG editing experience to your TMS WEB Core Delphi applications, providing your users with an intuitive and efficient way to manage content.

Live Demo

A live demo of the Froala editor integration is available at https://download.tmssoftware.com/tmsweb/demos/froalaeditor/. Explore the editor’s rich text editing capabilities and view the corresponding HTML code and triggered web core event handlers below the editor.

Conclusion

In this guide, we’ve walked through the seamless process of integrating the Froala Editor into your TMS WEB Core Delphi applications. By leveraging the powerful TMSwebFroalaEditor component, you can quickly add rich text editing capabilities to your web applications.

Integrating Froala WYSIWYG HTML Editor with TMS WEB Core allows Delphi developers to create modern, responsive web apps with an intuitive WYSIWYG interface for managing content. With features like inline editing, table manipulation, and responsive video embedding, the Froala Editor provides a top-notch user experience that will delight your end-users.

With the steps outlined in this guide, you now have the knowledge and tools to integrate the Froala Editor into your own TMS WEB Core Delphi projects. By incorporating this powerful integration, you can deliver exceptional content management capabilities and take your Delphi web applications to new heights.

Get started today and elevate your Delphi web development with the TMS WEB Core Froala Editor integration! 

As a developer, you may often need to create applications that cater to a global audience, such as chatting applications. One common challenge is overcoming language barriers by providing seamless translation capabilities to allow users from diverse linguistic backgrounds to access and engage with each other.

In this tutorial, I’ll show you how I added a powerful translation feature to my Froala Editor-based chatting application using the Translate Plus API from APILayer. This multilingual translation API integration created a truly inclusive experience for users, allowing them to communicate effectively regardless of their native language.

Exploring the Translate Plus API on the APILayer Marketplace

As I was building a new Froala editor demo for a chatting application, I needed to add high quality translations to enable users from diverse linguistic backgrounds to communicate with each other. While existing translation tools like the Google Translate API are popular, I wanted to explore alternatives that could offer accurate translations with broader language support at much cheaper price.

While exploring the APILayer marketplace, which offers a wide range of APIs to help you build modern, feature-rich applications with real-time translations, I discovered the Translate Plus API, which seemed like the perfect solution to my problem.

What is APILayer?

APILayer is a popular API marketplace that provides access to a wide range of APIs, not limited to translation services. It also offers APIs that integrate with the Google Cloud ecosystem and other technical content service providers.

As a developer, I appreciated the ease of integration for the APIs provided by APILayer, which made it straightforward to incorporate new features into my applications.

Why Choose APILayer?

Utilizing APILayer includes several benefits, such as:

• Wide Variety of APIs: It offers APIs for currency conversion, IP geolocation, weather data, email validation, and much more, catering to a broad spectrum of use cases including machine translation.
• Ease of Integration: Their APIs are designed to be user-friendly, with straightforward documentation and code samples that allows for quick and seamless integration.
• Cost-Effectiveness: Many of their APIs are affordable and come with tiered pricing models, making it accessible for both startups and enterprises working on large scale projects.
• Reliability: All the APIs are thoroughly reviewed for high accuracy before they are listed by the APILayer team, ensuring customer satisfaction.

Why Use the Translate Plus API?

The Translate Plus API from APILayer stood out to me as a powerful tool that could seamlessly integrate with the Froala Editor to provide translation capabilities for multiple languages. The language detection feature was particularly impressive, as it could automatically determine the source language.

One of the key features of using the Translate Plus API from the APILayer marketplace is the extensive language support. Unlike some other APIs that are limited in their support for language pairs, this service truly excels.

The Translate Plus API supports over 100 languages, catering to a diverse global audience. This flexibility enables my users to translate content into their preferred languages, ensuring that information is accessible and understandable to all, even when dealing with industry jargon or technical terms.

The comprehensive documentation and intuitive API design made it easy for me to quickly implement the translation feature in my application. Additionally, the competitive pricing and reliable performance of the Translate Plus API were key factors that influenced my decision to leverage this solution over other alternatives.

How the Translation Feature Works

I wanted to make the translation process seamless and intuitive for users. To achieve this, I aimed to add a new toolbar button to the Froala Editor. When users click this button, they’ll see a dropdown menu displaying all the languages supported by the Translate Plus API.

Users can then select their preferred language from the list. Once they make their selection, the API automatically detects the original language of the content and translates it into the user’s chosen language. The editor then instantly updates, displaying the translated text.

This straightforward interaction allows users to quickly and easily access content in their native tongue, fostering a more inclusive and accessible experience within the chatting application.

Integrating the Translate Plus API into the Froala Editor

Step 1: Get a Translate Plus API Key

I began by signing up for a Translate Plus account and obtaining an API key, which would be necessary for authenticating my API requests. This process was similar to what you’d experience with other APIs.

Step 2: Create a starter template

Next, I included the necessary Froala scripts and stylesheets in my HTML file. Additionally, I added an HTML element that would serve as the container for the editor. This is where the Froala editor would be rendered.

To enhance the visual appeal of the editor’s toolbar, I also included the Font Awesome 5 stylesheet. This allowed me to use the iconic Font Awesome 5 library to represent the toolbar buttons’ icons.

<!DOCTYPE html>
<html>

<head>
    <title>Froala WYSIWYG Editor</title>
    <!-- Include Froala CSS -->
    <link href="{{editor__download__folder}}/css/froala_editor.pkgd.min.css" rel="stylesheet"
        type="text/css" />
        
    <!-- Include Font Awesome 5 -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.5.0/css/all.min.css" rel="stylesheet"
        type="text/css" />
</head>

<body>

    <!-- HTML element where the editor will be initialized -->
    <div id="editor">
    </div>

    <!-- Include Froala Editor JS files -->
    <script type="text/javascript" src="{{editor__download__folder}}/js/froala_editor.pkgd.min.js"></script>
 
</body>

</html>

Step 3: Get Translate Plus Supported Languages

var myHeaders = new Headers()
myHeaders.append("X-API-KEY", "b2430***************************19be00")
myHeaders.append("Content-Type", "application/json")

var requestOptions = {
  method: "GET",
  redirect: "follow",
  headers: myHeaders,
}

fetch("https://api.translateplus.io/v1/supported-languages", requestOptions)
  .then((response) => response.json())
  .then((result) => initFroala(result.supported_languages))
  .catch((error) => console.log("error", error))

To get the list of supported languages for the Translate Plus API, I made a GET request to the /supported-languages endpoint. This provided me with a comprehensive list of all the languages that the API supports. I then passed this information to the initFroala function, which I will use to create the translation toolbar button and initialize the Froala Editor.

By obtaining the full list of supported languages, I could ensure that my users would have access to a wide range of translation options, catering to diverse linguistic needs. This flexibility would be a key differentiator for my chatting application, allowing users from all over the world to communicate effectively, regardless of their native tongue.

The straightforward API documentation and intuitive response format made it easy for me to parse and utilize the language data. This streamlined the development process, allowing me to quickly move on to the next steps of creating the custom toolbar button and integrating the translation functionality.

Step 4: Create the Translation toolbar button

Now, I need to add a new custom button to the editor’s toolbar. When clicked, this button would display a dropdown menu with the list of available translation languages.

The dropdown menu would allow the user to select the desired target language for translation. When a language is selected, I would use the Translate Plus API to fetch the translated content and update the editor’s text accordingly.

Step 4.1 Define the Translation toolbar button icon

To define an icon for the translate toolbar button, I did the following:

  // Set Font Awesome 5 as the default toolbar icon library.
  FroalaEditor.ICON_DEFAULT_TEMPLATE = "font_awesome_5"

  // Set the Font Awesome's language symbole as icon for the "translate" button
  FroalaEditor.DefineIcon("translate", { NAME: "language" })

By using the recognizable language icon, I ensured that users would instantly understand the purpose of the translation button, enhancing the intuitiveness of the feature.

Step 4.2 Craft the Translation Toolbar Button

To create the new “translate” button, I defined an object with several key properties:

title

The title represents the label of the button.

title: "translate",

type

The type property defines the button’s behavior. In this case, I set it to “dropdown” since it will open a list of translation options.

type: "dropdown",

options

The options property holds an object containing the supported translation languages, which I obtained from the Translate Plus API in step 3. I can access this object later using the FroalaEditor instance at FroalaEditor.COMMANDS.translate.options.

html

The html property is a method that returns the HTML code for the dropdown menu. Here, I used the FroalaEditor.COMMANDS.translate.options object to dynamically generate a list of the supported translation languages.

    html: function html() {
      var c = '<ul class="fr-dropdown-list" role="presentation">'
      var options = FroalaEditor.COMMANDS.translate.options

      for (var val in options) {
        if (options.hasOwnProperty(val) && val!=="Auto Detect") {
          c += `<li role="presentation"><a class="fr-command fr-title" tabIndex="-1" role="option" data-cmd="translate" data-param1="${this.language.translate(options[val])}" title="${this.language.translate(val)}"> ${this.language.translate(val)} <span class="fr-sr-only">${this.language.translate(val)}</span></a></li>`
        }
      }

      c += "</ul>"
      return c
    },

callback

The callback property defines the action executed when the user selects a language from the dropdown menu.

First, I check if the editor is empty using the core.isEmpty() method. If the editor has content, I select all the text using the commands.selectAll() method and save it to a variable using selection.text().

Then, I call a translate() function, passing the selected text and the user’s chosen language as arguments. This function handles the translation process and returns the translated content. Finally, I update the editor’s content with the translated text using the html.insert() method.

callback: async function callback(cmd, param1) {
     if(this.core.isEmpty()) return;
    
      this.commands.selectAll();
      const text = this.selection.text();   
      const result = await translate(text, param1);
      this.html.insert(result.translations.translation, true);

      
    },

Step 4.3 Handling the Translation Process

The translate function receives the current content of the Froala Editor and the desired target language. It then sends a request to the Translate Plus API, passing both parameters.

Importantly, I set the source parameter to "auto". This tells the Translate Plus API to automatically detect the original language of the content. This ensures a seamless translation experience for the user, as they don’t need to worry about specifying the source language.

The API then responds with the translated content, which the translate function returns. Here’s the code:

 async function translate(text, translateTo) {
    var requestOptions = {
      method: "POST",
      redirect: "follow",
      headers: myHeaders,
      body: JSON.stringify({
        text,
        source: "auto",
        target: translateTo,
      }),
    }
    let data = false
    try {
      const response = await fetch(
        "https://api.translateplus.io/v1/translate",
        requestOptions,
      )
      // Check if the response is okay
      if (!response.ok) {
        throw new Error(`HTTP error! Status: ${response.status}`)
      }

      // Parse the response JSON
      data = await response.json()
    } catch (error) {
      console.log("error", error)
    }
    return data
  }

The automatic language detection and the straightforward API response make the translation process effortless for the user, especially when dealing with context-specific content.

Step 5: Initialize The Froala Editor

Finally, I called the FroalaEditor constructor and passed an object with the necessary configurations, including the custom translation button I defined earlier.

new FroalaEditor("#editor", {
    wordCounterCount: false,
   charCounterMax: 5000,
    toolbarBottom: true,
    toolbarButtons: ["bold", "italic", "underline", "strikeThrough", "|", "formatOL", "formatUL", "|", "textColor", "backgroundColor", "fontSize", "|", "insertLink", "translate"],
  })
}

I set the charCounterMax to 5000, which is the maximum number of characters that can be translated using the Translate Plus API in one call. For larger projects, you might consider implementing batch processing to handle more extensive content.

The translation feature is now seamlessly integrated into the Froala Editor, allowing users to effortlessly translate content within the application. The custom translation button in the toolbar provides a clear and recognizable interface for users to access the translation functionality, further improving the overall usability of the editor. This feature is particularly useful for mobile apps that need to support global audiences.. Try it now.

Conclusion

By leveraging the Translate Plus API from the APILayer marketplace, I was able to add a powerful translation feature to my Froala Editor, empowering my users to consume content in their preferred languages. This integration not only enhances the functionality of my tool but also showcases the value that the APILayer marketplace can bring to developers like myself.

For companies undergoing digital transformation, incorporating translation tools like this can significantly improve customer sentiment and expand market reach. Whether you’re working with PHP, Java, Python, or other languages, the API integration process remains straightforward.

I encourage other tech-savvy developers to explore the APILayer marketplace and discover the wealth of APIs and services that can help them solve their unique challenges and enhance their projects. The Translate Plus API is just one example of the many innovative solutions available, and I’m confident that the marketplace has much more to offer.

If you’d like to try this out, you don’t need to run a git clone https command – just follow the steps above and implement the API in your own environment!

The Froala Markdown feature allows users to write content using a simplified markup language that is easy to read and write. This feature is important because it enables users to format their text with headings, lists, links, and other elements quickly, without needing to use complex HTML tags. Markdown’s simplicity also boosts productivity, making it a favorite among content creators and developers.

We covered how the Markdown feature is working in previous articles:

• How to Use the Froala Markdown Plugin: Item-by-Item
• Markdown to HTML Editors: Bridging the Gap for Developers

Today, we’ll show developers how to add a custom export from markdown button. This will let users easily save their work as a markdown file while maintaining the format of their markdown document. The Froala Editor provides a powerful way to extend its functionality, making this implementation straightforward.

Why Add a Custom Export to Markdown Button?

Markdown is a lightweight markup language that has become increasingly popular among developers and writers alike. It offers a simple and efficient way to format text, making it a preferred choice for tasks such as writing documentation, creating README files, and composing blog posts. By adding a custom button to your Froala-powered application, you provide users with a seamless way to export their content in the Markdown format, enabling them to:

• Easily share their work with others who prefer the Markdown syntax
• Integrate their content into other tools that support Markdown
• Maintain a clean and organized workflow by keeping their documents in a standardized format

Creating the Custom Button

Froala makes it easy to add a new toolbar button to the editor. Let’s create a custom “Export to Markdown” button step-by-step:

Step 1: Include Froala in your Project:

To include Froala in your project, follow the setup instructions in the Froala documentation according to your programming language and framework. For this demo, I only used the core Froala editor and the Markdown plugin to keep my project simple, avoiding unnecessary features. Here’s the resulting template:

<!DOCTYPE html>
<html>

<head>
    <title>Froala WYSIWYG Editor</title>
    <!-- Include Froala CSS -->
    <link href="{{editor__download__folder}}/css/froala_editor.min.css" rel="stylesheet"
        type="text/css" />
    <link href="{{editor__download__folder}}/css/plugins/markdown.min.css" rel="stylesheet"
        type="text/css" />
</head>

<body>
    <!-- HTML element where the editor will be initialized -->
    <div id="editor">
    </div>


    <!-- Include Froala Editor JS files -->
    <script type="text/javascript" src="{{editor__download__folder}}/js/froala_editor.min.js"></script>
    <script type="text/javascript" src="{{editor__download__folder}}/js/plugins/markdown.min.js"></script>
 
</body>

</html>

Step 2: Define an Icon for the Button:

With Froala, you can easily define icons for toolbar buttons. You can define the icon using one of the wide range templates Froala provides. I prefer using SVG icons. First, I’ll add the SVG path for the “Export” icon to the FroalaEditor.SVG object:

FroalaEditor.SVG.export  ="M15.293 5.293L12 8.586V2h-1v6.586L8.707 5.293 7.293 6.707 12 11.414l4.707-4.707zM18 11h-1v4H7v-4H6v5h12v-5z";

Then, I’ll register the icon using the FroalaEditor.DefineIcon method:

FroalaEditor.DefineIcon("export", { NAME: "Export", SVG_KEY: "export" });

Step 3: Define the Custom Button:

To create the new “Export to Markdown” button, I’ll define a new object with the following properties:

title

The title represents the label of the button. It is set to “Export from Markdown”.

title: "Export from Markdown",

type

Defines whether this is a button or a dropdown. In this case, it is set as a button.

type: "button",

plugin

Associate the button with a specific plugin. Here, it is linked to the Markdown plugin.

plugin: "markdown",

undo

Since the button’s function doesn’t need to be added to the undo stack, this is set to false.

undo: false,

showOnMobile

To make the button visible on mobile devices, this is set to true.

showOnMobile: true,

disabled

Determines the initial state of the button—whether it should be disabled or enabled. Since the button should only be available when the editor is in Markdown mode, I set it to true.

disabled: true,

refreshAfterCallback

When set to true, the editor will refresh all toolbar buttons after the button’s callback is executed.

refreshAfterCallback: true,

refresh

Defines the function executed during the toolbar button refresh process. The button is initially disabled, I will utilize this function to enable the button when the Markdown feature is active. I will use themarkdown.isEnabled() method to check the state of the Markdown feature:

• If true, I will enable the button.
• If false, I will disable the button.

  refresh: function refresh($btn) {
    if (this.markdown.isEnabled()) $btn[0].classList.remove("fr-disabled").setAttribute('aria-disabled', 'true');
    else $btn[0].classList.add("fr-disabled").setAttribute('aria-disabled', 'false');
  },

forcedRefresh

To ensure the button’s refresh method is triggered whenever the user clicks any toolbar button, forcedRefresh is set to true.

forcedRefresh: true,

Callback Function

Defines the action executed when the button is clicked. In this case, it handles Markdown export, allowing users to save their content as a downloadable .md file.

Steps to Export Markdown

Follow these steps to enable users to export content from the Froala Editor in Markdown format. This process involves retrieving the editor content, creating a Markdown file, and providing a seamless download option via a custom toolbar button.

1. Retrieve Editor Content

To obtain the content in Markdown format:

• Use commands.selectAll() to select all text.
• Extract the text with selection.text().
• Ensure the cursor position remains unchanged using selection.save() and selection.restore().

    this.selection.save();
    this.commands.selectAll();
    const markdownContent = this.selection.text();
    this.selection.restore();

2. Create a File with Markdown Content

• Utilize the Blob constructor to create a file.
• Set the type to text/markdown;charset=utf-8.
• Generate a downloadable URL using URL.createObjectURL().

    const blob = new Blob([markdownContent], {
      type: "text/markdown;charset=utf-8",
    })
    const url = URL.createObjectURL(blob)

3. Download the File

• Create an <a> element and assign the Blob URL.
• Set the download attribute to specify the filename.
• Trigger a click event to start the download.
• Use URL.revokeObjectURL(url) to release the memory.

    const a = document.createElement("a")
    a.href = url
    a.download = "markdown.md"
    a.click()
    URL.revokeObjectURL(url)

Step 4: Register the Custom Button:

With the button object defined, I’ll use the FroalaEditor.RegisterCommand method to register it as a custom button.

FroalaEditor.RegisterCommand("export", {
  title: "Export from Markdown",
  type: "button",
  undo: false,
  refreshAfterCallback: true,
  forcedRefresh: true,
  disabled: true,
  plugin: "markdown",
  showOnMobile: true,
  refresh: function refresh($btn) {
    if (this.markdown.isEnabled()) $btn[0].classList.remove("fr-disabled").setAttribute('aria-disabled', 'true');
    else $btn[0].classList.add("fr-disabled").setAttribute('aria-disabled', 'false');
  },
  callback: function () {
    this.selection.save();
    this.commands.selectAll();
    const markdownContent = this.selection.text();
    this.selection.restore();
    const blob = new Blob([markdownContent], {
      type: "text/markdown;charset=utf-8",
    })
    const url = URL.createObjectURL(blob)
    const a = document.createElement("a")
    a.href = url
    a.download = "markdown.md"
    a.click()
    URL.revokeObjectURL(url)
  },
})

Step 5: Initialize the Froala Editor:

Now I’m ready to initialize the Froala Editor and display it to the users.
new FroalaEditor('#editor');

6. Add the Custom Button to the Froala Toolbar:

To make the custom button available in the Froala toolbar, add it to the toolbarButtons configuration option:

new FroalaEditor('#editor', {
 toolbarButtons: ["bold", "italic", "underline", "markdown", "|", "export"],
 });

This adds the “Export to Markdown” button to the Froala toolbar alongside other buttons. When users click it, their markdown document will be downloaded as an .md file to their device. See the code in action.

Benefits of Adding the Custom Button

Integrating a custom “Export to Markdown” button into your Froala-powered application offers several benefits:

1. Increased Flexibility: Users can easily export their content in the Markdown format, which is widely supported by various platforms. This allows them to write content once and use it across multiple systems.
2. Improved Workflow: By providing a way to export to Markdown, you’re streamlining your users’ workflow. They can focus on content creation, knowing they can easily export their work in the desired format.
3. Enhanced User Experience: The addition of the custom button enhances the overall user experience. Being able to convert and download their work directly from the editor saves time and reduces the need to copy/paste between applications.

Additional Customization Options

You can further enhance this functionality to:

• Allow users to specify a filename before download
• Add support for exporting to other formats like HTML file or PDF file
• Include syntax highlighting in the exported code blocks
• Apply custom CSS to the markdown editor
• Add options to import content from external sources

Integrating with External Services

Beyond basic exporting, you can extend your Markdown functionality to integrate with popular development platforms:

GitHub Integration

Adding GitHub integration to your custom Markdown export button allows users to directly push their content to repositories. This is particularly useful for teams working on documentation or README files. You can implement a workflow that lets users select a target repository, specify the file path, and upload their markdown content with a single click from the editor.

Document Storage Solutions

For teams that need more robust document management, you can integrate with various storage solutions to help users organize their markdown files. This allows for better version control and collaboration. When implementing this feature, consider how search functionality could enhance the user experience, making it easier to find and reuse previously created content.

eBook Publishing Extensions

For content creators who want to publish longer-form content, adding EPUB export capabilities can be valuable. This feature allows users to convert their markdown documents into properly formatted eBooks that can be rendered on various devices. The process involves converting markdown to HTML and then packaging it with the necessary metadata into an EPUB file, complete with custom CSS styling.

By implementing these extensions, you provide users with a complete solution for their content creation and publishing needs, reducing the need to switch between multiple applications and streamlining their workflow across multiple pages of content.

Advanced Editor Configurations

Take your Markdown editing experience further with advanced configurations. Customize the textarea for better usability, implement additional command options, and enhance functionality to cater to specific Markdown editing needs.

Custom Textarea Enhancements

When working with Markdown in Froala, you can customize how the textarea appears and functions to make editing more comfortable. This includes adjusting the default appearance, implementing custom keyboard shortcuts, and defining specialized editing behaviors for markdown-specific syntax.

Supporting Additional Command Options

Enhance your export functionality by adding additional command options that give users more control. These could include the ability to insert predefined templates, search within the markdown content, or generate an index of headings. Each command can be configured to process the markdown in different ways depending on the user’s needs.

Conclusion

In this blog post, you’ve learned how to add a markdown button to the Froala WYSIWYG HTML Editor. By leveraging Froala’s customization features, you can easily extend the editor’s functionality to meet specific needs. This enhancement allows users to seamlessly export their markdown content as a file, improving their document management workflow.

The process demonstrates how toolbar buttons can be defined, customized, and integrated into the Froala editor, showcasing its flexibility as a powerful and extensible text editor. Implement this feature in your Froala-powered application to give users more control over their content.

Froala has recently upgraded its Angular SDK to support Angular 19. With this update, developers can now integrate the Froala WYSIWYG Editor into their Angular 19 applications with server-side rendering (SSR) enabled. This allows for improved performance, better SEO, and enhanced user experience.

The updated SDK provides a seamless integration process, making it easier for developers to incorporate the feature-rich Froala Editor into their Angular projects. This integration enables users to create and edit content within the Angular application, while benefiting from the advantages of server-side rendering.

In this article, we will explore the step-by-step process of integrating the Froala WYSIWYG Editor into an Angular 19 application with server-side rendering enabled. We will cover the necessary setup, configuration, and implementation details to ensure a seamless integration. By the end of this guide, you will have a comprehensive understanding of how to leverage the power of Froala within your Angular 19 project.

Getting Started with Your Angular App

First, make sure you have the Angular CLI installed. The CLI is a powerful command-line tool that lets you create, develop, and manage Angular projects right from your terminal.

Don’t have the CLI installed yet? No problem, just run this command:

npm install -g @angular/cli

Now you’re ready to start building your Angular app. Let’s create a new project called “froala-app” by running:

ng new froala-app

You’ll be asked a couple of questions along the way:

1. Which stylesheet format would you like to use? Choose your preferred CSS preprocessor, like SCSS or Sass.
2. Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? This is an important one! Enabling SSR and SSG will make your Angular app more performant and SEO-friendly. Go ahead and type “Y” to turn it on.

Once you’ve answered these questions, an Angular project structure will be created in a new folder called “froala-app”. Navigate into the project directory using

cd froala-app

Install the Froala Angular SDK

Alright, let’s get the Froala Angular rich-text editor installed into your Angular application. The Froala Angular SDK has all the essential tools and components you need to easily integrate the Froala editor functionality into your Angular app.

Just run this command to get it installed:

npm install angular-froala-wysiwyg

Create a Standalone Component for Handling The Editor

Now, let’s create another component that we can use to integrate the Froala editor. We’ll call it the “my-editor” component.

ng generate component myEditor

This will create a new folder called “my-editor” inside the “src/app” directory. Inside you’ll find these files for the “my-editor” component:

• my-editor.component.css
• my-editor.component.html
• my-editor.component.spec.ts
• my-editor.component.ts

Import Froala Components

Open up the my-editor.component.ts file and let’s import the necessary Froala SDK components:

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

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




@Component({

  selector: 'app-my-editor',

  standalone: true,

  imports: [FroalaEditorModule, FroalaViewModule],

  templateUrl: './my-editor.component.html',

  styleUrl: './my-editor.component.css'

})

export class MyEditorComponent {}

Insert Froala Editor HTML Code

Now let’s add the Froala editor HTML code to the my-editor.component.html file:

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

Styling the Froala Editor

To make sure the Froala editor looks good, we need to include the necessary stylesheets. In the angular.json file, add these Froala stylesheets under the “styles” array:

            "styles": [

              "src/styles.css",

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

              "node_modules/froala-editor/css/froala_style.min.css"

            ],

The froala_editor.pkgd.min.css includes the styles for the core editor and all Froala plugins. The froala_style.min.css includes the styles needed for displaying the content created by the editor outside the editor.

Displaying Froala on the main page

Finally, let’s import the MyEditorComponent into the app.component.ts file so we can use it in the main app template:

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

import { CommonModule } from '@angular/common';

import { RouterOutlet } from '@angular/router';

import { MyEditorComponent } from './my-editor/my-editor.component';




@Component({

  selector: 'app-root',

  standalone: true,

  imports: [CommonModule, RouterOutlet, MyEditorComponent],

  templateUrl: './app.component.html',

  styleUrl: './app.component.css'

})

export class AppComponent {

  title = 'froala-app';

}

And in the app.component.html file, replace the main section with:

<main class="main">

  <div class="content">

    <app-my-editor></app-my-editor>

  </div>

</main>

Start your App

Alright, now you can serve the app by running ng serve. This will compile the application and serve it locally, usually at http://localhost:4200/. You can now open your Angular app in a web browser and you should see the Froala editor displayed on the homepage.

Displaying More Froala’s Features

You may have noticed that the Froala editor is displayed with just its basic features. That’s because we haven’t included the plugin’s JavaScript files in the ngOnInit() method yet. Let’s take care of that now.

Open up the “my-editor.component.ts” file and let’s start adding some Froala plugins one by one:

import { isPlatformBrowser } from '@angular/common';

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

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




@Component({

  selector: 'app-my-editor',

  standalone: true,

  imports: [FroalaEditorModule, FroalaViewModule],

  templateUrl: './my-editor.component.html',

  styleUrl: './my-editor.component.css'

})

export class MyEditorComponent {

  constructor(@Inject(PLATFORM_ID) private platformId: Object) { }




  ngOnInit() {

    // Import Froala plugins dynamically only in the browser context

    if (isPlatformBrowser(this.platformId)) {




      // Import a single Froala Editor plugin.

      // @ts-ignore

      import('froala-editor/js/plugins/align.min.js');




      // Import a Froala Editor language file.

      // @ts-ignore

      import('froala-editor/js/languages/de.js');




      // Import a third-party plugin.

      // @ts-ignore

      import('froala-editor/js/third_party/font_awesome.min');

      // @ts-ignore

      import('froala-editor/js/third_party/image_tui.min');

      // @ts-ignore

      import('froala-editor/js/third_party/spell_checker.min';

      // @ts-ignore

      import('froala-editor/js/third_party/embedly.min');

    }

  }

}

Alternatively, if you want to load all the Froala features with a single call, you can import the plugins.pkgd.js file instead:

import { isPlatformBrowser } from '@angular/common';
import { Component, Inject, PLATFORM_ID } from '@angular/core';
import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-wysiwyg';

@Component({
  selector: 'app-my-editor',
  standalone: true,
  imports: [FroalaEditorModule, FroalaViewModule],
  templateUrl: './my-editor.component.html',
  styleUrl: './my-editor.component.css'
})
export class MyEditorComponent {
  constructor(@Inject(PLATFORM_ID) private platformId: Object) { }

  ngOnInit() {
    // Import Froala plugins dynamically only in the browser context
    if (isPlatformBrowser(this.platformId)) {
      // Import all Froala Editor plugins.
      // @ts-ignore
      import('froala-editor/js/plugins.pkgd.min.js');

    }
  }
}

In the code above, we’re using the isPlatformBrowser component to make sure we only import the Froala plugins in the browser context. This is important for server-side rendering (SSR) scenarios.

The // @ts-ignore is used to suppress any TypeScript errors that might come up due to the dynamic import statements. This allows the code to compile without issues, and the plugins will be loaded at runtime.

How to Setup Froala if Server-side Rendering is disabled

If you’ve disabled server-side rendering (SSR) in your Angular application, the way you import the Froala SDK components may be a bit different. Instead of importing SDK components in my-editor.component.ts, we’ll update the my-editor.module.ts file as follows:

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

// Import a single Froala Editor plugin.
// import 'froala-editor/js/plugins/align.min.js';

// Import a Froala Editor language file.
// import 'froala-editor/js/languages/de.js';

// Import a third-party plugin.
// import 'froala-editor/js/third_party/font_awesome.min';
// import 'froala-editor/js/third_party/image_tui.min';
// import 'froala-editor/js/third_party/spell_checker.min';
// import 'froala-editor/js/third_party/embedly.min';

// Import Angular plugin.
import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-wysiwyg';
...

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

Customizing The Editor

Now that we’ve set up the Froala editor in our Angular application, it’s time to start customizing it to fit our needs. We can enable additional features and plugins, adjust the toolbar buttons, and even create custom functionality.

The Froala SDK provides a wide range of options to tailor the editor to our specific requirements. By leveraging the power of Angular and the flexibility of Froala, we can build a robust and feature-rich text editing experience for our users.

Let’s open the my-editor.component.ts file and define a public options object in the MyEditorComponent class with some customizations from the Froala API options, events, and methods:

export class MyEditorComponent {

  public options: Object = {

    toolbarButtons: ['alignRight', 'bold', 'insertImage'],

    events: {

      'froalaEditor.contentChanged': function () {

        console.log('Content updated!');

      },

    },

  };

  .....

And in the my-editor.component.html file, we’ll assign the options object to the Froala component:

<div [froalaEditor]="options">Hello, Froala!</div>

Is it possible to store uploaded files in the cloud with Froala?

Absolutely! Froala offers two convenient ways for uploading files:

1. Built-in File Upload: Froala’s built-in file upload functionality seamlessly integrates with your Angular application, and you can configure it to upload files directly to your S3 bucket.
2. Filestack Integration: Froala also integrates with Filestack, a powerful upload and cloud storage solution. This integration gives you advanced file handling capabilities, allowing you to securely store and manage your application’s files. The Filestack integration streamlines the file upload experience within your Angular-powered app and offers easy integration with various cloud storage services.

The Filestack integration requires minimal configuration – you’ll need to create a Filestack account to get an API key.

Both options make it easy to incorporate file upload functionality into your Angular application, enhancing the content creation experience for your users.

Conclusion

In this article, we’ve explored the seamless integration of the Froala HTML Editor software into an Angular 19 application with server-side rendering (SSR) enabled. By leveraging the updated Froala Angular SDK, we were able to quickly set up the editor.

The step-by-step guide covered the necessary setup, configuration, and implementation details to ensure a smooth integration process. We also discussed how to customize the Froala editor to fit the specific needs of your Angular application including enabling additional features and plugins.

Moreover, we highlighted the two convenient options for storing uploaded files in the cloud – the built-in file upload functionality and the Filestack integration. Both of these solutions make it easy to incorporate secure and scalable file management into your Angular-powered application.

By following the instructions in this article, you now have the knowledge and tools to integrate the powerful Froala WYSIWYG Editor into your Angular 19 project, while taking advantage of the benefits of server-side rendering. Start enhancing your users’ content creation experience today!

Try Froala in your Angular 19 application and see the difference it can make. Get started with the Froala Angular SDK now.

As a React developer, you’re always on the lookout for the latest tools and technologies to enhance your development workflow. In this blog post, we’ll explore how you can seamlessly integrate a powerful rich text editor, Froala Editor, into your React 18 applications.

Froala 4.4 and React 18 Support

Froala, a leading provider of content editing solutions, has recently released version 4.4 which now fully supports React 18. This means that you can easily incorporate the Froala Editor v4.4 into your React 18 projects, taking advantage of the latest features and improvements in the React ecosystem.

Benefits of Updating to Froala 4.4

By updating your application to use the Froala React SDK, you’ll be able to:

• Leverage the latest features and enhancements in the Froala Editor
• Ensure compatibility with the latest version of React (18)
• Improve the overall performance and user experience of your application.

Integrating Froala as a Functional Component

To get started with integrating Froala as a functional component in your React 18 application, follow these steps:

1. Install the Froala 4.4 React SDK:

npm install react-froala-wysiwyg --save

2. Create a functional component that uses the Froala Editor. Create a new directory in the src directory called components and create a file called MyEditorComponent.jsx in that directory.
3. Open MyEditorComponent.jsx and import the Froala Editor component and the necessary CSS files.

import React from "react";

// Require Editor CSS files.

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

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

import FroalaEditorComponent from "react-froala-wysiwyg";

// Import all Froala Editor plugins;

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

// Import a single Froala Editor plugin.

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

// Import a language file.

// import 'froala-editor/js/languages/de.js';

// Import a third-party plugin.

// import 'froala-editor/js/third_party/image_tui.min.js';

// import 'froala-editor/js/third_party/embedly.min.js';

// import 'froala-editor/js/third_party/spell_checker.min.js';

// Include font-awesome css if required.

// install using "npm install font-awesome --save"

// import 'font-awesome/css/font-awesome.css';

// import 'froala-editor/js/third_party/font_awesome.min.js';

4. Render the Froala SDK component

// Render Froala Editor component.

function MyEditorComponent() {

  return (

    <div class="editor">

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

      <FroalaEditorComponent tag="textarea" />

    </div>

  );

}

export default MyEditorComponent;

5. Add to other components. For example, to add in `src/App.js`

import "./styles.css";

import MyEditorComponent from "./components/MyEditorComponent";

export default function App() {

  return (

    <div className="App">

      <h1>Hello CodeSandbox</h1>

      <h2>Start editing to see some magic happen!</h2>

      <MyEditorComponent />

    </div>

  );

}

By following these steps, you can easily integrate the Froala Editor as a functional component in your React 18 application, allowing your users to create and edit rich content with ease.

Froala Editor Customization In React

To further customize the Froala Editor in your React 18 application, you can leverage the various configuration options and event handlers provided by the Froala API.

Add a config attribute to the FroalaEditorComponent utilizing the Froala options, events, and methods to customize the editor to your needs.

function MyEditorComponent() {

  let config = {

    documentReady: true,

    heightMin: 300,

    events: {

      contentChanged: function (e, editor) {

        console.log("test");

      },

    },

  };

  return (

    <div class="editor">

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

      <FroalaEditorComponent tag="textarea" config={config} />

    </div>

  );

}

This allows you to tailor the editor’s appearance, functionality, and behavior to match the specific needs of your project.

Additionally, you can integrate third-party plugins and language files to extend the editor’s capabilities, ensuring a seamless and feature-rich content editing experience for your users.

By taking advantage of these customization options, you can create a truly unique and engaging rich text editing solution within your React 18 application.

Why Should I Use Froala With React in 2025?

Using Froala with React in 2025 offers several key advantages. Firstly, the tight integration between the Froala Editor and the React ecosystem ensures seamless compatibility with the latest React features and best practices. This allows you to leverage the full power of React 18 and beyond, delivering a highly responsive and performant content editing experience.

Additionally, Froala’s robust plugin ecosystem and extensive customization options enable you to tailor the editor to your specific requirements, ensuring a unique and engaging user interface for your application.

Froala Editor V4 integrates with Filestack to provide a seamless cloud storage solution for images, videos, and other file types.

By embracing Froala and React in 2025, you can future-proof your content management solutions and provide your users with a cutting-edge rich text editing experience.

How Easy Is It To Upload Images In Froala with React?

Froala makes it easy to upload images in your React application. They offer two convenient options:

1. Built-in Image Upload: Froala’s built-in image upload functionality seamlessly integrates with your React app. All you need to do is configure the Froala Editor’s image upload options, and your users can upload images directly from their devices or external sources. The only additional step is setting up a server to store the uploaded images.
2. Filestack Integration: Froala also integrates with Filestack, a powerful upload and cloud storage solution. This integration gives you advanced file handling capabilities, allowing you to securely store and manage your application’s media assets. The Filestack integration streamlines the image upload experience within your React-powered app. Plus, you can apply image transformations directly within the Froala Editor, before or after uploading the images.

The Filestack integration requires minimal configuration – you’ll just need to create a Filestack account to get an API key.

Both options make it easy to incorporate rich image functionality into your React application, enhancing the content creation experience for your users.

Why is Froala significantly cheaper than TinyMCE?

Froala’s transparent pricing model provides a fixed annual fee for using the editor and all its features. Unlike TinyMCE, Froala does not impose limits on the number of editor loads or charge extra for additional features. Consequently, Froala is significantly cheaper than TinyMCE in many use cases.

This cost-effectiveness, combined with Froala’s robust customization capabilities and seamless integration with React, makes it an attractive choice for developers seeking a high-quality WYSIWYG editor for their React 18 applications.

How to Migrate from TinyMCE to Froala in React?

Migrating from TinyMCE to Froala in a React application is a straightforward process. The key steps involve removing the TinyMCE SDK, installing the Froala SDK, importing the necessary components, and configuring the editor to match your existing setup.

By following this comprehensive migration from TinyMCE to Froala in React guide, you can seamlessly transition your content editing experience, preserving your users’ familiarity while benefiting from Froala’s features, customization options, and cost-effective pricing model.

Conclusion

Integrating the Froala Editor as a functional component in your React 18 application is a powerful way to enhance your content creation and management capabilities. By leveraging the latest version of Froala and taking advantage of its seamless compatibility with React 18, you can deliver a cutting-edge rich text editing experience to your users.

The step-by-step guide provided in this article walks you through the process of setting up the Froala Editor as a reusable component, allowing you to easily customize it to match the unique needs of your project. With Froala’s robust plugin ecosystem, extensive configuration options, and tight integration with cloud storage solutions like Filestack, you can create a truly unique and engaging content editing workflow within your React 18 application.

If you’re a React developer looking to elevate your content management capabilities, we encourage you to try integrating Froala Editor into your next project. Froala is an excellent choice that will help you deliver a superior user experience for your application’s content creators.

If you have any questions or need further assistance, don’t hesitate to reach out to the Froala team or explore the comprehensive documentation.

Django is a powerful Python web framework that helps developers build web applications quickly and efficiently. Froala 4.4 release adds support to the popular Python framework, Django 5.

Integrating Froala HTML Editor Software into a Django project allows users to create and edit rich text content within the application. By combining the flexibility of Froala and the rapid development capabilities of Django, you can create dynamic, user-friendly web applications that meet the evolving needs of your audience.

In this step-by-step guide, you’ll learn how to integrate the Froala HTML Editor Software into a Django form, allowing your users to create and edit rich text content within your application. Whether you’re building a blog, a content management system, or any other web application, this integration will enhance the user experience and unlock new possibilities for your project.

Prerequisites

Being a Python web framework, Django requires Python. We’re assuming:

• You are familiar with Python and have it installed on your computer. If not, please install python and come again.
• You have Django installed already.

Versions Used in This Tutorial

• Froala Editor V4.4
• Python V3.13.1
• Django V5.1.5

Step 1: Getting started

From the command line, cd into a directory where you’d like to store your code and create a new directory named froaladjangotutorial.

mkdir froaladjangotutorial

 Then, run the following command to bootstrap a new Django project:

django-admin startproject myapp froaladjangotutorial

This will create a project called myapp inside the froaladjangotutorial directory.

Step 2: Creating a Demo app

To create your app, jump into the created directory:

cd froaladjangotutorial

Type the following command:

py manage.py startapp demos

That’ll create a directory demos which will contain our demo code.

Step 3: Install Froala

To begin, you’ll need to install the Froala Django package. You can do this using pip.

pip install django-froala-editor

After successfully installed, open myapp/settings.py and add froala_editor into the INSTALLED_APPS array.

# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'froala_editor'
]

Then open the myapp/urls.py file and include the Froala Editor URLs.

from django.contrib import admin
from django.urls import include,path

urlpatterns = [
    path("demos/", include("demos.urls")),
    # Froala Editor URLs
    path('froala_editor/', include('froala_editor.urls')),
    path('admin/', admin.site.urls),
]

Step 4: Create a form with a Froala

Create a new file demos/forms.py and add the following code:

from django import forms
from froala_editor.widgets import FroalaEditor

class FroalaForm(forms.Form):
    content = forms.CharField(widget=FroalaEditor)

 In the above code, we've created a Django form with a FroalaEditor widget. 

Step 5: Configure Froala

You can also customize the editor’s appearance and behavior by passing various options to the FroalaEditor widget.

For example, to initialize the Froala Editor with an inline toolbar, you can use the following code:

from django import forms
from froala_editor.widgets import FroalaEditor

class FroalaForm(forms.Form):
    content = forms.CharField(widget=FroalaEditor(options={
      'toolbarInline': True,
    }))

This will create a Froala Editor instance with an inline toolbar, allowing users to format the content as needed. You can further customize the editor by modifying the options passed to the FroalaEditor widget.

Step 6: Create a template to render the form

You’ll need to configure the Froala Editor in your Django templates. In the demos app, create a new file called froala_form.html in the /templates directory. In this file, you’ll add the necessary HTML and Django template tags to integrate the Froala Editor.

<!DOCTYPE html>
<html>

<head>
    <title>Froala Editor</title>
    {{ form.media }}


</head>

<body>
    <h1>Froala Editor</h1>
    <form method="post">
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit">Submit</button>
    </form>

</body>

</html>

Make sure to update your settings.py to include the templates directory in the TEMPLATES setting:

import os

# ...existing code...

ROOT_URLCONF = 'mysite.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'demos', 'templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

Step 7: Update the view to render the template

Update your demos/views.py file to render the form in the template:

from django.shortcuts import render
from .forms import FroalaForm

def index(request):
    if request.method == 'POST':
        form = FroalaForm(request.POST)
        if form.is_valid():
            # Process the form data
            pass
    else:
        form = FroalaForm()
    
    return render(request, 'froala_form.html', {'form': form})

Step 8: Map The URLs

Define a URLconf for the demos app by creating a file demos/urls.py with the following content:

from django.urls import path

from . import views

urlpatterns = [
    path("", views.index, name="index"),
]

The next step is to configure the global URLconf in the myapp project to include the URLconf defined in demos.urls.

To do this, add an import for django.urls.include in myapp/urls.py and insert an include() in the urlpatterns list, so you have:

from django.contrib import admin
from django.urls import include,path

urlpatterns = [
    path("demos/", include("demos.urls")),
    path('admin/', admin.site.urls),
]

Step 9: Test the demo app

Verify the demo app is working with the following command:

python manage.py runserver

You can now access the demo app by visiting `http://127.0.0.1:8000/demos/` in your web browser. This will display the form you created, including the Froala Editor.

With the Froala Editor integrated into your Django application, users can now create and edit rich text.

Conclusion

Integrating the Froala WYSIWYG Editor into your Django application is a powerful way to enable rich text editing for your users. By following the steps outlined in this article, you can quickly add a feature-rich text editor to your Django forms.

The Froala Editor provides a wide range of customization options, allowing you to tailor the editor to your specific needs. Whether you want an inline toolbar, custom buttons, or advanced formatting options, the Froala Editor has you covered.

Now that you know how to add the Froala Editor to your Django project, why not give it a try? Start by creating a new Django project and follow the steps in this guide. Before long, you’ll have a dynamic, user-friendly text editing experience integrated into your web application.

As a tech-savvy user or entry-level developer, you’re always on the lookout for tools that can streamline your workflow and enhance your productivity. Today, we’re excited to introduce you to the Froala WYSIWYG Editor and its powerful PDF export feature.

Froala is a feature-rich, user-friendly text editor that allows you to create and format content with ease. Whether you’re writing blog posts, drafting technical documentation, or designing marketing materials, Froala’s intuitive interface and robust functionality make it a valuable asset in your content creation arsenal.

In this blog post, we’ll dive deep into the PDF export feature of the Froala WYSIWYG Editor, guiding you step-by-step on how to set it up and leverage it to your advantage.

Key Takeaways:

1. The Froala WYSIWYG Editor provides a powerful PDF export feature that allows you to easily convert your content into professional-looking PDF documents.
2. The PDF export feature relies on the “html2pdf.js” library, which must be included in your project for the feature to work.
3. You can customize the PDF export by configuring options like page size, orientation, and margins using the “html2pdf” option provided by the Froala Editor.
4. Strategically using CSS page break properties can help you control where the page breaks occur in the exported PDF document.

Downloading and Setting Up Froala WYSIWYG Editor

To get started, you’ll need to download the Froala WYSIWYG Editor. You can visit the pricing page and choose the plan that best suits your needs. Whether you’re a solo developer or part of a larger team, Froala offers a range of licensing options to accommodate your requirements. If you want to test the editor first, you can also take advantage of the free trial option.

Once you’ve downloaded and installed the Froala WYSIWYG Editor, it’s time to set it up. The process is straightforward and can be completed in a few simple steps:

1. Include the necessary CSS and JavaScript files in your HTML document.
2. Initialize the Froala Editor by adding the appropriate HTML element and JavaScript code.
3. Customize the editor’s appearance and functionality by configuring the available options.

Here’s an example of how you can set up the Froala WYSIWYG Editor:

<!DOCTYPE html>
<html>

<head>
    <title>Froala WYSIWYG Editor</title>
    <!-- Include Froala CSS -->
    <link href="{{editor__download__folder}}/css/froala_editor.pkgd.min.css" rel="stylesheet"
        type="text/css" />
</head>

<body>
    <!-- HTML element where the editor will be initialized -->
    <div id="editor">
        <p>This is the initial content of the editor.</p>
    </div>


    <!-- Include Froala Editor JS files -->
    <script type="text/javascript" src="{{editor__download__folder}}/js/froala_editor.pkgd.min.js"></script>

    <script>
        // Initialize the Froala Editor
        new FroalaEditor('#editor');
    </script>
</body>

</html>

This example demonstrates the basic setup for the Froala WYSIWYG Editor. You can further customize the editor by adding additional configurations to suit your specific needs.

Exploring the PDF Export Feature

Now that you have the Froala WYSIWYG Editor set up, let’s dive into the PDF export feature. This powerful functionality allows you to seamlessly convert your content into a professional-looking PDF document, making it easy to share, print, or archive your work.

Since we are using the packaged version of Froala “froala_editor.pkgd.min.js“, this feature is included by default.

If you’re using the basic version of Froala (froala_editor.min.js), you’ll need to include the Froala PDF export plugin in your project.

<script type="text/javascript" src="{{editor__download__folder}}/js/froala_editor.min.js"></script>
<script type="text/javascript" src="{{editor__download__folder}}/js/plugins/print.min.js"></script>

Make sure to include the “print” plugin in the list of enabled plugins:

new FroalaEditor('#editor', { 
       pluginsEnabled: ['print'],
});

 With the plugin in place, you can now add the PDF export button to your Froala Editor toolbar. Here's an example of how to do that:

new FroalaEditor('#editor', { 
       pluginsEnabled: ['print'],
       toolbarButtons: ['getPDF'],
});

This configuration will add an “Export PDF” button to your Froala Editor toolbar. However, users will still be unable to export the content as PDF documents. That’s because the PDF export feature depends on the “html2pdf.js“ open-source library. You’ll need to include this library in your project as well. The “html2pdf.js” script must be included before the Froala scripts.

    <!-- Include js2htm library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.3/html2pdf.bundle.min.js"
        integrity="sha512-YcsIPGdhPK4P/uRW6/sruonlYj+Q7UHWeKfTAkBW+g83NKM+jMJFJ4iAPfSnVp7BKD4dKMHmVSvICUbE/V1sSw=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <!-- Include Froala Editor JS files -->
    <script type="text/javascript" src="{{editor__download__folder}}/js/froala_editor.min.js"></script>
    <script type="text/javascript" src="{{editor__download__folder}}/js/plugins/print.min.js"></script>

Note that, as mentioned on html2pdf.js site, there have been some issues reported with the latest version of html2pdf.js (v0.10), so it’s recommended to use version 0.9.3 for now.

Exporting Content as PDF

Now that you have the PDF export feature set up, let’s walk through the process of exporting your content as a PDF document.

1. Add Content to the Froala Editor: Start by adding your desired content to the Froala WYSIWYG Editor. This could be a blog post, a technical guide, or any other type of content you want to export as a PDF.
2. Click the PDF Export Button: Once you’ve finished editing your content, locate the “PDF Export” button in the Froala Editor toolbar and click it.

That’s it! You’ve successfully exported your Froala WYSIWYG Editor content as a PDF document. This feature is particularly useful when you need to share your work with others, print it, or archive it for future reference.

Export Editor Content to PDF Programmatically

The Froala Editor’s Print plugin provides a toPDF() method that allows you to export the editor’s content to a PDF document programmatically. This can be useful when you want to trigger the PDF export after a specific event, such as when the editor initializes.

Here’s an example of how to export the content to PDF right after the editor is initialized:

        // Initialize the Froala Editor
        new FroalaEditor('#editor', {
            pluginsEnabled: ['print'],
            toolbarButtons: ['getPDF'],
        }, function () {
            this.print.toPDF();


        });

The toPDF() method uses the default Froala PDF export options.

Customizing the PDF Export

If you want to customize the exported PDF, such as setting the orientation to portrait instead of landscape, you can use the html2pdf option provided by the Froala Editor.

The html2pdf option returns a function that gives you access to the html2pdf.js Worker object. With this object, you can trigger any html2pdf methods. Read more about how to use it in the html2pdf documentation.

You can use this object to configure the PDF settings and then export the editor’s content following this format editor.opts.html2pdf().set(configration).from(editor.el).save();.

Here’s an example:

        // Initialize the Froala Editor
        new FroalaEditor('#editor', {
            pluginsEnabled: ['print'],
            toolbarButtons: ['getPDF'],
        }, function () {

            let editor = this;

            editor.opts.html2pdf().set({
                margin: [10, 20],
                html2canvas: { useCORS: !0 },
                filename: 'new name.pdf',
                jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
            }).from(editor.el).save();
        });

In this example, we’re setting the following PDF options:

• margin: Specifies the PDF margins in points.
• html2canvas.useCORS: Enables CORS (Cross-Origin Resource Sharing) for the HTML2Canvas library, which is used to capture the editor’s content.
• filename: Sets the name of the exported PDF file.
• jsPDF: Configures the PDF document settings, such as the unit, page format, and orientation.

After setting the options, we use the from(editor.el) method to specify the editor element as the content to be converted to PDF, and then call the save() method to generate and download the PDF file.

Remember, setting the configuration incorrectly could result in an empty or incorrectly formatted PDF file, so be cautious when customizing the PDF export.

Adding Page Breaks

The html2pdf.js library automatically adds page breaks based on your CSS styles. You can use the break-before, break-after, and break-inside CSS properties to control where the page breaks should occur.

For example, you can add a page break before a specific element by applying the break-before: always style to it. This ensures that the element starts on a new page when you export the content to PDF.

Additionally, you can add the html2pdf__page-break class to any element, and html2pdf.js will insert a page break after that element. This is a legacy feature, but it can still be useful in some cases.

To summarize, make sure to add the appropriate CSS page break styles to your content. When you export the Froala Editor’s content to PDF, html2pdf.js will automatically insert the page breaks based on your CSS rules, resulting in a well-formatted PDF document.

Conclusion

In this blog post, we’ve explored the powerful PDF export feature of the Froala WYSIWYG Editor. By following the step-by-step guide, you now know how to download and set up the Froala Editor, as well as how to leverage the PDF export functionality to streamline your content creation and sharing workflows.

Whether you’re a tech-savvy user or an entry-level developer, the Froala WYSIWYG Editor and its PDF export feature can be a valuable asset in your content creation toolkit. By mastering these tools, your users will be able to create professional-looking documents, enhance your productivity, and deliver high-quality content to their audience.

So, what are you waiting for? Download Froala, try out the PDF export feature, and start creating amazing content today!

Looking to seamlessly integrate a rich text editor into your web application without disrupting your existing design or compromising security? Leveraging the power of iframes, the Froala WYSIWYG editor offers a robust solution for achieving just that. This approach provides a clean, isolated environment for the editor, preventing style conflicts and potential security vulnerabilities.

This article delves into the advantages of loading your Froala editor within an iframe, exploring the benefits of content isolation and enhanced customization options. We’ll provide a clear, step-by-step guide on how to effectively embed the Froala editor in an iframe, and discuss techniques for injecting custom styles to maintain brand consistency and a polished user experience.

Key Takeaways:

1. Using an iframe to embed the Froala WYSIWYG editor provides content isolation, preventing style conflicts between the editor and the main website. This ensures a consistent editing experience regardless of the surrounding website’s CSS.
2. Froala’s iframe mode allows developers to inject custom styles directly into the iframe, enabling precise control over the editor’s visual presentation to maintain brand consistency.
3. Embedding the Froala editor in an iframe is a straightforward process.

The Benefits of Using HTML Iframe with Froala Editor

Understanding the Advantages of Iframe Content Isolation

Iframes offer a powerful way to embed external content seamlessly within your web pages while maintaining a clean separation from your core site’s structure and styling. Think of them as miniature windows displaying content from other sources.

With the Froala WYSIWYG editor, utilizing iframe mode provides significant advantages, primarily centered around content isolation. This iframe editor customization ensures that the styling of your Froala editor, embedded within the iframe, won’t clash with the CSS of your main webpage. This is particularly crucial when dealing with complex website designs or when integrating third-party content. This isolation prevents conflicts and ensures a consistent editing experience within the Froala editor, regardless of the surrounding website’s styles.

Furthermore, iframe content isolation enhances security by limiting the impact of potentially malicious scripts within the embedded content, protecting your website’s integrity. Using iframes with the Froala editor allows for a more controlled and predictable integration, contributing to a smoother user experience and simplified development process.

The Froala editor embedding process is straightforward and designed to enhance both UX and DX, aligning perfectly with Froala’s mission to create exceptional editing experiences.

Enhancing Your WYSIWYG Editor with Iframe Customization

The ability to set default styles for framed WYSIWYG editors’ content is particularly beneficial for maintaining brand consistency and ensuring seamless visual integration.

How do you achieve this level of iframe editor customization? It’s simpler than you might think. Injecting styles into the framed Froala editor allows you to precisely tailor the look and feel to match your brand’s guidelines. This precise control extends to fonts, colors, button styles, and virtually every aspect of the editor’s visual presentation.

With Froala’s focus on intuitive design and developer experience, customizing your framed editor becomes a powerful tool for creating a visually appealing and user-friendly editing experience within your web application.

How to Embed Froala Editor in an Iframe Effectively

The Froala WYSIWYG editor, known for its clean design and developer-friendly integration, provides a dedicated iframe mode, further enhancing its versatility and customization capabilities.

First, include the Froala library in your project. Then, when initializing the editor, set the iframe option to true. This creates a contained environment for the editor, preventing style conflicts with the surrounding webpage.

new FroalaEditor('div#froala-editor', {
  iframe: true
})

This isolation is especially beneficial when dealing with complex website designs, ensuring the Froala editor renders perfectly regardless of existing CSS. This method offers several advantages, including iframe content isolation and enhanced iframe editor customization.

How To Inject Styles Inside Froala WYSIWYG Editor

Enabling Froala’s iframe mode brings us to the matter of styling the framed editor. Because of the inherent content isolation, simply adding CSS to your main stylesheet won’t affect the editor within the iframe. This is where the Froala core.injectStyle(style) method comes into play.

This method is used to inject styles directly into the iframe’s document. This approach allows precise control over the editor’s visual presentation within its contained environment, overcoming the limitations posed by iframe SEO impact and ensuring consistent styling regardless of the parent page’s CSS.

For example, by default, the standard browser’s font-size for the H1 tag is 32px. This is the font size that will be automatically applied to H1 elements inside the Froala editor when used in iframe mode. However, you may want to change this default to match your brand’s style guide – for instance, setting the H1 font-size to 40px. In this case, you can use core.injectStyle(style) method like this:

let editor = new FroalaEditor(
  "div#froala-editor",
  {
    iframe: true,
  },
  function () {
    // Call the method inside the initialized event.
    editor.core.injectStyle("h1{font-size: 40px}")
  },
)

The code above sets the font-size for any H1 tags inserted within the Froala editor to 40px, ensuring the editor’s appearance matches your brand’s design guidelines.

With this technique, developers can achieve seamless iframe editor customization while leveraging the benefits of iframe content isolation and enhanced security. This allows for a streamlined user experience that makes Froala a favorite among developers worldwide.

FAQ

1. What are the benefits of using HTML iframe for embedding the Froala Editor?

Using an iframe for the Froala Editor offers several key benefits: content isolation (preventing style conflicts with your main website and enhancing security), enhanced customization (allowing precise control over the editor’s appearance through style injection), and a cleaner separation of content which can potentially improve page load times and thus, SEO. It creates a contained environment, simplifying development and ensuring a consistent editing experience.

2. How can I customize the Froala Editor when loaded in an iframe?

Customize the framed Froala editor by injecting styles directly into the iframe’s document using the core.injectStyle(style) method. This allows precise control over fonts, colors, button styles, and more, ensuring brand consistency.

Conclusion

Embedding the Froala editor within an iframe offers a compelling blend of design flexibility, enhanced security, and improved site stability. While iframe implementation requires careful consideration of SEO implications, the benefits of content isolation and styling customization often outweigh the challenges. By understanding the nuances of iframe integration and leveraging Froala’s intuitive design, developers can create a seamless and visually appealing editing experience that enhances user satisfaction and development workflow. So, take the leap and explore the power of iframe embedding with Froala – you might be surprised at how easily it elevates your web application’s editing capabilities.

Tables are best used in JavaScript WYSIWYG Editors. They help us organize data, highlight important information, and present content in a clear, structured way. However, styling these tables has long been a frustrating challenge for non-technical users.

Froala came up with an innovative approach to table styling, giving developers the ability to create ready visually stunning styles that content creators can select to style their tables.

In this post, we’ll explore Froala’s table styling capabilities. We’ll uncover why Froala’s table solution seamlessly fits into any content.

Key Takeaways:

• Froala provides a comprehensive set of table formatting options in its rich-text editor, including the ability to resize columns, add/remove table headers/footers, and control cell alignment.
• Froala’s innovative table styling capabilities allow developers to create pre-designed table styles that content creators can easily apply to their tables, without needing to write custom CSS.
• Froala’s table styling features improve the readability and aesthetics of content by enabling the creation of professional-looking tables that enhance the overall visual appeal.
• Froala’s seamless table editing tools streamline the content creation process, boosting productivity by reducing the time spent on table formatting.
• By integrating Froala’s powerful yet user-friendly table management capabilities, you can elevate the quality and impact of your content, delivering a better experience for your audience.

Table Editing in Froala

When it comes to styling tables in a rich-text editor, Froala provides a comprehensive set of formatting options to help you create professional-looking tables.

Table Structure

Froala’s rich text editor provides a powerful “Table” dropdown menu that gives you complete control over the structure of your tables. This menu allows you to easily manipulate your table, ensuring you can create the perfect layout for your content.

With the “Table” dropdown, you can:

Add/Remove Table Header: Toggle a header row at the top of your table. This is great for labeling the different columns and providing context for your data.

Add/Remove Table Footer: Add a footer row at the bottom of your table. This can be useful for including summary information, totals, or other important details.

Add/Remove Table Rows: Quickly insert new rows or delete existing ones as needed. This flexibility allows you to expand your table to accommodate more data or trim it down to only the most essential information.

Add/Remove Table Columns: Just like with rows, you can add or remove columns at any time. This makes it easy to reorganize your content and adjust the table structure to suit your needs.

Beyond just adding and removing elements, the “Table” dropdown also lets you control the alignment of content within each cell. You can choose to align text horizontally (left, center, right, justify) as well as vertically (top, middle, bottom). This allows you to present your data in a visually appealing and organized manner.

Moreover, Froala provides the ability to merge and split cells, giving you complete control over the table structure. This flexibility ensures that you can create complex table layouts to best suit your content.

Styling Tables with Froala

One of the biggest challenges with rich-text editors is styling tables. Most WYSIWYG editors don’t provide an easy solution for non-technical users to style their tables.

But Froala has an intuitive approach to table styling. Let’s say you want to create a striped table style. You can add the following CSS rule to your stylesheet:

.class1 tbody tr:nth-child(2n) {

  background: #f9f9f9;

}

This rule will apply a light gray background color to every other row in the table, creating a striped effect.

Next, you can define this new table style in the tableStyles option of the Froala Editor:

new FroalaEditor('div#froala-editor', { 
      // Define new table cell styles 
       tableStyles: {
         class1: 'Stripped',
       }
});

In this example, the key class1 represents the CSS class that will be applied to the table, and the value 'Striped' is the label that will be displayed in the “Table Style” dropdown menu for users to select.

When a user selects the “Striped” option from the dropdown, the class1 CSS class will be applied to the table, resulting in the striped appearance you defined earlier.

This approach allows you, as the developer, to create a range of pre-designed table styles that users can easily apply to their content. By providing these visually appealing options, you empower your users to create professional-looking tables without having to write any custom CSS themselves.

Additionally, you can control whether users can select multiple table styles at once or if they should be limited to a single style. This is done using the tableMultipleStyles option in the Froala Editor configuration.

With Froala’s robust table styling capabilities, content creators can focus on creating high-quality, visually appealing content, without getting bogged down by the complexities of table formatting.

Styling Table Cells with Froala

In addition to styling entire tables, Froala also allows you to apply custom styles to individual table cells. This granular control enables you to highlight specific data, draw attention to important information, or create visually distinct sections within your tables.

To style table cells, Froala provides a “Cell Style” dropdown menu that lets users select from a range of predefined styles. Similarly to “Table Style”, as the developer, you can define these styles using CSS and then expose them in the editor’s interface. This empowers your users to easily apply professional-looking formatting to their content without any coding knowledge.

Let’s say you want to allow users to style some cell text in red so they are highlighted. You can add the following CSS rule to your stylesheet:

.redcell {
   text-align: center;
   color: red;
}

Next, set the tableCellStyles option of the Froala Editor:

new FroalaEditor('div#froala-editor', {
   // Define new table cell styles.
   tableCellStyles: {
     redcell: 'highlight',
   }
})

When a user selects the “highlight” option from the dropdown, the redcell CSS class will be applied to the table cell, resulting in the selected cell text appearing in red.

This flexibility allows users to emphasize important data, create visual hierarchies, and ensure their tables are informative and aesthetically pleasing.

With these powerful table styling capabilities, content creators can craft professional-looking tables that effectively communicate their message and enhance the overall visual appeal of their content.

Benefits of Froala’s Table Styling

Improved Readability and Aesthetics

Froala’s table styling capabilities help create clean, professional-looking tables that enhance the overall appearance and readability of your content. With a range of formatting options, you can ensure a consistent look and feel across your entire document.

This attention to detail results in an enhanced user experience, making it easier for your audience to navigate and digest the information presented in your tables. Well-styled tables can significantly improve the clarity and impact of data-heavy content, whether it’s in a corporate blog, online documentation, or e-commerce product descriptions.

Increased Productivity

Froala’s intuitive table editing tools streamline the content creation process, allowing you to spend less time fussing with table formatting and more time focusing on the substance of your work. The seamless integration of tables with other rich-text elements, such as text, images, and multimedia, further enhances your productivity by enabling a smooth, efficient workflow.

By reducing the development time required for custom table implementations, Froala’s table styling capabilities free up your team to concentrate on higher-value tasks and deliver content to your audience more quickly.

Conclusion

Froala’s innovative approach to table styling in javaScript WYSIWYG editors has solved a long-standing challenge for content creators. By providing an intuitive set of table formatting options and the ability to define custom table styles, Froala empowers users to create professional-looking tables without requiring any specialized technical knowledge.

To experience the benefits of Froala’s table styling firsthand, we encourage you to explore the Froala Editor and integrate it into your next project. With its powerful yet user-friendly table management capabilities, you can elevate the quality and impact of your content, delivering a better experience for your audience.