Rich text editors are indispensable tools for creating, editing, and formatting content.

These editors empower users to craft appealing and structured text without needing in-depth knowledge of HTML and CSS.

Froala is a tool that provides a powerful and customizable rich text editing experience, and it integrates with React applications.

One of its features is the Document Ready mode, which simplifies document view.

In this article, we’ll explore how to use the Document Ready mode of Froala in your React project app.

What is Document Ready Mode?

Froala’s Document Ready mode is a feature that simplifies the initialization of the editor and allows you to focus on creating content rather than wrestling with configuration settings.

It streamlines the setup process, making it more straightforward and user-friendly.

Prerequisites

Before we dive into using Document Ready mode, let’s ensure you have everything in place:

React Project: You should have a React project set up. If not, you can create one using create-react-app or your preferred method.

Installation: Install Froala Editor in your React project using npm or yarn:

npm install react-froala-wysiwyg --save

Import Styles: Import Froala’s CSS styles in your project. You can do this by adding the following line no App.js file:

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

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

Initializing Froala Editor Component

Now that we’ve got the prerequisites out of the way, let’s initialize Froala Editor in Document Ready mode within your React project. Follow these steps:

1. Import Froala Editor

In your React component where you want to use Froala Editor, start by importing the necessary dependencies:

import FroalaEditorComponent from "react-froala-wysiwyg";

2. Create the Component

Next, create your React component with this code:

function App() {

  let model = '<p><a href="https://froala.com">Froala WYSIWYG Editor</a></p>';

  return (

    <div id="froala-editor">

          <h1>Froala WYSIWYG Editor </h1>

          <h2>Tutorial about Document Ready</h2>

      <FroalaEditorComponent

        tag="textarea"

        model={model}

        config={{

          quickInsertTags: [""],

        }}

      />

    </div>
  );
}

export default App;

In the above code, we’ve created a simple React component.

3. Configure Froala Editor

To make the most of Froala Editor, you can configure it according to your needs.

Inside the initialization code block, you can pass configuration options as an object. Here’s an example of some common options you might want to use:

toolbarButtons: ['bold', 'italic', 'underline'],

In this example, we’ve customized the toolbar buttons. You can explore more configuration options in Froala’s official documentation.

Include Document Ready mode

Use this line to change your component for the Document Ready mode.

 documentReady: true

The “document ready mode” feature in the Froala WYSIWYG HTML Editor is designed to enhance the editing experience when creating online documents, making it more akin to using traditional word processors like Microsoft Word or Google Docs.

Enabling Document Ready Mode: When you enable the document mode in the Froala editor, it automatically configures the editor with optimized settings for creating documents.

These settings are tailored to make the editor behave more like a traditional word processor, making it easier to work with documents.

In summary, the Froala WYSIWYG HTML Editor’s “document ready mode” feature simplifies creating online documents by providing a set of optimized settings and essential tools for document editing.

It bridges the gap between traditional word processors and web-based editing, ensuring that your documents can be printed or exported as PDFs with ease, just like you would in a typical word processing software.

This feature can be particularly advantageous for web applications or websites that require users to generate and manage documents online.

The component will have this code:

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

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

import FroalaEditorComponent from "react-froala-wysiwyg";

function App() {

  let model = '<p><a href="https://froala.com">Froala WYSIWYG Editor</a></p>';

  return (

    <div id="froala-editor">

          <h1>Froala WYSIWYG Editor </h1>

          <h2>Tutorial about Document Ready</h2>

      <FroalaEditorComponent

        tag="textarea"

        model={model}

        config={{

          documentReady: true

        }}
      />

    </div>
  );
}
export default App;

Conclusion

By following the steps outlined in this article, you can easily integrate Froala Editor into your React project app using Document Ready mode.

This approach simplifies the setup process, allowing you to focus on creating and editing rich content while taking advantage of Froala’s extensive customization options.

Remember to refer to Froala’s official documentation for a comprehensive list of configuration options, events, and advanced features.

With Froala Editor and React, you can provide your users with a seamless and intuitive rich text editing experience in your web applications. Happy editing!

Grammarly announced that it would be discontinuing the Text Editor SDK, the developer tool that puts the company’s automated editing functionality into any app. The tool will be shut down on January 10th, 2024, after which the functionality will cease to work in any applications where it’s in use.

If you use Grammarly Text Editor SDK and your business will be affected by this change. You don’t need to worry. We’ve got you covered.

A WYSIWYG Editor that can integrate with Different JavaScript tools

Froala is a powerful WYSIWYG editor that can be easily integrated with different JavaScript tools on the web. Fortunately, there are a lot of JavaScript tools that provide similar Grammarly features. Incorporating a Grammarly alternative with Froala will maintain the same user experience in your application.

For instance, if you are looking for a grammar check and spelling correction suite, you can use WProofreader, the AI-powered component of WebSpellChecker. WProofreader works with the Froala editor seamlessly, providing real-time grammar, spelling, and punctuation checks. Check out how this integration works and see a working demo on our WProofreader integration page.

Another good Grammarly alternative is Sapling. In addition to grammar checking, Sapling also offers deep learning-powered autocomplete suggestions across all messaging platforms.

How to Integrate Sapling with Froala

Integrating Sapling with Froala is a straightforward process that requires minimal coding. Sapling offers an extensive API as well as SDKs that assist in grammar-checking text for Python and JavaScript, and an HTTP API that is language-agnostic. In this post, we will use the grammar-checking SDK for quick integration with Froala. Here are the steps required.

Prerequisites:

• Registering for an API key:

  Sapling offers a free plan with limited capabilities but it comes with a free 30-day trial of Sapling Pro. To allow you to try Sapling capabilities. Sign up for Sapling, and get your API key, to get started.

• Prepare your environment:

  Sapling and Froala are versatile tools that support popular JavaScript frameworks like React, Angular, and Vue. Both offer guidance on how to integrate within these frameworks. However, for the sake of clarity, this article will focus on a straightforward integration using basic HTML and JavaScript. You can then adapt these principles to your favorite framework.

Get started

At the beginning, create an HTML document with a single element where the editor will be initialized.

<!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>Froala & Sapling</title>

</head>

<body>

    <div id="editor-element">Lets get started!</div>

</body>

</html>

Start with initializing Froala:

• Include Froala Stylesheet on the page header

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

• Include the Froala script before the closing </body> tag

    <!-- include the latest Froala version script -->
    <script type='text/javascript' src='https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js'></script>

• Initialize the Froala editor by calling the Forala constructor function and passing the element selector as the first parameter

    <script> 

        new FroalaEditor('#editor-element');

    </script>

Now, if you open your HTML page on your browser, you should see the Froala editor opened

Initializing Sapling:

• Include the Sapling JavaScript file:

<script src="https://sapling.ai/static/js/sapling-sdk-v1.0.5.min.js"></script>

•  We need to initialize Sapling after the editor loads. In this case, we can initialize it inside the Froala initialized event or in the callback function which is passed as the third parameter to the Froala constructor function. Basically, it is the same as doing it like this

    <script> 

        let editor = new FroalaEditor('#editor-element',{},function(){

            Sapling.init({

              key: '***',

              mode: 'dev',

            });          

        });

    </script>

• Or doing it like this

    <script> 

        new FroalaEditor('#editor-element',{

            events: {

                'initialized': function () {                   

                Sapling.init({

                        key: '***',

                        mode: 'dev',

                        });

                }
            }

        });

   </script>

The Sapling init method takes an object that includes the following properties:

• `key`: This is the API key you received when you signed up for Sapling.
• `mode`: This can be either `’dev’ for development mode, or ‘prod’ for production mode. It determines what API endpoints Sapling will use.

Note:

• During development, you can pass in the API key and use Sapling’s endpoints by setting mode: ‘dev’ in the init function.
• For production, do not pass the API key in JavaScript. Instead, include the API key in your backend and call Sapling’s endpoints from the backend. This is the default setting with mode: ‘prod’.
• Remember to replace ‘***’ with your Sapling API Key.

Once Sapling is initialized, we can call any of the methods mentioned in the Sapling docs.

We will use Sapling.observe to observe the editor for changes and provide grammar corrections and suggestions every time we add content.

  <script> 

    new FroalaEditor('#editor-element',{},function(){

        Sapling.init({
            key: '***',
            mode: 'dev',
        });

        // `this` is the editor instance

        const contentEditable = this.$el[0];

        Sapling.observe(contentEditable);
    });

 </script>

 The observe method’s first parameter should be the contenteditable or textarea element that needs to be observed. In our example we used the this keyword, which contains the editor instance, to get the editing area element.

Open the HTML file in your browser to test integration. Grammar checks should automatically be applied as you type in the editor. After clicking on the incorrect text, a popup displays suggested corrections. Select the desired correction to apply it to the text.

The full example code is

<!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>Froala & Sapling</title>
    <!-- include the latest Froala version stylesheet -->
    <link href='https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css' rel='stylesheet' type='text/css' />
</head>
<body>

    <div id="editor-element" sapling-ignore="true">Lets get started!</div>

    <!-- include the latest Froala version script -->
    <script type='text/javascript' src='https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js'></script>
       
    <!-- include the Sapling SDK script -->
    <script src="https://sapling.ai/static/js/sapling-sdk-v1.0.5.min.js"></script>

    <script> 
    new FroalaEditor('#editor-element',{},function(){
       
        Sapling.init({
            key: '***',
            mode: 'dev',
        });

        // `this` is the editor instance
        const contentEditable = this.$el[0];
        Sapling.observe(contentEditable);
        
    });
    </script>
</body>
</html>

The example provided showcases only a glimpse of Sapling and Froala’s potential. We employed Sapling for live grammar and spelling checks within the editor. This can be further enhanced by tailoring Sapling to various editor events, leveraging different Sapling API methods, and even creating a custom Froala  plugin for implementing more Sapling features. 

Conclusion

The rolldown of Grammarly Text Editor SDK does not mark the end of automated writing assistant tools in your app. Explore the other options and choose the one that best fits your application’s needs.

Sapling offers a range of features such as grammar checking, writing suggestions, autocompletion, and more. You can easily integrate Sapling with the Froala WYSIWYG editor and provide users with a seamless writing experience. Using Sapling with Froala supports multiple languages, including, but not limited to English, German, and Spanish. 

Let’s start integrating Froala with Sapling and enjoy cleaner and free from grammatical errors writing experience. It is an essential add-on for writers, bloggers, marketers, or any users who frequently engage in content creation.

Leave a comment if you need help with the integration process or if you run into any issues.

The Froala Editor is a powerful WYSIWYG (What You See Is What You Get) HTML editor that offers a wide range of features for creating and editing content. One of its standout features is the ability to enhance its functionality by creating custom buttons. In this article, we will explore how to create custom toolbar buttons using React and Froala Editor to enhance your experience in creating content.

Understanding the Integration of Froala Editor and React

Before delving into the creation of custom buttons, let’s briefly examine the integration of Froala Editor with React. Froala Editor is a text editor that offers a seamless and user-friendly interface for editing content. Integrating Froala with React involves wrapping the editor inside a React component, thereby combining the capabilities of both technologies. You can learn more about the integration between React and Froala in the documentation on our website. To get started, you need to install the necessary dependencies for your React project.

npm install react-froala-wysiwyg --save

Once installed, 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:

const App = () => {   return (     <div >       <FroalaEditorComponent         tag="textarea"       />     </div>   ); }; export default App;

With this integration, you can have a basic Froala Editor running in your React application. However, the true power lies in creating customized buttons to enhance the capabilities of the editor.

Extending the Froala Editor with Custom Buttons

The toolbar of the Froala Editor is where users can find options for formatting text, adding images, links, and other elements. Creating custom toolbar buttons using React allows you to enhance this functionality and offer users additional features that are specifically designed for your application’s requirements. Froala Editor allows you to seamlessly integrate custom buttons into its toolbar, providing users with additional functionality tailored to their specific needs. To accomplish this, we will utilize the combination of React and the Froala Editor’s API. On the component file, import Froalaeditor component so we can use it to create the custom buttons

import Froalaeditor from 'froala-editor';

Then add the following code to create ‘Alert’, ‘Clear’, and ‘Insert’ buttons.

Froalaeditor.DefineIcon('alert', {NAME: 'info', SVG_KEY: 'help'});   Froalaeditor.RegisterCommand('alert', {     title: 'Hello',     focus: false,     undo: false,     refreshAfterCallback: false,     callback: function () {       alert('Hello!');     }   });   Froalaeditor.DefineIcon('clear', {NAME: 'remove', SVG_KEY: 'remove'});   Froalaeditor.RegisterCommand('clear', {     title: 'Clear HTML',     focus: false,     undo: true,     refreshAfterCallback: true,     callback: function () {       this.html.set('');       this.events.focus();     }   });   Froalaeditor.DefineIcon('insert', {NAME: 'plus', SVG_KEY: 'add'});   Froalaeditor.RegisterCommand('insert', {     title: 'Insert HTML',     focus: true,     undo: true,     refreshAfterCallback: true,     callback: function () {       this.html.insert('My New HTML');     }   });

Witnessing the Magic of Custom Buttons

With these custom buttons seamlessly integrated into the Froala Editor, users are empowered to utilize their extended functionalities. Each custom button reveals a unique aspect of improvement. Alert Button: The ‘alert’ button transforms into a messenger, delivering a JavaScript alert that displays the message “Hello!” when summoned with a click. Clear Button: The ‘clear’ button assumes the role of a content guardian, allowing users to remove the editor’s content while maintaining its focus, providing a blank canvas for new creations. Insert Button: The ‘Insert’ button emerges as a vessel of ingenuity, allowing users to infuse the editor’s canvas with the inscription “My New HTML,” enabling rapid creation. These custom buttons embody the essence of a personalized experience, guiding users towards a world of streamlined actions, driven by these customized functionalities.

The Flourish: Integrating Custom Buttons

The culmination of this customization journey occurs when these custom buttons are seamlessly integrated into the Froala Editor’s toolbar, enhancing the process of creating content. React takes center stage here, serving as the conduit for this integration.

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'; const App = () => {   return (     <div >       <FroalaEditorComponent         tag="textarea"         config={{           toolbarButtons: [['undo', 'redo' , 'bold'], ['alert', 'clear', 'insert']],         }}       />     </div>   ); }; export default App;

In the React component snippet above, the FroalaEditor component is imported and configured with the toolbarButtons prop. The toolbar is meticulously organized into two rows. The first row comprises standard buttons such as ‘undo,’ ‘redo,’ and ‘bold.’ The second row showcases the culmination of our endeavor – the custom buttons: ‘alert,’ ‘clear,’ and ‘insert.’ Below we can see images of the result of the component with the buttons that we saw in the React application. By following these steps, you can seamlessly integrate custom toolbar buttons into the Froala Editor using React. This approach empowers you to enhance the editor’s capabilities beyond its default features and create a more customized editing experience for your users.

Conclusion

Customizing rich text editors such as Froala using React opens up a world of possibilities for creating dynamic and feature-rich content creation experiences. By integrating custom toolbar buttons, you can provide users with specialized functionality that aligns with your application’s requirements. This not only enhances user satisfaction but also showcases your development skills in delivering a seamless and intuitive editing environment. So, go ahead and explore the combination of React and Froala Editor to create the ideal content creation tool for your web application. We have included a working example below that shows the complete code we have discussed.

Web applications have become a part of our lives by facilitating seamless communication and collaboration.

Rich text-editing capabilities are a crucial aspect of web app development. Users expect a user-friendly and easy-to-use interface to compose and present text.

Froala Editor is a feature-rich and customizable WYSIWYG (What You See Is What You Get) editor that enables users to easily create and format content. It supports various text styles, images, videos, and tables. This article explains how to use Froala Editor in a React app for better text editing.

Why Choose The Froala Editor

Before diving into the integration process, let’s briefly discuss why the Froala Editor stands out among other text editors. Froala Editor offers a comprehensive set of features that make it an excellent choice for developers and content creators.

• Rich Text Editing Capabilities: The Froala Editor provides a user-friendly interface that allows users to format and style text similar to a word processor.

• Responsive Design: The editor is designed to work seamlessly across different devices, ensuring a consistent experience for all users.
• Cross-browser Compatibility: Froala Editor supports all major web browsers, including Chrome, Firefox, Safari, and Edge.
• Customizable: Developers can customize the editor’s appearance and behavior to match the application’s theme and requirements.
• Media Support: The editor supports various media types, such as images and videos, making content creation more engaging.
• Undo/Redo Functionality: Users can easily undo or redo their actions. This provides a safety net for accidental changes.
• Easy Integration: The Froala Editor offers straightforward integration with popular frameworks, such as React, making it an ideal choice for developers.

With these features in mind, let’s move on to the steps required to integrate Froala Editor into a React application.

Installation and Setup

Prerequisites

Before integrating Froala Editor into your React application, make sure you have Node.js and npm (Node Package Manager) installed on your system. This allows one to create a new React project and effectively manage its dependencies.

Creating a React Application

To start, open your terminal and use the following command to create a new React application:

npx create-react-app froala-editor-demo

cd froala-editor-demo

This will set up a new React project in a directory called froala-editor-demo. Next, navigate to the project directory and install Froala Editor SDK:

npm install react-froala-wysiwyg --save

Importing and Initializing Froala Editor

After installing Froala Editor SDK, you need to import it and initialize it within your React application. To do this, follow these steps:

Open App.js, and import the necessary modules:

Import the Froala Editor CSS

Import the Froala Editor CSS to ensure that the editor’s styles are applied correctly.

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

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

Import the Froala Editor Component

import FroalaEditorComponent from 'react-froala-wysiwyg';

Usage Examples

Now that we have the basic integration set up, let’s explore some usage examples of the Froala Editor within our React application.

Example 1: Basic Usage

Using the FroalaEditorComponent is as simple as rendering it in your desired location within your React application.

Inside the App Function remove everything and add the following return statement

  return (
    <div>

      <h1>Froala Editor App</h1>
      <FroalaEditorComponent tag='textarea'/>
    </div>
  );

The App.js code now looks like

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

import FroalaEditorComponent from 'react-froala-wysiwyg';

function App() {

  return (
    <div>

      <h1>Froala Editor App</h1>
      <FroalaEditorComponent tag='textarea'/>
    </div>
  );
  
}

export default App;

Run the application and you will see the Froala editor rendered on the screen

Example 2: Customizing the Editor

Froala Editor allows you to customize various aspects of the editor. You can add custom configurations by passing an options object during initialization.

<FroalaEditorComponent tag='textarea' config={{

        toolbarButtons: ['bold', 'italic', 'underline'],

        quickInsertTags: [''],

}}/>

In this example, we modified the toolbar buttons to include only basic formatting options.

Conclusion

Rich text editing functionality can be easily added by creating interactive web applications with React and Froala Editor. In this article, we covered the installation, configuration, and fundamental usage examples for integrating Froala Editor into a React application. 

You can quickly enable Froala Editor’s extensive capabilities in your web application by following the installation and configuration instructions provided in this article.

Additionally, you can customize the editor to meet your individual needs thanks to its flexibility and customization options, which makes it a valuable tool for content creation, blog platforms, online editors, and many other web applications.

As you delve deeper into both technologies, you’ll discover a myriad of possibilities for building sophisticated web applications that cater to diverse user needs. So, go ahead, experiment, and create amazing interactive web apps with React and Froala Editor.

For more information, explore our React SDK documentation.

We are pleased to announce that Froala version 4.1 has been released. This new version of Froala also provides users with an improved experience, better performance and accessibility. It also includes new features such as support for Vue.js 3.x.

Vue.js 3.0 is a popular JavaScript framework for developing highly reactive user interfaces. Froala improves application user interfaces by offering an intuitive, feature-rich WYSIWYG editor that comes with numerous styling options, image management features, in-built support for rich text editing, video embedding, SEO-friendly, and many other features. That’s why I’m excited to show you how easy it is to integrate the Froala WYSIWYG editor with a Vue 3 application.

Before diving in, we assume you have a working knowledge of:

• JavaScript (including some of the newer, es2015 features)
• Vue 3
• How to use the terminal/command line
• Node and npm

We will create a simple application and guide you step-by-step through this tutorial. There will be a working demo at the end of the article.

Step 1: Create a simple Vue project

Skip this step if you already have a Vue 3 project setup. If not, head over to your terminal/console.

Using your terminal, you can create a new Vue.js project with vue-create:

1.1 Install the Vue CLI

npm install -g @vue/cli

1.2 Inside the folder where you want to create your new Vue project run the Vue create command for a basic Vue project

vue create my-froala-vue-app

1.3 The terminal will prompt some configuration questions. Carefully answer them with your preferred set-up settings. I selected `Default ([Vue 3] babel, eslint)` for a simple Vue 3 project. I also picked ‘NPM‘ as the package manager to use when installing dependencies.

Step 2: Install Vue WYSIWYG editor (the Froala Editor Package)

Step inside the project directory:

cd my-froala-vue-app

Once inside, install Froala’s Vue WYSIWYG editor by running the following command:

npm install vue-froala-wysiwyg --save

npm install [email protected] --save

Congratulations, you have successfully installed Froala in your Vue application. This means you can now use the VueFroala component in your project. To use the editor component in your application, you need to import it into main.js. Let’s see how to do that!

Step 3: Integration

3.1 Import Froala Editor in main.js

Open your main.js file and import the imperative bits for Froala Editor. Here’s what your file should include:

import { createApp } from 'vue'
import App from './App.vue'

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


// Import Froala Editor css files.
import 'froala-editor/css/froala_editor.pkgd.min.css';
import 'froala-editor/css/froala_style.min.css';


// Import Froala Editor component
import VueFroala from 'vue-froala-wysiwyg';

const app = createApp(App);          

app.use(VueFroala);
app.mount('#app');

3.2 Initializing the Editor

From within your project directory, open the src/App.vue file. By default, it makes use of a HelloWorld component:

<template>

  <img alt="Vue logo" src="./assets/logo.png">

  <HelloWorld msg="Welcome to Your Vue.js App"/>

</template>




<script>

import HelloWorld from './components/HelloWorld.vue'




export default {

  name: 'App',

  components: {

    HelloWorld

  }

}

</script>




<style>

#app {

  font-family: Avenir, Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

  margin-top: 60px;

}

</style>

Remove the importing and declaring the HelloWorld component within the <script> tags since we will use the Froala editor component instead.

In the App component definition, add the data function that defines the component’s data properties. Inside the data function, add the following properties:

• config: is an object that contains the editor API options
• model: a string containing the editor’s default HTML content displayed by the editor.

<script>

export default {

  name: 'App',

  data () {

    return {

      config: {

        //documentReady: true,

        //direction: 'rtl',

        heightMin: 300,

        events: {

          initialized: function () {

            console.log('initialized')

          }

        }

      },

      model: '<i>Edit Your Content Here!</i>'

    }

  }

}

</script>

Finally, replace the HelloWorld component within the <template> tags with the editor component :

<template>

  <img alt="Vue logo" src="./assets/logo.png">

  <froala id="edit" :tag="'textarea'" :config="config" v-model:value="model"></froala>

</template>

• :tag attribute is used to tell on which tag the editor is initialized.
• :config attribute is used to configure the editor options
• v-model:value Used to load editor content. This value is affected by editor HTML changes.

:config and v-model:value are using the config and model data properties we defined previously.
Note: There will be changes to the model value if you want to initialize the editor based on a, button, img, or input tags. We will cover these special tags in detail in another article since they change the editor’s interface.

Step 4: Run the project

After the integration is complete, it’s time to run your project to see the editor in action.

To start your local development server and see your application, run the following command in your terminal:

npm run serve

This command will start the development server and mounts your application at `http://localhost:8080`

You can always stop the server by using the `CTRl + C` command.

That should reveal your new Froala editor within your Vue 3 Project.

Step 5 Displaying HTML

To display content created with the Froala editor use the froalaView component.

<froalaView v-model:value="content"></froalaView>

Step 6: Customizing Your Froala’s Vue WYSIWYG editor

Customizing the Froala editor is distinctively easy. The powerful Froala Editor API allows customizations by adjusting our config object. Refer to the API options, events, and methods docs to see what it offers. For instance, you can edit toolbar buttons using the toolbarButtons API option. Here is an example

<template>

  <img alt="Vue logo" src="./assets/logo.png">

  <froala id="edit" :tag="'textarea'" :config="config" v-model:value="model"></froala>

</template>

<script>

export default {

  name: 'App',

  data () {

    return {

      config: {

          toolbarButtons: {

            'moreText': {

              'buttons': [ 'italic', 'underline', 'bold', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize', 'textColor', 'backgroundColor', 'inlineClass', 'inlineStyle', 'clearFormatting']

            },

            'moreParagraph': {

              'buttons': ['alignLeft', 'alignCenter', 'formatOLSimple']

            },

            'moreRich': {

              'buttons': ['insertLink', 'insertImage', 'insertVideo', 'insertTable', 'emoticons', 'fontAwesome', 'specialCharacters', 'embedly', 'insertFile', 'insertHR']

            },

            'moreMisc': {

              'buttons': ['undo', 'redo', 'fullscreen', 'print', 'getPDF', 'spellChecker', 'selectAll', 'html', 'help'],

              'align': 'right',

              'buttonsVisible': 2
            }

          },

        events: {

          initialized: function () {

            console.log('initialized')

          }

        }

      },

      model: '<i>Edit Your Content Here!</i>'

    }

  }

}

</script>

<style>

#app {

  font-family: Avenir, Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

  margin-top: 60px;

}

</style>

Options

You can pass any existing Froala option within the config attribute. Vue SDK users will also be able to utilize a specific Froala option:

• immediateVueModelUpdate: (default: false) This option updates the Vue model as soon as a key is released in the editor. Note that it may affect performance.

Events

As you can see in the previous example, API Events can be passed in with the options. Events are passed as an object named “events” in which you can define all the different events you want to use. Each defined event is an object where the key is the event name and the value is the callback function.

Methods

Using the editor instance from the arguments of the event callback you can call any method described in the method docs.

Custom Buttons

Furthermore, you can extend editor functionality by defining custom buttons. Froala allows us to define and add new buttons to the toolbar very conveniently and we will describe how to do this in a separate article.

Ready to build more with Froala and its Vue WYSIWYG Editor?

Froala doesn’t just provide a WYSIWYG editor but a powerful tool that enhances the user experience and makes content creation a breeze. With support for Vue, you can integrate Froala into various Vue projects ensuring a consistent user experience.

From the way you configure it, to the way you handle events or even create custom functionality, Froala’s Vue WYSIWYG Editor is remarkably simple and efficient.

Remember that an effective user interface yields better user engagement. Use Froala’s Vue WYSIWYG Editor for your content creation and enjoy the difference it makes.

Test Froala’s Vue Wysiwyg Editor

We built a Vue demo application showcasing the editor’s capabilities. You can use this as a starting point to test and understand how it works and fits your project requirements. Play with our demo and share your feedback in the comments.