Gaining Comprehensive Control over Rich Text Editing with Froala React SDK Components

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.