Froala Editor is the smartest and world’s most beautiful WYSIWYG rich text editor. High performance and simple design make our JS text editor easy to use for developers and loved by users. Pairing Froala Editor with React brings all of that power to your React application. It is created by developers, for developers. With a powerful API and documentation you can get started in minutes. There’s no need to reinvent the wheel. Our rich text editor comes with over 30 out of the box plugins to choose from and use in your project.
Ready to find out how to integrate Froala Editor into your React app? Let’s get started!
How do you import the Froala HTML Editor in React JS?
There is a quick and efficient way to transfer the WYSIWYG Editor’s functionality into the React framework. The first thing you should do is install the rich text editor by calling npm install react-froala-wysiwyg, saving a copy of it in your JS application. Check that you have the latest version with npm update froala-editor to see if it has all the available features and updates.
To use the Froala Editor, just drop its component inside your JS file by pasting the code outlined under the Usage section. Be sure to fetch it from react-froala-wysiwyg, which is specifically designed for React JS. It also assigns font awesome as the default format.
You are required to import each module where the compressed stylesheets and minified JS files are stored. This includes the images, buttons, and other elements needed for Froala to display the interface correctly. Next, render the component with ReactDOM.render() by passing in a textarea tag and the ID of the editor.
What can you do with custom events, methods, and tags?
Now, it would be a good idea to configure the Webpack settings for loading the files mentioned earlier. What you need is the file path to compare against the webpack module as well as the test and loader results. Check that the same is true for Webpack 4 URLs before you move on.
If you plan on running special tags, you are advised to stick with only the FroalaEditor components that are listed. Although you have access to a long list of possible config options, most of them are not essential to completing this tutorial.
Froala offers advanced features through its event functions that can be called by setting the name and value to a particular instance, as stated in the events docs such as for uploading files, resizing images, or linking to videos. A separate method docs will show you how to open the editor by passing in the specified arguments.
The editor content model serves as an extension of the React component. To change the content model, you must construct an object template via two way binding to set a state that inherits the stored data. Within the model’s HTML, you can configure tags for images, buttons, inputs, and links. This only applies to objects containing the special tag attributes under each state of the constructor.
For example, it lets you modify the innerHTML tag with different text for a button element. To display an image, you just have to change the tag to src followed by the URL path as a string. You even have the option to exclude Froala updates for any tag by adding the reactIgnoreAttrs array.
If you want to manually operate on the editor functionality, you would have to initialize it by executing the handleManualController function. Here you’re basically creating an object instance of the editor component class, capable of calling methods to either launch or remove the editor in React.
In case you need to declare a type definition file, it is recommended that you paste in a reference path set equal to index.d.ts where the file is located in this repository. Once you are done working on your content blocks, you can parse the code with the FroalaEditorView component. The end result is to display content on your JS application.
For a comprehensive overview of the React JS Editor, you can take a closer look at the documentation tutorial to understand the whole process of running various content modules from Froala.