When building web applications, it is common to include ways for users to work with images and text. A helpful approach is to give users a visual way to write text and then connect it to tools that can handle images, too. One such approach is to combine a visual HTML WYSIWYG editor like Froala with Filestack’s services. Filestack makes it easy to upload images, process them, and even perform Optical Character Recognition (OCR). OCR tries to read text inside images and turn it into editable text. This blog will show how to integrate Froala and Filestack to make this possible. We will keep things simple and to the point, focusing only on what a developer needs to know, without extra marketing language.

What Are Froala and Filestack?

Froala is a visual HTML editor. It allows users to type text, format it, and add images without needing to know HTML tags. It is often used in web forms, blogs, and other places where rich text editing is needed. By using Froala, developers can let end-users create content without having to learn code.

Filestack, on the other hand, is a tool that handles file uploads and different transformations. For example, it can help convert images, resize them, and run OCR to extract text. It is a convenient tool since you do not have to set up your own backend to handle these tasks. You can just call its API from your code.

Why Combine Froala and Filestack?

When building a web app, you might want a single place where users can write text and also add images. That way, they can include images that contain text they want to extract. With Froala as your visual HTML editor, the user can write some notes and upload images right there in the editor. Filestack can then handle the uploaded image, run OCR on it, and return the extracted text. Finally, you can show that OCR text in a separate part of the page or even insert it back into the editor as text.

Basic Requirements

To follow along, you need a working HTML page, access to Froala Editor, and a Filestack account. With Filestack, you will get an API key, and from that, you can set security rules if needed. You will need three important values from Filestack:

1. API Key: This is the main key to interact with Filestack’s services. Get your Filestack API here for free.
2. Policy and Signature: These are security elements. You can generate them to control which Filestack actions are allowed in your application.

Once you have these values, you can load Froala and Filestack scripts into your HTML file and write some JavaScript to tie them together.

Structure of the Code

The example code sets up a Froala editor inside a <div> element with the ID editor. It also includes another <div> with the ID ocrResult. This ocrResult area will show the text that comes from the OCR process. Once the user uploads an image using the Froala editor’s file picker (which is powered by Filestack), we use Filestack’s API to run OCR on the image. If the image has any readable text, we print it in that ocrResult section.

The code loads several scripts:

• Froala Editor CSS and JS
• Filestack JS and Filestack drag-and-drop JS
• Filestack transforms UI JS and CSS

It then creates a new Froala editor instance with certain configuration options. In particular, the filestackOptions object tells Froala to upload images only to Filestack. When a file is successfully uploaded, a filestack.uploadedToFilestack event is triggered. We listen for this event and, once it fires, we grab the handle of the uploaded file from the response. The handle is a unique identifier for the file on Filestack’s servers.

Using this handle, we form an OCR URL. This URL includes the API key, policy, signature, and the ocr conversion call. When we fetch that URL, Filestack returns a JSON object containing the recognized text. We extract the text and place it into the ocrResult area.

Below is a code sample that shows how to integrate a visual HTML editor (Froala) with Filestack’s OCR capability. It uses a basic HTML page with Froala’s editor, Filestack scripts, and a bit of JavaScript to tie them together. Make sure to replace the API_KEY, POLICY, and SIGNATURE values with your own from Filestack.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Froala + Filestack + OCR</title>

  <!-- Load Froala Editor CSS -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />

  <!-- Load Filestack File Picker JS & CSS -->
  <script src="https://static.filestackapi.com/filestack-js/3.32.0/filestack.min.js"></script>       
  <script src="https://static.filestackapi.com/filestack-drag-and-drop-js/1.1.1/filestack-drag-and-drop.min.js"></script>

  <!-- Load Filestack Transformation UI JS & CSS -->
  <script src="https://static.filestackapi.com/transforms-ui/2.x.x/transforms.umd.min.js"></script>
  <link rel="stylesheet" href="https://static.filestackapi.com/transforms-ui/2.x.x/transforms.css" />

  <!-- Load Froala Editor JS -->
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/js/froala_editor.pkgd.min.js"></script>

  <style>
    #editor {
      margin-top: 20px;
    }
    #ocrResult {
      margin-top: 20px;
      padding: 10px;
      border: 1px solid #ccc;
      white-space: pre-wrap;
      font-family: monospace;
    }
  </style>
</head>
<body>
  
  <h1>Froala Editor with Filestack OCR Integration</h1>

  <!-- Froala Editor Container -->
  <div id="editor"></div>

  <!-- OCR Result Container -->
  <div id="ocrResult">OCR Result will appear here after image upload...</div>

  <script>
    // Replace with your Filestack credentials:
    const API_KEY = 'YOUR_FILESTACK_API_KEY';
    const POLICY = 'YOUR_FILESTACK_POLICY';
    const SIGNATURE = 'YOUR_FILESTACK_SIGNATURE';
    
    new FroalaEditor('#editor', {
      filestackOptions: {
        uploadToFilestackOnly: true,
        filestackAPI: API_KEY
      },
      events: {
        'filestack.uploadedToFilestack': function (response) {
          console.log("File uploaded to Filestack:", response);

          const fileData = response.filesUploaded && response.filesUploaded[0];
          const handle = fileData && fileData.handle;

          if (!handle) {
            document.getElementById('ocrResult').textContent = 'Could not find a handle for the uploaded file.';
            return;
          }

          // Build OCR URL
          const ocrUrl = `https://cdn.filestackcontent.com/${API_KEY}/security=p:${POLICY},s:${SIGNATURE}/ocr/${handle}`;

          // Fetch OCR result
          fetch(ocrUrl)
            .then((res) => {
              if (!res.ok) {
                throw new Error(`HTTP error! Status: ${res.status}`);
              }
              return res.json();
            })
            .then((ocrResult) => {
              const ocrText = ocrResult.text || 'No text found';
              document.getElementById('ocrResult').textContent = ocrText;
            })
            .catch((error) => {
              console.error('Error with OCR:', error);
              document.getElementById('ocrResult').textContent = `Error: ${error.message}`;
            });
        }
      },
    });
  </script>
</body>
</html>

Step-by-Step Explanation

1. Set up the HTML structure:
   You create a basic HTML page with two main parts. The first part is the editor area, where Froala will be placed. The second part is a separate <div> where the OCR text will appear.
2. Load the scripts and styles:
   Include the CSS and JS files for Froala and Filestack. Doing this from a CDN is the simplest. Your <head> section might have several <link> and <script> tags that import Froala and Filestack code.
3. Initialize the Froala Editor:
   After the page loads, you create a new Froala editor instance by calling new FroalaEditor('#editor', { ... }). Inside this object, you can set various options. One important option is filestackOptions. By giving Froala the filestackAPI and setting uploadToFilestackOnly: true, you direct all uploads to Filestack.
4. Handle the Uploaded Event:
   Froala’s events allow you to run code after an image is uploaded. For this, you use the filestack.uploadedToFilestack event. In the code, there is a callback function that runs when the event fires. Inside that function, we look at response.filesUploaded[0].handle. This handle is a string that identifies the uploaded file on Filestack’s storage. If we have that handle, we can move on to the OCR step.
5. Call the OCR Endpoint:
   We build a URL that looks like this:
   https://cdn.filestackcontent.com/yourApiKey/security=p:yourPolicy,s:yourSignature/ocr/fileHandle
   When we fetch this URL, Filestack tries to perform OCR on the file. If OCR is possible, it returns a JSON object with a text field. If it cannot find any text, it might return a message that no text was found.
6. Show the OCR Result:
   Once we get the OCR text, we set document.getElementById('ocrResult').textContent = ocrText;. This replaces the placeholder text with the actual recognized text. If there was an error, we show an error message.

Working With the OCR Text

After you have extracted the text from the image, you can decide what to do with it. In this simple example, we only show it below the editor. But you could do more:

• Insert the OCR text back into the editor so the user can edit it.
• Store the OCR text in a database.
• Send the OCR text somewhere else in your application.

The main idea is that you now have machine-readable text from an image that was uploaded through a visual HTML editor.

Common Problems and Tips

1. Missing API Key or Security Information:
   Make sure to replace API_KEY, POLICY, and SIGNATURE in the code with your own values from Filestack. If these are missing or wrong, the OCR call will fail.
2. Browser Console Errors:
   If something does not work, open the browser’s JavaScript console. Check for error messages. Common issues include wrong URLs, missing files, or network errors.
3. No Text in Images:
   OCR works best on images that have clear, readable text. If the image contains handwritten notes or very small text, OCR might fail or return no text. Try using images with printed text for the best results.
4. Performance:
   For large images, OCR can take a few seconds. During this time, do not assume that the application has frozen. Wait for the promise to resolve and handle both success and error cases.

Why This Matters

In many web apps, users want to share images that contain text. For example, a teacher might scan a page from a textbook or a student might upload notes written on a whiteboard. By combining a visual HTML editor with Filestack’s OCR, you can make that text searchable and editable right inside your web application. This can save time and make your content more dynamic.

Conclusion

Integrating a visual HTML editor like Froala with Filestack’s OCR feature is not hard. With a few lines of code, you can add a feature where users upload images and get back machine-readable text. This text can then be displayed, edited, or stored as needed. The code example provided is a good starting point. From here, you can adjust the logic, handle errors more gracefully, or improve the UI. But at its core, this shows how simple it can be to bring text recognition into a web app’s workflow.

Remember to test with different images. Also, keep security in mind and do not expose secret keys on the client side if possible. With these steps, you can create a more useful and user-friendly web editing experience.

Get your Filestack API here for free.

Overview of WYSIWYG HTML editors 

Let’s face it, not everyone is a developer, and not everyone who wants to have a website wants to delve deep into coding either. So how do we create a beautiful web page and leave our mark on the world wide web without the tedious process of coding everything? Don’t fret, since there’s an easier and less complicated way to edit your web pages without having to become an expert programmer or coder. Unlike coding wherein you generally just type your code and don’t see visual feedback of your work, WYSIWYG editors show the changes in real time. WYSIWYG editors tremendously make it easier to develop HTML pages without needing a lot of knowledge on coding or browsing through the documentation for hours. Of course, knowing the basics would tremendously help but you don’t have to be an expert to utilize this tool.
A WYSIWYG HTML editor lets users create and edit web pages visually without coding. Users can drag and drop elements onto a virtual canvas with a user-friendly interface, much like Canva. The editor generates the HTML code automatically, which can be edited manually if needed.

Defining HTML Editing Tool

HTML editing tools simplify development by streamlining the writing and organization of code. They automate repetitive tasks such as formatting and error checking, with syntax highlighting and suggestions. Features include auto-completion, code snippets, and validation, which optimize web pages for speed, accessibility, and SEO. Integration with other development tools and services, such as version control, code repositories, and CMS, helps reduce time and effort required for web page creation and management.

Types of HTML Editors

There are two main types of HTML editors. The text-based editors and graphical or WYSIWYG editors.
Code editors, also known as text-based editors, allow developers to write HTML code directly without a visual interface. Popular examples are Sublime Text, Atom, and Visual Studio Code. While they used to be the conventional way of editing code, the growing popularity and ease of use of graphical editors have made them less preferred by many developers.
Advantages of text-based editors:

• Text-based editors offer greater control and flexibility over the HTML code, allowing developers to write cleaner and more efficient code.
• They can be lightweight and faster than graphical editors, making them ideal for working on large projects.
• These editors can integrate with other development tools, such as version control systems and code repositories.

Graphical or WYSIWYG editors are for developers who prefer a visual interface for creating and editing HTML code. They provide a user-friendly interface where developers can create web pages by dragging and dropping elements or by simply clicking buttons. Popular graphical editors include Adobe Dreamweaver, Setka Editor, CoffeeCup HTML editor, and Froala.
Advantages of graphical editors:

• They are easy to use, even for developers who are not familiar with HTML code.
• These editors can save time and effort by automating many of the repetitive tasks involved in web development.
• Graphical editors offer a visual preview of the web page as it will appear in a web browser, allowing developers to see the results of their work in real-time.

Each type of editor offers unique advantages, and neither is superior. Users should choose an editor based on their project’s specific needs and their development style. Some editors offer both types, allowing for simultaneous use of both. Using one editor type does not restrict users to that editor alone.

Why Use WYSIWYG HTML Editor?

A WYSIWYG HTML editor offers advantages such as increased productivity, reduced coding errors, and a more efficient workflow. While text-based editors may offer more control over the project, graphic editors like WYSIWYG HTML editors can help developers work on projects more efficiently.

1. Increased productivity: WYSIWYG editors boost productivity with their user-friendly interface, which lets developers drag and drop page elements easily without writing HTML code. They also offer templates and pre-built components that speed up development.
2. Reduced coding errors: Automating repetitive tasks reduces coding errors in WYSIWYG editors. HTML code is automatically generated for elements like tables and forms. Syntax highlighting and code validation help developers quickly identify errors.
3. Efficient workflow: A visual preview of the web page in a browser or mobile device streamlines the development process, enabling real-time results without switching back and forth between editor and browser. Collaboration tools also facilitate teamwork.

Standard Features of a WYSIWYG HTML Editor

There are a few core features of a WYSIWYG HTML editor which most editors have. These features vastly improve efficiency and optimize the development process.
Here are a few of them:

• Drag-and-drop interface: Developers can save time using user-friendly interface of WYSIWYG editors, where they can simply drag and drop elements onto the web page without switching back to the text-based editor to see the location of the element needed.
• Pre-built components: Pre-built components such as forms, tables, and buttons are readily available in many WYSIWYG editors, which makes it convenient for developers to insert these elements onto the web page. This saves time and effort as developers don’t have to create these elements from scratch repeatedly.
• Visual preview: A lot of WYSIWYG editors offer a visual preview as it will appear in the browser. This allows developers to see the results of their work.
• Code validation: Another common feature found in WYSIWYG editors is code validation and syntax highlighting. This helps developers identify and fix errors quickly which further reduces debugging time.
• Collaboration tools: Some WYSIWYG editors include collaboration tools that make it easier for developers to collaborate and work together on a project. This helps streamline communication between developers and optimize the workflow of the team.

Responsive design: To ensure accessibility and user-friendliness on any device, websites must be responsive to different screen sizes and resolutions. With the increase in mobile device usage, it is crucial for web pages to be optimized for mobile viewing.

10 Best WYSIWYG HTML Editor To Streamline Your Workflow

There are many WYSIWYG HTML editors out there but here is a list of the popular ones both for beginners and advanced users alike.

1. Adobe Dreamweaver: Dreamweaver has a user-friendly interface and supports multiple programming languages, including HTML, CSS, and JavaScript. It also offers various built-in tools for editing text, images, and videos, along with features such as code hinting, live preview, and auto-complete. Additionally, it’s great for creating responsive web pages and can be customized to fit specific use cases.
2. BlueGriffon: BlueGriffon is good at creating responsive web designs and offers a large variety of built-in tools for editing text, images, and videos. BlueGriffon also includes features such as spell-checking, a built-in CSS editor, and support for EPUB documents.
3. CoffeeCup HTML Editor: CoffeCup HTML Editor, like many others, offers a user-friendly interface and support for multiple programming languages. This editor includes features such as code completion, FTP client, and built-in validation tools.
4. Mobirise: This free editor is made for building small to medium websites. It is quite easy to use so beginners would immediately be able to familiarize themselves with it. It also easily integrates with Google Analytics and can create AMP (Accelerated Mobile Pages) pages.
5. Froala: Our very own Froala is also quite adept at customizing web pages with its simple interface. It has a clean and modern interface which makes it easy for beginners and experienced developers alike. It is also compatible with all major web browsers and offers a wide range of tools for editing and formatting text including lists, tables, and more.
6. TinyMCE: This editor is designed to be embedded into web applications. It is highly customizable, allowing developers to tailor it to their own specific needs. It is also optimized for mobile devices which makes it easy to use on smartphones and other devices.
7. Setka Editor: Setka Editor is a visual editor that also allows users to drag and drop elements without needing to code. It includes a library of customizable design elements such as typography, graphics, and animations which developers can easily add to their design.
8. CKEditor: A very versatile editor which allows users to create Word-like documents, reports, emails, and even chat messages. It takes advantage of seamless UX and modern UI with lots of productivity features like mentions, auto-formatting, spell-checking, and copy-pasting from applications like MS Word.
9. Editor.js: Editor.js is a free block-based editor which organizes its content into blocks such as headings, paragraphs, images, and quotes.
10. Quill: Last but not the least, Quill is a free and open-source WYSIWYG text editor. It is completely customizable because of its modular architecture and expressive API.

Overview: When/Where is it best for?

Now that we know a few of these editors, let’s discuss when should they be used for. 

1. Adobe Dreamweaver: Expert users familiar with advanced tools like Adobe Dreamweaver can easily use it. It is also a preferred choice for long-term Dreamweaver users.
2. BlueGriffon: BlueGriffon’s unique feature is its ability to edit EPUB files and it has add-ons to improve its basic features.
3. CoffeeCup HTML Editor: CoffeeCup HTML Editor has a large library of templates and is suitable for those who prefer many design options before choosing.
4. Mobirise: Mobirise is designed for non-technical users who don’t want to code. However, professional developers can also use it, especially if they prefer not to see or work with code.
5. Froala: Froala complements existing editors, like WordPress, and is easy to integrate with other applications with a lightweight customization interface.
6. TinyMCE: TinyMCE is great for developers who need a rich text editor on their web pages, especially those with accessibility features for users with disabilities.
7. Setka Editor: Setka Editor allows non-coders to create responsive, visually-rich content, while also offering high customization and control over design.
8. CKEditor: CKEditor is ideal for web pages with text-heavy content, making it useful for blogs, news sites, and other text-based content.
9. Editor.js: Editor.js is a block-based editing tool that makes it easy to position and align elements on the page, making it great for text-heavy content.
10. Quill: Quill with its flexible formatting tool excels in editing text.

Special features

These editors have some pretty unique features that others don’t have. Knowing these special features would be beneficial in choosing what’s right for you.

1. Adobe Dreamweaver: Adobe Dreamweaver integrates into the Adobe Creative Cloud suite, making it efficient for users who already use other Adobe products.
2. BlueGriffon: BlueGriffon offers a live preview and a range of add-ons, including templates, stylesheets, and dictionaries, allowing easy addition of extra functionality to web pages. Its integrated CSS editor eliminates the need to switch to another program.
3. CoffeeCup HTML Editor: CoffeeCup HTML Editor has a wide range of choices and a Components Library to update certain elements everywhere, saving time for developers
4. Mobirise: Mobirise supports Accelerated Mobile Pages (AMP) and has a built-in e-commerce feature, making it suitable for shop owners who want to transition their sales online. The offline version allows developers to work on projects without an internet connection.
5. Froala: This tool allows easy embedding of videos. Froala’s mobile-first approach to design makes it easy for developers to create responsive web pages which can easily be viewed on virtually any device. You can also edit conveniently with a sticky toolbar attaching it anywhere on your canvas.
6. TinyMCE: TinyMCE is designed with accessibility in mind, with features like WAI-ARIA support and keyboard shortcuts for users with disabilities.
7. Setka Editor: Setka Editor has collaboration tools and built-in analytics, making it useful for teams working together.
8. CKEditor: CKEditor has several text-based features, including spell-checking, auto-formatting, and copy-pasting, as well as tracking changes, revision history, and comments.
9. Editor.js: Editor.js has collaborative editing, screen reader support, and keyboard navigation, making it very accessible.
10. Quill: Quill’s flexible formatting supports a wide range of text formatting options.

Pros and Cons

These editors may specialize in certain things which means they may be good at some things and might be lacking in others. Here are some pros and cons of each editor.

1. Adobe Dreamweaver: Adobe Dreamweaver easily integrates with other Adobe products, supports multiple programming languages, and allows for customization. However, its high cost and steep learning curve may intimidate some users.
2. BlueGriffon: BlueGriffon is user-friendly, supports multiple programming languages, and can edit EPUB documents. Some features require a license, such as its EPUB tool. However, it lacks integration with other web development tools, has limited features, and its lack of support and documentation may deter users.
3. CoffeeCup HTML Editor: CoffeeCup HTML Editor offers graphic elements and templates, and its component library saves time by updating menus, footers, and headers simultaneously. However, it is less recognized than other editors.
4. Mobirise: Mobirise is beginner-friendly and minimalistic, making it easy for non-coders to develop web pages. However, its lack of customization may not appeal to users who want to tweak their projects.
5. Froala: Our editor offers a wide range of tools for editing and integrating Froala into a web application is easy. The editor itself can also be customized to fit specific use cases. With the help of plugins, the user can further customize their Froala editor to suit their specific needs.
6. TinyMCE: Embedding TinyMCE into web applications is easy due to its versatility. Additionally, it is accessible to users with disabilities, but advanced features may require programming knowledge.
7. Setka Editor: With a vast library of design elements, Setka Editor allows developers to create visually-rich content without coding. However, it may not integrate well with other tools compared to other products on this list.
8. CKEditor: CKEditor offers accessibility and customization features. It is also versatile, capable of editing word documents and instant messaging applications.
9. Editor.js: Collaboration tools are provided by Editor.js to streamline teamwork. It is highly customizable, but primarily focuses on text-based content editing, which may be challenging for intricate visual designs.
10. Quill: Quill’s flexible formatting options make it easy to use with a wide range of customizability. Its user interface is intuitive, but primarily used for editing text-based content, which may not be optimal for visual designs.

Comparison of the best WYSIWYG HTML editors

Things To Consider in Choosing a WYSIWYG HTML editor

Choosing the right editor is crucial since it’s where you’ll be spending most of your editing time. If the tool doesn’t suit your needs or style, it can hinder your development process. When selecting a WYSIWYG HTML editor, several critical factors should be taken into account:

1. Ease of use: Ease of use is one of the most important factors to consider when choosing a graphical editor over a text-based one. If the editor is difficult to use, it may be worth reconsidering your choice to find one that is more intuitive and easy to navigate.
2. Features and capabilities: Another important factor in making your choice is the editor’s features and capabilities. Look for an editor that has a specific feature that you need for your specific project.
3. Customizability: Try to know how customizable your chosen editor is. Having the ability to edit the interface, add certain plugins, and create custom templates or stylesheets could be essential to your project.
4. Cross-platform compatibility: Ensuring cross-platform compatibility is vital for projects to be accessible on multiple platforms as the number of choices available to users is increasing rapidly over time.
5. Support and documentation: Developers understand the importance of a well-documented application, but non-developers also benefit from it. As you continue developing your project, you will encounter problems that require looking into the application’s documentation or the community for solutions. Good support and documentation lead to faster debugging and error fixing.
6. Price: Finally, when choosing an editor or any product, price is often a key consideration. While many free options are available, more advanced editors may require a paid subscription or a one-time purchase. Free software can come at a cost, as it may have limited features designed to encourage users to upgrade to the premium version.

Conclusion

WYSIWYG HTML editors can be a valuable tool for developers and non-technical designers to create visually stunning web pages easily. It’s important to choose the right editor and be aware of its limitations to match your style and project’s needs. They simplify the process of creating and editing web pages, allowing developers to focus on visual design rather than worrying about the code.

What if your WYSIWYG editor could automatically ensure every image looked just right? Smart cropping is a feature that makes it possible. It can automatically crop any unwanted parts of an image while keeping the most important parts. This makes smart cropping highly valuable for applications that constantly deal with image uploads and processing, such as blogs and social media platforms. However, implementing smart cropping from scratch is not always the best course of action. That’s why in this guide, I’ll show you how you can quickly implement smart cropping in your WYSIWYG HTML editor.

Key Takeaways

• Smart cropping is an important part of image-heavy applications
• Smart crop an image to focus on specific objects within it while reducing its size
• Quickly implement smart cropping with Froala WYSIWYG editor and Filestack
• Change detection modes (face, object, auto) as needed using Filestack
• Smart cropping ensures consistency, efficiency, and better control

What is Smart Cropping?

Smart cropping is a fairly novel feature in applications that automatically adjusts the size of your image. What makes this different from regular dynamic cropping is that it can focus on the main object of the photo. With it, developers don’t have to specify coordinates to determine the cropping area. Instead, they can just specify a size and let smart cropping do its job. This makes it perfect for applications such as blogs, CMS, LMS, and social media platforms.

For example, you can implement smart cropping for profile pictures. When a user uploads a photo, an application with smart cropping can focus on the user’s face while automatically resizing the image. This process is much faster than having the user manually crop and focus the image. Note, however, that you should still put an option for the user to manually crop images in case. Now, let’s check how we can implement this powerful feature in WYSIWYG editors.

How to Implement Smart Cropping within a WYSIWYG Editor

Setting up Your WYSIWYG Editor

First, we’ll need to initialize our editor. To do this, add the following code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Smart Crop Using Froala and Filestack</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <link href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="https://static.filestackapi.com/transforms-ui/2.x.x/transforms.css" />
</head>

<body>
    <div class="container-fluid vh-100">
	<div class="row h-100">
            <div class="col-md-6 mx-auto my-auto">
                <div id="froala-editor"></div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
    <script src="https://static.filestackapi.com/filestack-js/3.32.0/filestack.min.js"></script>
    <script src="https://static.filestackapi.com/filestack-drag-and-drop-js/1.1.1/filestack-drag-and-drop.min.js"></script>
    <script src="https://static.filestackapi.com/transforms-ui/2.x.x/transforms.umd.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js"></script>
    <script src="js/index.js"></script>
</body>
</html>

The only important parts here are loading the Froala and Filestack libraries and creating the div element that will contain the editor. After creating your HTML, insert the following code to your JavaScript:

new FroalaEditor('#froala-editor',{
    filestackOptions: {
        filestackAPI: 'YourFilestackAPIKey',
        uploadToFilestackOnly: true,
        pickerOptions: {
            accept: ['image/*'],
            fromSources: ['local_file_system']
        }
    },
    toolbarButtons: {
        'moreRich': {
            'buttons': ['openFilePickerImageOnly', 'insertLink', 'insertTable', 'emoticons', 'specialCharacters', 'insertHR'],
            'buttonsVisible': 3
        },
        'moreText': {
            'buttons': ['bold', 'italic', 'underline', 'fontFamily', 'fontSize', 'textColor', 'backgroundColor', 'clearFormatting']
        },
        'moreParagraph': {
            'buttons': ['alignLeft', 'alignCenter', 'formatOLSimple', 'alignRight', 'alignJustify', 'formatOL', 'formatUL', 'paragraphFormat', 'paragraphStyle', 'lineHeight', 'outdent', 'indent', 'quote']
        },
        'moreMisc': {
            'buttons': ['undo', 'redo', 'fullscreen', 'selectAll', 'html', 'help'],
            'align': 'right',
            'buttonsVisible': 2
        }
    },
    events: {
        'filestack.uploadedToFilestack': function (response) {
        },
        'filestack.uploadFailedToFilestack': function (response) {
            console.log(response);
        },
    },
    heightMin: 500,
    heightMax: 1000
});

This declares a FroalaEditor instance in the div element that we created earlier. Furthermore, consider the editor’s properties, in which we state Filestack’s options and Froala’s toolbar buttons, events, and size. For the options, set your API key, which you can get by creating a free Filestack account. Additionally, set the picker options that best fit your needs. When you run the application with this setup, you will see the Froala editor with the Filestack file picker icon. At this point, the editor is ready to leverage Filestack’s image transformation features—but enabling smart cropping requires one more step.

Adding Smart Crop Logic

The next step is to add the logic for smart cropping. This is achieved through Froala’s “events” property, specifically using the ‘filestack.uploadedToFilestack‘ event. This event is triggered after a successful upload, allowing you to process the uploaded image further.

const originalFileURL = response.filesUploaded[0].url;
const croppedFileURL = `https://cdn.filestackcontent.com/smart_crop=width:400,height:400/${originalFileURL}`;
const editor = FroalaEditor.INSTANCES[0];
editor.image.insert(croppedFileURL, true, { link: croppedFileURL, alt: 'Cropped Image' });
console.log("Cropped image inserted:", croppedFileURL);

In the code, the first line extracts the URL of the uploaded image from the response object. Next, we generate the URL of the cropped image using Filestack’s Smart Crop transformation. Here, we must specify the dimensions of the resulting image (in this case, 400×400 pixels). Moreover, we can specify additional options for the process, such as the cropping mode (face, object, or auto). Finally, we insert the cropped image back into the editor using the “editor.image.insert” method. With this logic in place, your WYSIWYG editor not only supports image uploads but also smart cropping, enhancing efficiency and precision.

Testing the Smart Crop Feature within the WYSIWYG Editor

Let’s test Froala and Filestack’s smart crop feature. Run the application, and you should see the editor with the Filestack icon. Click on the icon and upload an image through Filestack. Afterwards, you should see both the unprocessed photo (which we’ve kept for comparison) and the cropped version. Here’s a quick demo of the smart crop feature:

In the GIF above, I uploaded a landscape image of a cat. After uploading it, Filestack’s smart crop was able to keep the most important part of the image, generating a 400×400 cropped version. Note that the unprocessed image also remained because Filestack doesn’t overwrite it. From here, you can customize the smart cropping experience further. For instance, you can clear the unprocessed image and store the URL of the processed version. If you’re building a social media platform, you can also customize smart cropping to focus more on faces instead of objects. You can even chain this with other Filestack processing tasks, such as NSFW scanning, virus detection, image enhancements, and more using Filestack Workflows.

Wrapping up: Smarter Tools for Smarter WYSIWYG Editors

Smart cropping is a vital and modern feature for content-centric applications. Thus, developers can benefit from learning how to integrate this feature in different applications. Doing so is not always straightforward, but with the right tools, you can implement smart cropping in a matter of minutes. With smart cropping seamlessly integrated into your WYSIWYG editor, the possibilities for customization and enhancement are endless. Whether you’re building a social media platform or a content management tool, smart cropping helps promote efficient workflows and user-friendly experiences. Get your Filestack API here. Happy coding!

Optical character recognition, or OCR, is one of the best tools for enhancing productivity today. Because of its ability to recognize text from images and documents, it minimizes the need for manual encoding. Nowadays, organizations use OCR on a daily basis, from reading IDs, passports, and licenses to obtaining important data from office documents. In the context of WYSIWYG editors, incorporating OCR can enhance functionality, allowing users to extract text directly from uploaded files. In this guide, we’ll implement OCR features within a WYSIWYG HTML editor to get all text from a business card.

Key Takeaways

• Easily obtain textual information from photos or PDFs using OCR
• Use Froala and Filestack to implement OCR in a few minutes
• Generate both a policy and a signature in your Filestack dashboard to start using OCR
• Recognize and process both handwritten and printed text with Filestack OCR
• Seamlessly customize your OCR implementation according to your needs

What is OCR?

OCR refers to the recognition and conversion of text in images or other documents into an electronic version. For example, a school-focused app can use OCR to “read” the contents of test papers to automate grading in examinations. And yes, OCR usually supports both handwritten and printed text. Its versatility and usefulness make OCR an essential tool for improving efficiency and reducing human error. And with advancements in machine learning, OCR can become increasingly accurate, making it a reliable choice for tasks that require efficient text extraction and processing.

Although OCR is a great feature to have in modern applications, developers might find it difficult or tasking to implement. In a professional setting where you’re pressed for time, making your own OCR engine is not recommended. If you have the time and resources to do so, if you enjoy building projects from scratch, and if you have a good machine learning and image processing background, you can. However, the fastest and safest way to go is by integrating an existing OCR solution. In the next section, I’ll show you how to do that using a WYSIWYG editor.

How to Implement OCR in a WYSIWYG Editor

To implement OCR features within an editor, we’ll need Froala WYSIWYG editor (at least version 4.3) and the usual web tools. Froala v4.3 comes integrated with Filestack, a powerful file upload and transformation tool that supports OCR. First, let’s create our view and initialize the editor.

HTML Setup

In your HTML file, include the following code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>OCR Using Froala and Filestack</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <link href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="https://static.filestackapi.com/transforms-ui/2.x.x/transforms.css" />
</head>

<body>
    <div class="container-fluid vh-100">
	<div class="row h-100">
            <div class="col-md-6 mx-auto my-auto">
                <div id="froala-editor"></div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
    <script src="https://static.filestackapi.com/filestack-js/3.32.0/filestack.min.js"></script>
    <script src="https://static.filestackapi.com/filestack-drag-and-drop-js/1.1.1/filestack-drag-and-drop.min.js"></script>
    <script src="https://static.filestackapi.com/transforms-ui/2.x.x/transforms.umd.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js"></script>
    <script src="js/index.js"></script>
</body>
</html>

In the code above, we load the necessary Froala and Filestack dependencies through CDN and create our containers. Next, we’ll want to load the editor into the innermost container. To do so, let’s include the code below in our JS file:

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

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

        'moreParagraph': {
            'buttons': ['alignLeft', 'alignCenter', 'formatOLSimple', 'alignRight', 'alignJustify', 'formatOL', 'formatUL', 'paragraphFormat', 'paragraphStyle', 'lineHeight', 'outdent', 'indent', 'quote']
        },
        'moreMisc': {
            'buttons': ['undo', 'redo', 'fullscreen', 'selectAll', 'html', 'help'],
            'align': 'right',
            'buttonsVisible': 2
        }
    },
    events: {
        'filestack.uploadedToFilestack': function (response) {
            performOCR(response.filesUploaded[0].url, this);
        },
        'filestack.uploadFailedToFilestack': function (response) {
            console.log(response);
        },
    },
    heightMin: 500,
    heightMax: 1000
});

Note that when initializing the editor, we also declare some options that let us customize it. For example, we have options for the editor’s height, toolbar buttons, and more importantly, Filestack options and events. By declaring the Filestack options, we enable Filestack uploads, transformations, and advanced tasks within the editor. In our picker options, we specify images and PDFs from our local file system as the only files that we’ll allow. By the way, make sure to replace the “filestackAPI” part with your actual one. You can get it by creating a free Filestack account.

Additionally, consider the “events” options of the editor. In it, we declare some callback functions for upload success and failure. Whenever a successful upload occurs, we also call a function called “performOCR” to start the text recognition process. But before we delve into that, let’s first generate a policy and a signature for your application.

Getting Your Policy and Signature

Log into your Filestack account and access your dashboard. Click the “Security” tab, followed by “Policy & Signature.” Set an expiration date and enable all permissions, and Filestack will automatically generate your policy (in both JSON and Base64 formats) and signature.

Processing the Uploaded File Using Filestack OCR

Once you obtain your policy and signature, go back to your JS file and add the “performOCR” and “fetchOCR” functions:

async function performOCR(fileURL, editorInstance) {
    try {
        // Append the OCR transformation to the Filestack URL
        const policy = 'policy';
        const signature = 'signature';
        const ocrURL = `https://cdn.filestackcontent.com/security=policy:${policy},signature:${signature}/ocr/${fileURL}`;

        // Fetch OCR result from Filestack API
        const ocrResult = await fetchOCR(ocrURL);

        // Insert the extracted text into the Froala editor
        editorInstance.html.insert(`<p>${ocrResult}</p>`);

        console.log("OCR result inserted into the editor:", ocrResult);
    }
    catch(error) {
        console.error("Oops, an error occurred: ", error);
    }
}

async function fetchOCR(ocrURL) {
    const response = await fetch(ocrURL);

    if (!response.ok) {
        throw new Error("Failed to fetch OCR results.");
    }

    const data = await response.json();
    return data.text || "No text detected.";
}

The first function above calls the Filestack OCR API and inserts the result into the editor. We first declare our policy (Base64 format) and signature (Hex format), and then we generate the URL that we’ll call afterwards. To fetch a result from the Filestack API, we use another function that in turn waits for a result from Filestack and returns the text part of the result. Once we get the text part, we’ll insert it into the editor. This is a very basic implementation, but it should help you get started with taking your application to the next level through OCR. But we’re not done yet! Let’s run our application and see it in action.

Testing the OCR-WYSIWYG Editor Application

To test our OCR app, let’s try uploading two images. The first one is a sample business card, while the other is a picture of a piece of paper with both handwritten and printed text. Let’s start by uploading the business card:

The business card has the usual information, including the name, position, phone number, email, website, and company name of a person. Click the Filestack icon and upload the image of the business card (or any other image that has text). You should see the screen above. Click “Upload,” and the application will display the uploaded image together with the text that Filestack OCR acquired from it. Here’s how it should appear:

The editor now displays all the information from the card, including the company name from the logo. If we check our console, we can also see the same information. Now, let’s test this for handwritten text:

After selecting the image (that has a WebP format), click the upload button, and you should see something like the screen below:

We now have both images, together with the text contained within them, in our editor! From here, you can process the text data from uploaded images as needed.

Implement OCR in Your WYSIWYG Editor Today

Including OCR features in your WYSIWYG editor not only enhances functionality but also opens up new possibilities for automation and productivity. With tools like Froala and Filestack, you can quickly integrate OCR into your applications without a machine learning background. You can even customize the OCR process with Filestack Workflows, which allows you to chain other tasks like document detection or NSFW detection. Whether you’re digitizing business cards, processing forms, or extracting insights from handwritten notes, OCR adds value to any text-based workflow. So, why wait? Implement OCR in your editor today to minimize manual effort, promote efficiency, and give your users the application that they need.

Get your Filestack API here for free.