Markdown is a lightweight markup language used for formatting and structuring plain text. It provides a way to create rich text content, such as headings, bold text, italics, code blocks, and lists without the need for complex HTML.

Markdown was born in the early 2000s, drawing inspiration from markup languages that had surfaced a decade earlier. These markup languages were initially used for emails and web posts during the early days of the Internet’s rise to popularity.

Markdown is especially popular in web development, documentation, and content creation.

Froala Markdown Plugin serves as a powerful tool, enabling seamless integration of Markdown capabilities into your web applications. This provides a user-friendly and efficient method for formatting content.

In this guide, we will explore how to use the Froala Markdown Plugin and provide detailed examples of Markdown features. We will cover the following Markdown elements:

• Headings
• Bold Text
• Italic Text
• Blockquotes
• Ordered Lists
• Unordered Lists
• Code
• Fenced Code Blocks
• Horizontal Rules
• Links
• Images
• Tables
• Footnotes
• Strikethrough
• Task Lists

Markdown button

In Froala, the Markdown button is the default on the toolbar. But you can customize the buttons on the toolbar and to include this option you must use the following code.

toolbarButtons: [...,'markdown',...]

Headings

Markdown headings are created using hashtags (#). Headings are essential for structuring your document and making it more readable. They allow you to create sections. Markdown provides an intuitive way to define headings using the hashtag symbol (#).

There are multiple levels of headings, and the number of symbols determines the heading level.

# Heading 1

## Heading 2

Heading 3

Bold and Italic Text

Markdown provides a straightforward way to format text as bold and italic.

These formatting styles are commonly used for emphasizing text in documents.

To make text bold in Markdown, you can enclose the text in double asterisks (**):

This is **bold** text.

Italicized text is created by enclosing the text in single asterisks (*):

This is *italic* text.

Blockquotes

Blockquotes in Markdown allow you to visually set apart and emphasize text, making it clear that the content is a quotation or excerpt from another source. They help improve the readability and structure of t documents.

Markdown uses the greater-than sign (>) to create blockquotes.

> This is a blockquote.

Ordered and Unordered Lists

Ordered lists are created using numbers followed by periods. Each list item should start with a number, and Markdown will take care of numbering automatically:

1. Item 1
2. Item 2
3. Item 3

Unordered lists are created using asterisks (*), plus signs (+), or hyphens (-) as list markers. Markdown will format them as bullet points:

* Item 1

* Item 2

* Item 3

Inline Code and Fenced Code Blocks

In Markdown, you can easily include code snippets and code blocks using backticks (`) and fenced code blocks. These features are useful for documenting code and sharing programming examples.

To format text as inline code, enclose the code within backticks (`).

Inline code is typically used for short code snippets or referencing code elements within sentences or paragraphs.

This is `inline code`.

Fenced code blocks are used to display longer code snippets, complete code examples, or multiline code.

They are enclosed by triple backticks ( “`), and you can specify the programming language for syntax highlighting immediately after the opening backticks.

“`

// This is a fenced code block

function example() {

console.log(‘Hello, World!’);

}

“`

Horizontal Rules

Horizontal rules, also known as horizontal lines or thematic breaks, are used in Markdown to separate content visually.

They are an effective way to create visual divisions within your text. Horizontal rules are often used to denote changes in topics, sections, or content breaks.

To create a horizontal rule in Markdown, use three or more hyphens (—), asterisks (***), or underscores (___) on a separate line:

Links and Images

In Markdown, you can create hyperlinks and embed images in your text using an intuitive syntax. This makes it easy to add links to external websites, and internal resources, and include images within your Markdown documents.

To create hyperlinks in Markdown, you typically use the following format:

Link Text: This is the text that will be displayed as a clickable link.

URL: This is the web address or destination to which the link points.

Markdown allows you to create hyperlinks by enclosing the link text in square brackets ([]) and the URL in parentheses (()):

[Froala](https://froala.com)

Markdown allows you to embed images within your documents using a similar syntax to links. The primary difference is that you precede the URL with an exclamation mark (!).

Alt Text: This is a description of the image. It’s used for accessibility and is displayed when the image cannot be loaded.

Image URL: This is the web address of the image you want to embed.


Tables

In Markdown, you can create tables to present data in a structured and organized format. Markdown tables are easy to create and offer a simple way to display information with columns and rows.

To create tables in Markdown, you use a combination of pipe characters (|) and hyphens (-) to define the structure of the table and pipe characters for the content within each cell.

| Header 1 | Header 2 |

|———-|———-|

| Data 1   | Data 2   |

| Data 3   | Data 4   |

The first row defines the table headers, which are separated by the pipe character (|) and enclosed with pipes on both sides.

The second row, consisting of hyphens (-), indicates the alignment and separates the header row from the content rows.

Subsequent rows contain the data cells, which are separated by pipe characters.

Footnotes

Footnotes in Markdown provide a way to add additional information or references to your content without cluttering the main text.

Create the reference point in your main text: To indicate where you want to add a footnote, place a caret (^) or a superscript number in your text. For example, you might write something like this:

This is a sentence with a footnote reference[^1].

Add the footnote content: At the bottom of your document or section, create a separate section to define the footnotes. This is done by placing the caret or number again followed by a colon and then the content of the footnote.

[^1]: This is the content of the footnote. It can be multiple sentences or even paragraphs.

Strikethrough

Strikethrough in Markdown is a way to visually indicate that text should be crossed out or deleted. This is typically used to show that a word or phrase has been removed or is no longer valid.

To apply strikethrough formatting in Markdown, use double tilde (~~) characters. Here’s how it works:

This is some ~~strikethrough text~~.

Task Lists

Task lists are used to create to-do lists with checkboxes.

To create a task list in Markdown, use square brackets ([]) to represent incomplete tasks and [x] to represent completed tasks:

– [x] Task 1

– [ ] Task 2

– [ ] Task 3

Conclusion

The Froala Markdown Plugin is a versatile tool for integrating Markdown support into your web applications.

It allows you to easily create and render Markdown content, making it a valuable addition to your text editing solutions.

In this guide, we’ve covered the basics of using the Froala Markdown Plugin and provided examples for various Markdown features.

Whether you’re building, the Markdown Plugin can streamline the process and enhance the user experience.

With customization options, you can ensure that Markdown content seamlessly integrates with your website’s design.

So, go ahead and explore the possibilities of the Froala Markdown Plugin in your projects. Happy editing!

The Froala Editor lets users create and edit content with rich text formatting. One of its powerful features is the ability to work with images.

This article explains how to use Image Edit Buttons from Froala Editor in a React app project with a cheap react rich text editor.

Prerequisites

Before you get started, make sure you have the following prerequisites in place:

• Node.js and npm are installed on your computer.
• A React application set up.
• Knowledge of React and HTML.
• Setting up Froala Editor in a React App

First, we need to install the required packages. After that, we can initialize the Froala Editor.

We will make a React component called App.js. In this component, we will set up and use the Froala Editor along with the Image Edit Buttons.

1. Installation and Setup

First, install the required packages. You can do this by running the following command in your React project directory:

npm install react-froala-wysiwyg

cd react-froala-wysiwyg

npm install react-froala-wysiwyg --save

These commands install the Froala Editor and its React wrapper.

2. Importing Dependencies

In your App.js file, import the necessary dependencies.

Here’s the beginning of the file with the imports:

import { useState } from "react";

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

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

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

import FroalaEditorImg from "react-froala-wysiwyg/FroalaEditorImg";

We imported useState from React to manage the component state in the code above.

We imported the react-froala-wysiwyg package’s styles, plugins, and components.

3. Setting Up the Component

Next, create the App component and set up the basic structure.

We’ll use the FroalaEditorImg component to render the Froala Editor. Here’s the code for the App component:

export default function App() {

  const [state, setState] = useState({

    src: "https://fakeimg.pl/350x200/?text=Click to test"

  });




  const handleModelChange = (model) => {

    setState({

      content: model

    });

  };




  const config = {

    imageEditButtons: [

      "imageReplace",

      "imageAlign",

      "imageCaption",

      "imageRemove",

      "|",

      "imageLink",

      "linkOpen",

      "linkEdit",

      "linkRemove",

      "-",

      "imageDisplay",

      "imageStyle",

      "imageAlt",

      "imageSize"

    ]

  };




  return (

    <div>

      <FroalaEditorImg

        config={config}

        model={state}

        onModelChange={handleModelChange}

      />

      <br /> <br />

    </div>

  );

}

Now, let’s break down the code step by step:

We start by defining the App component as a functional component.

Inside the component, we use the useState hook to manage the state.

The state object holds the initial image source, displayed in the editor.

export default function App() {

  const [state, setState] = useState({

    src: "https://fakeimg.pl/350x200/?text=Click to test"

  });

We define the handleModelChange function, which will be called when the editor content changes. In this function, we update the state with the new content.

  const handleModelChange = (model) => {

    setState({

      content: model

    });

  };

The config object holds the Froala Editor’s configuration, including the imageEditButtons property.

This property specifies the set of image editing buttons you want to display.

  const config = {

    imageEditButtons: [

      "imageReplace",

      "imageAlign",

      "imageCaption",

      "imageRemove",

      "|",

      "imageLink",

      "linkOpen",

      "linkEdit",

      "linkRemove",

      "-",

      "imageDisplay",

      "imageStyle",

      "imageAlt",

      "imageSize"

    ]

  };

Finally, we build the FroalaEditorImg element, passing as props the config, model, and onModelChange.

This component will display the Froala Editor with the specified image edit buttons.

  return (

    <div>

      <FroalaEditorImg

        config={config}

        model={state}

        onModelChange={handleModelChange}

      />

      <br /> <br />

    </div>

  );

}

Explaining the imageEditButtons Configuration

The imageEditButtons configuration is a crucial part of this implementation. It defines the set of buttons that will appear when you click on an image in the Froala Editor.

Let’s break down the buttons included in the configuration:

“imageReplace”: This button allows you to replace the selected image with a new one.

“imageAlign”: It enables you to set the alignment of the image (left, center, right, or justify).

“imageCaption”: This button adds a caption to the image.

“imageRemove”: It lets you remove the selected image.

“|”: The pipe character (|) is used to create a separator between groups of buttons.

“imageLink”: You can link the image to another URL.

“linkOpen”: This button opens the link in a new window or tab.

“linkEdit”: It allows you to edit the image’s link.

“linkRemove”: This button removes the link from the image.

“-“: The hyphen character (-) is used to create a separator between groups of buttons.

“imageDisplay”: It controls the display settings for the image, such as size and alignment.

“imageStyle”: You can apply custom styles to the image.

“imageAlt”: This button adds an alternative text (alt text) to the image, which is essential for accessibility.

“imageSize”: It allows you to adjust the dimensions of the image.

These buttons give users a variety of options for customizing and modifying photos within the Froala Editor.

Using the Froala Editor with Image Edit Buttons

Now that we’ve configured the Froala Editor with the desired image edit buttons, let’s discuss how to use the editor in your React app.

The FroalaEditorImg component is used to render the editor. Here’s how we set it up:

<FroalaEditorImg

  config={config}

  model={state}

  onModelChange={handleModelChange}

/>

We pass the config object as a prop, which contains our button configuration.

The model prop is set to state, allowing the editor to manage its content based on the state defined in the component.

The onModelChange prop is set to the handleModelChange function, which updates the state with the new editor content.

With this setup, the Froala Editor will be displayed with the specified image edit buttons, and you can interact with the image in various ways, as defined by the imageEditButtons configuration.

Testing the Implementation

To see the Image Edit Buttons in action, run your React app.

Make sure to start your development server using the following command:

npm start

This command will start your development server, and you should be able to access your React app in a web browser.

In your app, you’ll see the Froala Editor with the initial image and the configured Image Edit Buttons.

When you click on the image, the Image Edit Buttons will show up, allowing you to change the image, add a caption, align the image, and more.

As you make changes, the editor’s content will be updated, and you can observe this change in the handleModelChange function.

Conclusion

In this article, we have explained how to install Image Edit Buttons in a Froala Editor within a React app.

First, we set up the necessary dependencies.

Then, we configured the imageEditButtons property. We ended up using the FroalaEditorImg component.

It displays the editor and image editing options.

The imageEditButtons configuration has many image editing and customization features.

It is a powerful tool for working with images in your application.

By following the steps in this article, you can improve the user experience of your React app. Users will be able to edit and customize images.

You can also customize the image edit buttons to fit your needs.

Froala WYSIWYG editor has a powerful API with over 240 API options, 100+ events, and 220+ methods. In the “Froala’s tips and tricks – part 1” article, We started to explain how to use the Froala editor API to maximize and enhance the user experience, usage, and productivity. We are excited to continue on this journey by uncovering more valuable tips and tricks of the Froala editor.

Highlighting and Beautifying HTML Code for a Seamless User Experience

WYSIWYG editors were invented to allow users to create rich-text content without needing to know HTML. However, for tech-savvy users or developers, Froala provides a built-in feature to write and edit the content HTML code.

When dealing with large amounts of content within the editor, modifying the HTML code can become quite challenging, even for experienced developers, unless it is properly highlighted and beautified.

To address this issue, Froala has developed the CodeBeautifier plugin, which helps in arranging the code in a more readable format. With the help of this plugin, users can easily comprehend and modify the structure of the HTML code.

Furthermore, it is easy to integrate Froala with codeMirror which highlights the code making the editing process quite handy for developers.

To integrate codeMirror with Froala, simply ensure that the necessary CodeMirror stylesheet and script files are included within your webpage before calling the Froala scripts.

• Add Stylesheets at the head of the webpage
  • https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.15/codemirror.min.css
  • https://editor-latest.s3.amazonaws.com/v3/css/froala_editor.pkgd.min.css

• Add the JS files in the following order:
  • https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.15/codemirror.min.js
  • https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.15/mode/xml/xml.min.js
  • https://editor-latest.s3.amazonaws.com/v3/js/froala_editor.pkgd.min.js

• Make sure to configure the following API options correctly:

• • codeMirror – which enables or disables the use of Code Mirror, the default value is window.codeMirror.
  • codeMirrorOptions – that can be used to customize Code Mirror options, such as tab size. Its default value is:

    {
    indentWithTabs: true,
    lineNumbers: true,
    lineWrapping: true,
    mode: 'text/html',
    tabMode: 'indent',
    tabSize: 2
    }

    See a full example here https://froala.com/wysiwyg-editor/examples/code-mirror/

Display Shortcut Commands Hints in the Froala Editor

Another user-friendly feature of the Froala editor is the ability to use shortcuts for quick and easy to perform many editor commands. For example, you can use the (Ctrl+B or ⌘ Cmd + B) shortcut to bold the selected text in the editor. Using shortcuts is a real time-saver and efficiency booster for your users who are familiar with these shortcuts.

Users may not know these shortcuts are available and they can use them. To help them, you can display the shortcut code in the button tooltip by setting the shortcutsHint API option to true.

new FroalaEditor('.selector', { shortcutsHint: true });

Now, when the user hovers over any toolbar options, they will see a tooltip with the corresponding keyboard shortcut, providing a quick reference for users who prefer to use the keyboard over the mouse.

However, users can see the full list of available shortcuts by clicking on the editor help button, displaying the shortcodes in the tooltip can be an effective way to educate users about these productivity features.

Control Froala Editor with External Buttons

When it comes to developing your app, you may encounter situations where you need to have control over certain editor actions through an external button. No problem, with Froala you can do this easily. Before invoking the external button function, you need to ensure that the editor is correctly loaded and retrieve the editor instance to access its methods. This can easily done inside the initialized API event.

Let’s say you want to clear the editor’s content using an external button. To achieve this, you’ll need to add a click event listener inside the editor-initialized event. This way, when the user clicks on the clear button, the event will be triggered and you can use Froala API’s html.set method to clear the editor content. This method allows you to set the editor’s content in HTML format. In our case, we want to clear the content, so we’ll call the method with an empty argument. Here’s an example:

const editorInstance = new FroalaEditor('#edit', {

  events: {

    initialized: function () {

      const editor = this

      document.getElementById('clearButton').addEventListener("click", function () {

         editor.html.set('')

        editor. events.focus()

      })

    }

  }

})

In the above example, by clicking on the button with ID ‘clearButton’, the editor content will be cleared and the editor will be focused, ready to accept new input from users.

You can perform different actions by utilizing different Froala API methods to manipulate the editor’s behavior.

These sorts of interactions may allow an enhanced, user-friendly navigation and editing experience.

Control Multiple Editors Using A Shared Toolbar

Yet another brilliant feature of the Froala Editor is the ability to use one toolbar to perform actions in multiple editor instances on the same page. This can be extremely useful in cases where you have different editable sections but want to have centralized control over them using one toolbar. This shared toolbar can be positioned anywhere on the webpage and works in sync with the active editor instance.

To set up a shared toolbar, you need to set the toolbarContainer API option to the CSS selector of the element you want to use as your toolbar. Here’s an example:

new FroalaEditor("#edit1, #edit, #edit2", {

   toolbarContainer: '#foo',

    toolbarButtons: [ ['bold', 'italic', 'underline', 'strikeThrough', 'textColor', 'backgroundColor', 'emoticons'], ['paragraphFormat', 'align', 'formatOL', 'formatUL', 'indent', 'outdent'], ['insertImage', 'insertLink', 'insertFile', 'insertVideo', 'undo', 'redo'] ]

})

In the above example, we created three different editors on the following elements `#edit1`, `#edit`, and `#edit2` on the page. The shared toolbar of the three editors is placed inside the `#foo` HTML element.

By using this shared toolbar, users will only need to familiarize themselves with one toolbar to manage multiple editors, simplifying their editing experience and promoting efficiency.

Remember as we discussed in a previous article, when you are using multiple instances of the Froala editor on the same page, it is better to set the initOnClick option to true to lazy load the editors and improve the page performance.

Make Your Froala Editor Toolbar Sticky for Easy Navigation

The toolbar is an important element in WYSIWYG editors. It is the element where buttons are available to allow users to interact with the content. In a case where you have a lot of content in the editor, the toolbar might disappear as users scroll down the page, leading to a less efficient and user-friendly experience.

To address this, Froala offers the stickyToolbar API option. When set to true, the toolbar will move as users scroll in the editor box. Here’s an example of how you can activate this feature:

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

toolbarSticky: true

})

Boosting User Experience with Advanced Features and Customization Options

In this article, we have discussed various features of the Froala WYSIWYG editor that enhance the user’s editing experience. We have covered respective aspects like displaying shortcut hints, using external buttons to perform actions, controlling multiple editors with a shared toolbar, and finally, incorporating a scrollable toolbar for easy and efficient navigation. Using these features, developers can ensure their applications provide a user-friendly and efficient editing experience to their end-users.

Remember, the power of the Froala editor is not confined to these features alone. Froala offers a multitude of APIs and options that developers can utilize to tailor the editor’s behavior to the specific needs of their applications. Explore the Froala documentation now, try it for free, and when you are ready, pick a plan that suits your project needs to leverage the full capabilities of this powerful editing tool without the unlicensed banner.

Happy coding!

Web apps must be ready for diverse audiences in a globalized world, including those who read and write in RTL languages such as Arabic, Hebrew, and Persian.

Languages that are written and read from right to left are called RTL languages.

In contrast to left-to-right languages like English, where text flows from left to right, RTL languages follow a reversed direction.

This means that the first letter in a word is on the right side of the page. The other letters go to the left.

When a sentence starts, it begins on the right side and progresses to the left.

One phase example in Arabic:

هذا مثال على الجملة العربية.

This is an example of an Arabic sentence.

In any media written in RTL languages, text alignment, and layout are reversed compared to LTR languages.

The right margin is considered the “starting” point, and the text is aligned right-justified.

Numerical values are typically written with the most significant digit on the right.

Introduction to Froala Editor

Froala Editor is a popular WYSIWYG (What You See Is What You Get) editor that allows users to create and edit rich content in a user-friendly way.

In this project, we will integrate the Froala Editor into a React application, a great way to empower users to create and format text and images with our react rich text editor.

For RTL languages, some additional configurations are needed.

Step 1: Set Up Your React Project

If you haven’t already, create a new React project using create-react-app:

npx create-react-app froala-rtl-editor

cd froala-rtl-editor

Step 2: Install Froala Editor

Next, install Froala Editor by running the following commands:

npm install react-froala-wysiwyg --save

Step 3: Configuration Froala Editor

Once installed, open the App.js file and now, you can import the Froala Editor styles and the React component:

import React from 'react'; 

import FroalaEditorComponent from 'react-froala-wysiwyg'; 

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

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

Now, you can use the FroalaEditorComponent in your React component’s method:

function App() {

  let model = '<p>محرر فروالا. هذا مثال على الجملة العربية.</p>';

​

  return (

    <div id="froala-editor">

      <h1>فروالا محرر</h1>

      <FroalaEditorComponent

        tag="textarea"

        model={model}

        config={{

        }}

      />

    </div>

  );

}

​

export default App;

With this integration, you can have a basic Froala Editor running in your React application.

Step 4: Configuration RTF

The official Froala Editor documentation provides a comprehensive guide on how to configure the editor for RTL languages.

According to the documentation, you should set the direction property in the configuration object to ‘rtl’ to enable RTL mode:

  <FroalaEditorComponent

        tag="textarea"

        model={model}

        config={{

          direction: 'rtl'

        }}

      />

    </div>

Running the Application

With the configuration and components in place, you can now start your React application:

npm start

Open your browser and navigate to http://localhost:3000 to see the Froala Editor integrated into your React app with RTL support.

Conclusion

This tutorial shows how to make a Froala Editor in a React app that supports right-to-left (RTL) languages.

Froala Editor is a strong tool for adding text editing features to your app. It can also be set up to work with RTL text, reaching more people.

Remember to customize the editor’s configuration to suit your specific project needs. Follow these steps to make your React application more accessible for RTL language users.

Froala 4.1 brings support for the LTS version of React V18. With Froala 4.1 React SDK, integrating Froala into your React app is straightforward. The React SDK provides several components to enable rich-text editing capabilities as well as editing images, links, buttons, and inputs. In this article, we will explore the various components offered by the Froala React SDK and provide a comprehensive guide on how to effectively utilize them.

Intro

Before using any of the React SDK components, it is crucial to familiarize yourself with the Froala React integration process. Let me provide you with a quick overview of the essential steps that need to be followed before using the Froala React components.

1. Install the Froala React SDK using

npm install react-froala-wysiwyg --save

2.  Import the editor CSS stylesheets and the required plugin scripts

// Import the Froala Editor Stylesheet for displaying content outside the editor
import 'froala-editor/css/froala_style.min.css';


// Import the Froala Editor Stylesheet
import 'froala-editor/css/froala_editor.pkgd.min.css';


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

Now we will be able to import and use the editor components.

Rich Text Editor Component

The text editor component is the cornerstone of Froala’s rich text editing capabilities. You can use it when you want to initialize the Froala WYSIWYG editor in your React app. Whether you want to use the full-featured WYSIWYG editor or make a customized version of it, this component is highly adaptable and configurable. It provides a host of options that allow you to custom-tailor the editor’s features to your specific use case. You can add or remove toolbar buttons, change the theme, or even set rules for HTML tag usage.

1. Import the component

import FroalaEditorComponent from 'react-froala-wysiwyg';

2.  Use it in your template where you want to display the editor

<FroalaEditorComponent

tag='textarea'

config={config}

model={model}

onModelChange={handleModelChange}

/>

The component has the following properties:

• tag: used to tell on which tag the editor is initialized
• config: used to customize the editor API options and events
• model: used to hold the current value of the editor
• onModelChange: a function triggered each time the value changes

Display Editor Content Component

Froala provides you with a component to display content created with the Froala editor

<FroalaEditor

model={content}

onModelChange={handleModelChange}

/>

Image Editor Component

The Image Editor component is another useful feature used to initialize the Froala editor on an image to enable image editing capabilities for your app. The users can replace and edit images directly in their content. The Image Editor supports various editing operations such as resizing, aligning, adding an image caption, adding an ALT keyword, and changing the image display property.

1. Import the component

import FroalaEditorImg from "react-froala-wysiwyg/FroalaEditorImg";

2. Use it in your template where you want to display the image editor

<FroalaEditorImg

config={config}

model={model}

onModelChange={handleModelChange}

/>

The component has the following properties:

• config: used to customize the editor API options and events.

For image, button, input, and link components you can use reactIgnoreAttrs special API option to define the attributes that you want to ignore when the editor updates the froalaModel

config: {

reactIgnoreAttrs: ['class', 'id']

},

• model: The model must be an object containing the attributes for your img tag

model={{

src: 'path/to/image.jpg',

width:"300px",

alt:"Old Clock"

}}

• onModelChange: a function triggered each time the value changes

You can use the Image Editor Component to implement a free image uploader in your React app.

Full Image Editor Component Example:

import "./styles.css";

// Import the Froala Editor Stylesheet for displaying content outside the editor
import "froala-editor/css/froala_style.min.css";

// Import the Froala Editor Stylesheet
import "froala-editor/css/froala_editor.pkgd.min.css";

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

import FroalaEditorImg from "react-froala-wysiwyg/FroalaEditorImg";

import { useState } from "react";

export default function App() {

const [state, setState] = useState({

src: "https://fakeimg.pl/350x200/?text=Click%20on%20me",

id: "froalaEditor",

tmpattr: "This attribute will be ignored on change."

});

const handleModelChange = (model) => {

setState({

content: model

});

};

const config = {

reactIgnoreAttrs: ["tmpattr"],

imageEditButtons: [

"imageReplace",

"imageAlign",

"imageCaption",

"imageRemove",

"|",

"imageLink",

"linkOpen",

"linkEdit",

"linkRemove",

"-",

"imageDisplay",

"imageStyle",

"imageAlt",

"imageSize"

]

};

return (

<div className="App">

<FroalaEditorImg

config={config}

model={state}

onModelChange={handleModelChange}

/>

<br /> <br />

<div> For More Info. Visit: https://froala.com/image-uploader/ </div>

</div>

);

}

Button Editor Component

The Button Editor component is a specialized component provided by Froala React SDK. It allows you to initialize the Froala editor on a button, offering custom button editing options.

1. Import the component

import FroalaEditorButton from "react-froala-wysiwyg/FroalaEditorButton";

2. Use it in your template where you want to display the button editor

<FroalaEditorButton

config={config}

model={model}

onModelChange={handleModelChange}

/>

The component has the following properties:

• config: This is used to customize the editor API options and events
• model: The model must be an object containing the attributes for your button tag. You can specify the button text using a special attribute named innerHTML which inserts the inner HTML of the element

model={{innerHTML: 'Click Me'}}

• onModelChange: This is a function triggered each time the value changes

Full Button Editor Component Example:

import "./styles.css";

// Import the Froala Editor Stylesheet for displaying content outside the editor
import "froala-editor/css/froala_style.min.css";

// Import the Froala Editor Stylesheet
import "froala-editor/css/froala_editor.pkgd.min.css";

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

import FroalaEditorButton from "react-froala-wysiwyg/FroalaEditorButton";

import { useState } from "react";

export default function App() {

const [state, setState] = useState({

innerHTML: "Click Me",

id: "myButton",

style: "color:red; padding:20px"

});

const handleModelChange = (model) => {

setState({

content: model

});

};

return (

<div className="App">

<FroalaEditorButton model={state} onModelChange={handleModelChange} />

</div>

);

}

Link Editor Component

The Link Editor component is another important part of the Froala React SDK, allowing the initialization of the Froala editor on hyperlink elements. With this, you can edit, remove, and style hyperlinks in your application content. The editor provides a range of options for hyperlink customization including URL entry, target attribute setting, and CSS class addition.

1. Import the component

import FroalaEditorA from 'react-froala-wysiwyg/FroalaEditorA';

2. Use it in your template where you want to display the link editor

<FroalaEditorA

config={config}

model={model}

onModelChange={handleModelChange}

/>

The component has the following properties:

• config: This is used to customize the editor API options and events
• model: The model must be an object containing the attributes for the hyperlink element. This could include the link URL, target attribute, and any CSS classes.

model={{

href: 'https://www.froala.com/',

target: '_blank',

}}

• onModelChange: This is a function triggered each time the value changes

Full Link Editor Component Example:

import "./styles.css";

// Import the Froala Editor Stylesheet for displaying content outside the editor

import "froala-editor/css/froala_style.min.css";
// Import the Froala Editor Stylesheet

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

// Import all Froala Editor plugins;

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

import FroalaEditorA from "react-froala-wysiwyg/FroalaEditorA";

import { useState } from "react";

export default function App() {

const [state, setState] = useState({

innerHTML: "Click Me",

href: "https://www.froala.com/",

target: "_blank"

});

const config = {

linkEditButtons: ["linkOpen", "linkStyle", "linkEdit", "linkRemove"]

};

const handleModelChange = (model) => {

setState({

content: model

});

};

return (

<div className="App">

<FroalaEditorA

config={config}

model={state}

onModelChange={handleModelChange}

/>

</div>

);

}

Input Editor Component

The Input Editor component allows you to initialize the Froala editor on an input element of your React app, enabling customization of input fields. This is convenient when you want to provide users with a rich text input field instead of plain text.

1. Import the component

import FroalaEditorInput from 'react-froala-wysiwyg/FroalaEditorInput';

2. Use it in your template where you want to display the input editor

<FroalaEditorInput

config={config}

model={model}

onModelChange={handleModelChange}

/>

The component has the following properties:

• config: This is used to customize the editor API options and events
• model: The model must be an object containing the attributes of the input element.

model: {

placeholder: 'I am an input!'

}

• onModelChange: This is a function triggered each time the value changes

Enhance Your React App with Powerful and Customizable Rich Text Editing Components

By using the Froala Editor React.js SDK, you gain a powerful set of tools to modify and enhance your app’s content, all with a high degree of customization. Whether you need to edit text, images, buttons, links, or inputs, Froala provides an effortless way to do so. With these components at your disposal, your React application can offer an enhanced user experience.

With its powerful and adaptable components, you will not only get an advanced WYSIWYG editor but also the ability to create an image uploader tool or a modern drag-and-drop webpage builder tool. Start your free trial now and experience the flexibility of Froala Editor SDK for React.js. Whether you’re building a blog, an e-commerce website, or any other web application that requires rich content editing, Froala Editor SDK for React.js is a tool worth considering.

In the latest release of Froala, version 4.1, we made a significant update by supporting the LTS React version among several other popular JavaScript frameworks. With this major update, we expect a considerable migration from TinyMCE to Froala. Whether you’re already a fan of Froala or currently facing challenges with TinyMCE and are considering a switch to Froala for your React app, this article aims to provide you with a smooth and efficient transition process. Throughout this guide, we will walk you through every step, ensuring a seamless migration from TinyMCE to Froala React SDK. From removing the TinyMCE component to installing and configuring the powerful Froala rich text editor React component, our goal is to equip you with the knowledge and confidence to make the switch.

 Why do users migrate from TinyMCE to Froala?

There are several reasons for users to migrate from TinyMCE to Froala, such as:

1. Technology:
   Froala editor has its own unique way of handling content, leading to distinct and cleaner HTML outputs. Additionally, the Froala editor boasts different API structures. It introduces a developer-friendly API where its options, events, and methods are comprehensive and easy to use. This API enables effortless customization of the editor’s functionality and allows for the creation of custom elements and plugins, empowering developers with endless possibilities.
2. Transparent Pricing:
   Froala distinguishes itself with a transparent pricing model that guarantees no hidden fees. Moreover, in all plans, all of Froala’s plugins are included, and there are no restrictions on editor usage. In contrast, TinyMCE’s pricing plans come with limitations on the number of page loads. For instance, the free plan only allows for 1000-page loads. For example, a company with 10 users each loading a page containing the TinyMCE editor 10 times per day, would exhaust the capacity in just 10 days, forcing them to pay $40 for an additional 1000 loads. This would result in a monthly expense of $80, or a whopping $960 annually. Remarkably, the cost of Froala’s professional plan is actually lower than this. What’s more, the free Tinymce plan is limited to a single domain, lacks access to all plugins, and does not provide professional support.
3. Multiple React components:
   In contrast to Tinymce, Froala React SDK stands out for its versatility, offering not just one but multiple React components. These components include a main component for rendering the editor, a component to preview the editor’s content, and some special components for initializing the editor on the <img>, <button>, <input>, and <a> HTML elements. With Froala React SDK, you’re equipped with a powerful toolkit to enhance both the functionality and presentation of your content.
4. Design:
   The Froala UI has gained immense popularity among users for its sleek and captivating design. From its modern flat layout to captivating SVG icons, Froala Editor truly stands apart from other options available. Its design has particularly caught the attention of users in search of a clean and contemporary interface, making it an appealing choice for a wide range of individuals.
   1. Toolbar:
      Froala’s innovative toolbar ingeniously organizes the vast array of features into four distinct and conveniently grouped context categories: Text, Block, Media, and More. By using this simple yet intuitive toolbar, your navigation through the editor becomes effortless. You still have the option to customize it displaying only the toolbar buttons you needed.
   2. Responsive UI
      The Froala toolbar takes user experience to a whole new level with its seamless and user-friendly design. It cleverly adapts to your screen width, ensuring a perfect fit for any device. It’s like having a personal assistant that knows exactly what buttons you need the most. With just one click, you can access a plethora of features that are neatly organized, making content editing a breeze. Whether you’re on a tablet or a phone, the Froala toolbar guarantees optimal navigation and editing, regardless of screen size. On the other hand, TinyMCE maintains its toolbar buttons but struggles to adjust the toolbar width based on screen size, often leading to the annoyance of a horizontal scrollbar. This cluttered layout can be a real hassle for users trying to find specific buttons, ultimately slowing down their content editing process. Choose Froala and enjoy an efficient and hassle-free editing experience!
5. Feature quality:
   It is crucial to understand that even if two editors have a feature with identical or similar names, their functionalities may differ. This emphasizes the importance of testing each feature in both editors instead of assuming they will produce equivalent results. For instance, when we examined how each editor handles content pasted from third-party tools, Froala effectively maintained the pasted content styles. On the other hand, TinyMCE, which named its feature “PowerPaste” and made it a premium feature, failed to do so. View the comparison results here.
6. Other reasons
   Many reasons could make users migrate from TinyMCE to Froala. Share your thoughts in the comments section and let us know why you are considering migrating from TinMCE to Froala.

How to migrate from TinyMCE to Froala in a React app?

The migration from TinyMCE to Froala is easy and straightforward. Follow these steps for a hassle-free process:

Uninstall TinyMCE Vue NPM Package

the initial task would involve uninstalling Tinymce from your application. In case you are using npm, you can execute the following command within your local project directory to successfully uninstall Tinymce

npm uninstall -g @tinymce

This will remove the TinyMCE React package as well as remove it from the application’s list of dependencies.

Install Froala React NPM Package

The next step in transitioning from TinyMCE to Froala is to install the Froala React NPM package in the application. To install Froala, use the following command:

npm install react-froala-wysiwyg

After the installation process is completed, you can find the react-froala-wysiwyg folder inside your npm_modules folder.

Replace TinyMCE with Froala in your components

The final step involves replacing any references to TinyMCE in your components with Froala.

Remove TinyMCE component Import statements

Search for the line

import { Editor } from "@tinymce/tinymce-react";

and replace it with the import of Froala component, stylesheets, and required plugins

// Require Editor CSS files.
import 'froala-editor/css/froala_style.min.css';
import 'froala-editor/css/froala_editor.pkgd.min.css';

// Import all Froala Editor plugins
// Note: you can import a single plugin if needed
import 'froala-editor/js/plugins.pkgd.min.js';


//import Froala component
import FroalaEditorComponent from 'react-froala-wysiwyg';

Substitute all instances of TinyMCE with Froala

Search for <Editor which defines the TinyMCE component inside the template files and replaces it with the <FroalaEditorComponent. The two components have different tags. Therefore, it is important to replace these tags. Here is a list of TinyMCE tags and how we should handle them when migrating to Froala.

Before we start, let us consider an example of the TinyMCE Editor component:

class App extends Component {

constructor() {

  super();

}

render() {

 return (

   <Editor

     apiKey="limjfdlb66u3w96h1skw5m93kdvmf55zt4ohb3ol4jeb3q6m"

     cloudChannel='5-stable'

     disabled={false}

     initialValue='test initialValue'

     inline={false}

     onEditorChange={ }

     plugins=''

     tagName='div'

     textareaName=''

     toolbar=''

     value=''

     outputFormat='html'

     init={{

         height: 500,

         menubar: false,

         plugins: [

                   'advlist', 'autolink', 'link', 'image', 'lists', 'charmap', 'preview', 'anchor', 'pagebreak', 'searchreplace', 'wordcount', 'visualblocks', 'visualchars', 'code', 'fullscreen', 'insertdatetime', 'media', 'table', 'emoticons', 'template', 'help'

                  ],

         toolbar: 'undo redo | styles | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullscreen | forecolor backcolor emoticons | help',

     }}

   />

  );

 }

}

render(<App />, document.getElementById('root'));

Some of the tags will no longer be needed when migrating to Froala. Go ahead and remove them directly. they are:

• api-key
• cloudChannel
• disabled
• output-format
• scriptLoading
• tinymceScriptSrc
• rollback
• textareaName

For other tags:

id

This tag is used in both components to define the “id” attribute of the element that the editor is initialized on; therefore, we keep it as it is.

init

TinyMCE uses this property for setting the editor options. for example:

<editor

init = {{
        width: 600,
        height: 300,
        plugins: [

            'advlist', 'autolink', 'link', 'image', 'lists', 'charmap', 'preview', 'anchor', 'pagebreak', 'searchreplace', 'wordcount', 'visualblocks', 'visualchars', 'code', 'fullscreen', 'insertdatetime', 'media', 'table', 'emoticons', 'template', 'help'

        ],

        toolbar: 'undo redo | styles | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullscreen | forecolor backcolor emoticons | help',

        menu: {

            favs: {
                title: 'My Favorites',
                items: 'code visualaid | searchreplace | emoticons'
            }

        },

        menubar: 'favs file edit view insert format tools table help',

        content_css: 'css/content.css'

    }}

/>

When migrating to Froala, find the equivalent Froala API option and use it inside the config parameter of the Froala component

<FroalaEditorComponent
config = {{
        width: 600,
        height: 300,
        pluginsEnabled: [
            'lists', 'link', 'image', 'imageManager', 'charCounter', 'fullscreen', 'lineBreaker', 'codeBeautifier', 'codeView', 'colors', 'draggable', 'video', 'table', 'emoticons', 'wordPaste'
        ],
        toolbarButtons: {
            'moreText': {
                'buttons': ['bold', 'italic', 'underline', 'strikeThrough', 'clearFormatting']
            },
            'moreParagraph': {
                'buttons': ['alignLeft', 'alignCenter', 'formatOLSimple', 'alignRight', 'alignJustify', 'formatOL', 'formatUL', 'paragraphFormat', 'paragraphStyle', 'lineHeight', 'outdent', 'indent', 'quote']
            },
            'moreRich': {
                'buttons': ['insertLink', 'insertImage', 'insertVideo', 'insertTable', 'emoticons', 'insertHR']
            },
            'moreMisc': {
                'buttons': ['undo', 'redo', 'fullscreen', 'selectAll', 'html', 'help'],
                'align': 'right',
                'buttonsVisible': 2
            }
        }
    }}
/>

In case the selector property is defined in TinyMCE init, this should be passed to the tag prop of the Froala component as it represents the HTML element where the editor will be initialized at.

For example, the below code

<editor

init = {{

        selector: 'textarea',

        width: 600,

        height: 300,

        menu: {

            favs: {
                title: 'My Favorites',
                items: 'code visualaid | searchreplace | emoticons'
            }

        },

        menubar: 'favs file edit view insert format tools table help',

        content_css: 'css/content.css'

    }}

/>

Should be converted to

<FroalaEditorComponent

tag = 'textarea'

config = {{

        width: 600,

        height: 300,

    }}

/>

inline

Used by TinyMCE to set the editor to inline mode. In Froala, set the toolbarInline: true inside the config tag options object.

Example:

<editor

   inline={true}

/>

This will be converted to

<FroalaEditorComponent

   config={{toolbarInline: true}}

/>

tagName

Is an optional prop to define the HTML element for the editor in the inline mode instead of using selector inside the init prop.

When you are migrating to Froala, the tagName value should be passed to the tag prop for the Froala component.

For example, the below code

<editor

inline={true}

tagName='div'

/>

Should be converted to

<FroalaEditorComponent

tag='div'

config={{toolbarInline: true}}

/>

initialValue

The initial content of the editor when the editor is initialized. Assign the initial value to the “model” prop for the Froala component.

Example

<Editor

initialValue='<p>Once upon a time...</p>'

/>

This will be converted to

<FroalaEditorComponent

tag='div'

model="<p>Once upon a time...</p>"

/>

plugins

Used to include plugins for the editor. In Froala, set the pluginsEnabled API option to the equivalent Froala plugins and add it within the config prop.

It is important to note that certain core functionalities of TinyMCE are implemented through plugins in Froala; while some functionalities provided by Froala plugins are already available by default in TinyMCE.

For example, TinyMCE has font size as a core function, whereas a Froala plugin is required to add this option.

Example

<Editor

plugins="emoticons wordcount help code lists"

/>

Will converted to

<FroalaEditorComponent

config={{ pluginsEnabled: ['emoticons', 'charCounter', 'help', 'codeView', 'lists'] }}

/>

Toolbar

Used to set the editor toolbar buttons. while migrating your code to Froala, configure the Froala toolbarButtons API option with the desired buttons and add it to the config prop.

In Froala, you can also set the toolbarButtonsMD, toolbarButtonsSM, and toolbarButtonsXS API options to customize the toolbar buttons based on the screen size.

Example:

<editor

 toolbar="bold italic underline code"

/>

Will be converted to

<FroalaEditorComponent 
config={{ toolbarButtons: ['bold', 'italic', 'underline', 'html'] }}
/>

 Events

Examine the events being used and locate their corresponding names in the Froala API events list. It may also be necessary to alter the function assigned to the event. In this case, some Froala API methods can be used to achieve the desired functionality.

Example:

<Editor onClick={this.handlerFunction} />

Will be converted to

<FroalaEditorComponent config={{ events: { 'click':handlerFunction } }} />

Full Code Example

Considering all these changes, now let’s see an example of how the code will change after migrating the TinyMCE React component to the Froala React component.

import React, { Component } from 'react';
import { render } from 'react-dom';
import { Editor } from "@tinymce/tinymce-react";

class App extends Component {
    constructor() {
        super();
    }

    render() {
        return ( <Editor
           apiKey = "limjfdlb66u3w96h1skw5m93kdvmf55zt4ohb3ol4jeb3q6m"
            cloudChannel = '5-stable'
            disabled = {
                false
            }
            initialValue = 'test initialValue'
            inline = {
                false
            }
            onEditorChange = {}
            plugins = ''
            tagName = 'div'
            textareaName = ''
            toolbar = ''
            value = ''
            outputFormat = 'html'
            init = {{
                    height: 500,
                    menubar: false,
                    plugins: [

                        'advlist', 'autolink', 'link', 'image', 'lists', 'charmap', 'preview', 'anchor', 'pagebreak', 'searchreplace', 'wordcount', 'visualblocks', 'visualchars', 'code', 'fullscreen', 'insertdatetime', 'media', 'table', 'emoticons', 'template', 'help'

                    ],

                    toolbar: 'undo redo | styles | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullscreen | forecolor backcolor emoticons | help',
                }}
            />
        );
    }
}

render( < App / > , document.getElementById('root'));

This will be converted to

import React, { Component } from 'react';
import { render } from 'react-dom';

// Require Editor CSS files.
import 'froala-editor/css/froala_style.min.css';
import 'froala-editor/css/froala_editor.pkgd.min.css';

// Import all Froala Editor plugins
// Note: you can import single plugin if needed
import 'froala-editor/js/plugins.pkgd.min.js';

//import Froala component
import FroalaEditorComponent from 'react-froala-wysiwyg';

class App extends Component {
    constructor() {
        super();
    }

    render() {
        return ( <FroalaEditorComponent
            model = "test initialValue"
            tag = "div"
            init = {
                {
                    Key: "***", //Editor Key
                    height: 500,
                    pluginsEnabled: [
                        'lists',
                        'link',
                        'image',
                        'imageManager',
                        'charCounter',
                        'fullscreen',
                        'lineBreaker',

                        'codeBeautifier',
                        'codeView',
                        'colors',
                        'draggable',
                        'video',
                        'table',
                        'emoticons',
                        'wordPaste',
                    ],

                    toolbarButtons: {
                        moreText: {
                            buttons: [
                                'bold',
                                'italic',
                                'underline',
                                'strikeThrough',
                                'clearFormatting',
                            ],
                        },

                        moreParagraph: {
                            buttons: [
                                'alignLeft',
                                'alignCenter',
                                'formatOLSimple',
                                'alignRight',
                                'alignJustify',
                                'formatOL',
                                'formatUL',
                                'paragraphFormat',
                                'paragraphStyle',
                                'lineHeight',
                                'outdent',
                                'indent',
                                'quote',
                            ],
                        },

                        moreRich: {
                            buttons: [
                                'insertLink',
                                'insertImage',
                                'insertVideo',
                                'insertTable',
                                'emoticons',
                                'insertHR',
                            ],
                        },

                        moreMisc: {
                            buttons: [
                                'undo',
                                'redo',
                                'fullscreen',
                                'selectAll',
                                'html',
                                'help',
                            ],

                            align: 'right',

                            buttonsVisible: 2,
                        },
                    },
                }
            }
            />
        );
    }}

render( < App / > , document.getElementById('root'));

 Still Need Help?

Are you using custom plugins? This tutorial will help you to migrate them to Froala.

For more information, we check our migration from TinyMCE to the Froala feature matching guide.

With these implementations, your transition from TinyMCE to Froala should be complete!

Testing and Verifying Your Changes

After switching from TinyMCE to Froala, check all updates are functioning properly. Test the editor function and confirm that the application works the same or better than before.

Conclusion

Integrating Froala into your React app is a seamless process that will not only simplify your editing tasks but also boost the productivity of your React app. With Froala, you gain access to a wide range of comprehensive tools designed specifically for efficient rich text editing. Switch from TinyMCE to Froala now and leverage the robust features that define Froala.