Froala is a powerful WYSIWYG editor created by developers for developers. Its robust API empowers users to create highly customized and seamless user experiences. One of the Froala API’s standout features is the ability to execute commands programmatically. Furthermore, developers can run custom functions before or after specific commands are triggered.

In this blog post, we’ll explore the steps to master programmatic command execution and learn how to listen for their related events in Froala. By the end, you’ll have a solid understanding of how to leverage Froala’s advanced API Commands methods and events to build exceptional content editing experiences.

What Are the Types of Commands I Can Execute Programmatically In Froala

There are several types of commands that developers can call in their custom code. Here is the complete list:

1. Format The Selected Text
   1. Bold
      Developers can use the commands.bold() method to format the user-selected text as bold.
   2. Italic
      Developers can use the commands.italic() method to format the user-selected text as italic.
   3. strikeThrough
      The commands.strikeThrough() method helps developers to format the user-selected text as a strikethrough.
   4. Subscript
      The commands.subscript() method helps developers format the user-selected text as a subscript.
   5. Superscript
      The commands.superscript() method helps developers format the user-selected text as a superscript.
   6. Underline
      The commands.underline() method helps developers format the user-selected text as an underlined.
   7. Indent
      Using the commands.indent() method, developers can indent more of the selected paragraphs.
   8. Outdent
      Using the commands.outdent() method, developers can indent fewer of the selected paragraphs.
2. Clear Formatting
   If a developer wants to clear the format applied to the selected text, he can execute the commands.clearFormatting() method.
3. Insert a horizontal line
   The commands.insertHR() method helps developers insert a horizontal line in the editor.
4. Redo
   Using the commands.redo() method, developers can redo the user’s most recent action.
5. Undo
   Using the commands.undo() method, developers can undo the user’s last executed action.
6. Select All
   Using the commands.selectAll() method, developers can select all the content inside the editor.
7. Toolbar
   1. Display The Inline Toolbar
      The commands.show() method displays the inline toolbar at the cursor position.
   2. Open sub-toolbars
      1. The commands.moreText() method opens the more text actions toolbar.
      2. The commands.moreParagraph() method opens the more paragraph actions toolbar.
      3. The commands.moreRich() method opens the more rich text actions.
      4. The commands.moreMisc() method opens the more miscellaneous actions toolbar.
      5. The commands.moreTrackChanges() method opens the track changes actions toolbar.

All the methods do not accept any arguments, and you can call them from the editor instance. For example, to call the moreText command, you can do it like this

var editor = new FroalaEditor('.selector', {}, function () {

  // Call the method inside the initialized event.

  editor.commands.moreText ();

})

In the above code, the commands.moreText() method is called once the editor is initialized. This opens the “More Text” actions toolbar.

Customize The Editor Based on The Executed Commands

The Froala API provides developers with over 100 events that can be used to listen for specific actions performed by the user. Five of these events allow developers to customize the editor’s behavior and appearance based on the executed commands. By leveraging these events, developers can create highly interactive experiences tailored to their users’ needs. Let’s dig deeper into these events.

Execute Actions Prior to Command Execution

The commands.before event is triggered right before a command is executed. This allows developers to perform custom actions or validations before the command is carried out. For example, developers can use this event to display a confirmation dialog, update the UI, or perform any other action.

The command name is passed as the first parameter of the callback function for the commands.before event. To see the full list of commands that trigger this event, refer to the documentation. Depending on the command type, a second parameter may be defined in the callback function, providing information related to the executed command. For example, when the fontSize command is executed, the second parameter will be the selected font size.

Developers can listen to the commands.before event, check which command is being executed, and then take an appropriate action based on that command. For example:

var editor = new FroalaEditor('.selector', {
  events: {
    'commands.before': function (command, param) {
      // Perform custom actions here.
      console.log('Command about to be executed:', command);
      if(command== "fontSize"){
        if(param == "72px")
            this.inlineStyle.apply('color: red;');
      }      
    }
  }
});

In the above example, the `commands.before` event is used to listen for commands before they are executed. In this case, when the fontSize command is about to be executed, the code checks if the selected font size is 72px. If so, it applies a custom inline style to the editor, setting the text color to red. This shows how developers can customize the editor’s behavior based on the specific command being executed.

In the code, we used the inlineStyle.apply method to style the text. Click to learn more about the Froala Inline Style plugin and how it differs from the Inline Class plugin.

Execute Actions Following Command Execution

If you need to run custom code after a specific command is executed, you can use the commands.after event. This event is triggered immediately after a command is executed, allowing you to perform additional actions or update the UI as needed. The callback function for this event receives the same parameters as the commands.before event – the command name and any additional information related to the executed command.

Execute Actions According to the Clicked Button

Froala offers the commands.mousedown(btn) event which is triggered when a button in the editor’s toolbar is clicked. This allows developers to perform custom actions based on the specific button that was clicked. The callback function for this event receives the clicked button element as a parameter, which can be used to identify the button and execute the desired logic.

In the following example, the commands.mousedown event is used to listen for when a button in the editor’s toolbar is clicked. In this case, when the “Bold” button is clicked, the code checks the data-cmd attribute of the clicked button to identify the command. If the command is “bold”, it applies a custom inline style to the editor, setting the text color to red. This demonstrates how developers can customize the editor’s behavior based on the specific button that was clicked.

let editor = new FroalaEditor('#editor', {

        events: {

            'commands.mousedown': function(btn) {
                  // Do something here.
                  // this is the editor instance.
                  let cmd = btn[0].getAttribute('data-cmd');
                  if( cmd == "bold"){
            		this.inlineStyle.apply('color: red;');
                  }
  
           }
        }
    }, function () {

});

The Difference Between Before, After, and Mousedown Command Events

Here are the key differences between these events to help you choose the right one:

• The Mousedown event is triggered before the Before and After events.
• The Mousedown event can be triggered by any toolbar button, while the Before and After events are specific to certain commands.
• The callback function for Before and After events may include a second parameter with additional information about the executed command.

Redo and Undo Specific Command Events

The Froala API also provides events for handling redo and undo actions. The commands.redo() event is triggered when the user performs a redo action, while the commands.undo()event is triggered when the user performs an undo action. These events allow developers to customize the editor’s behavior or update the UI in response to these actions.

For example, you could use the commands.redo event to update a counter or button state to reflect the current redo/undo state. Similarly, the commands.undo event could be used to update the UI to show that an action has been undone. By leveraging these events, developers can create a more responsive and interactive editor’s behavior.

Elevate Your Application User Experience

Froala’s powerful API and rich set of events provide developers with the tools to create highly customized and interactive content editing experiences. By leveraging the commands.before, commands.after, and commands.mousedown events, you can execute custom logic at key points in the editing workflow – before and after commands are executed, and when specific toolbar buttons are clicked.

These events, combined with the ability to inspect the executed commands and their parameters, give you granular control over Froala’s behavior. You can use this to display confirmations, update the UI, apply custom styles, and much more. The redo and undo-specific events also allow you to keep your application in sync with the user’s actions.

With this knowledge, you’re now equipped to take your Froala-powered applications to new heights. Start experimenting with command-driven events today and unlock the full potential of this robust WYSIWYG editor. Download Froala for free and try it out for yourself!

Styling text is essential for modern web applications. Rich-text editors make it easy to style text and preview changes in real time. These editors provide various buttons to apply different styles to the text. Professional WYSIWYG editors, like Froala, go a step further. They allow developers to combine multiple formats for the end-user to apply with a single button, streamlining the process of applying styles. This helps create a consistent user experience for the end-user.

The Froala inline styles and inline classes plugins help in styling text but using two different approaches. Each approach has its advantages and disadvantages, and the choice between them depends on the project’s specific requirements. Inline styles are applied directly to the HTML element, while inline classes are applied to the element using a CSS class. The choice between the two depends on factors such as the complexity of the styling, the need for reusability, and the overall maintainability of the codebase.

In this article, we will explore the difference between inline styles and inline classes plugins, and provide guidance on when to use each approach. Understanding the differences between these two plugins can help developers make informed decisions and create more efficient and maintainable web applications.

How Does The Froala Inline Style Plugin Work?

The Froala Inline Style plugin offers the inlineStyles option that is used to define some CSS styles that can be applied to text.

When the Froala Inline Style plugin is activated, a button appears on the editor toolbar that opens a list of the predefined styles. Choosing a style will apply its corresponding CSS rules inline to the selected text allowing end-users to effortlessly enhance the visual appeal of your text.

How Does The Froala Inline Class Plugin Work?

The Froala Inline Class plugin offers the inlineClasses option that is used to define some CSS class names that can be applied to text. The CSS classes themselves should be defined in the page stylesheet.

When the Froala Inline Class plugin is activated, a button appears on the editor toolbar that opens a list of the predefined styles. Choosing a style will apply its corresponding CSS class to the selected text allowing end-users to effortlessly enhance the visual appeal of your text.

Inline Style VS Inline Class

Both plugins offer a user-friendly way to make your text more engaging and visually appealing, helping you stand out with iconic text styles.

The choice between inline styles and inline classes often depends on the specific requirements of the project, such as the complexity of the styling, the need for reusability, and the overall maintainability of the codebase.

Inline styles are useful for simple, one-off styling requirements, as they can be quickly applied and don’t require additional CSS files. However, they can make the HTML code more cluttered and harder to maintain. Inline classes, on the other hand, allow for more modular and reusable styling, as the CSS can be defined in a separate file. This can lead to a more organized and maintainable codebase but may require more upfront effort to set up.

Developers should consider factors such as code maintainability, performance, and overall project requirements when deciding which approach to use. Ultimately, a combination of both techniques may be the most effective solution, allowing for flexibility and consistency in the application’s styling.

What is the difference between Inline Style, Inline Class, and Paragraph Style Plugin?

The Paragraph Style plugin in Froala is a separate plugin that allows users to apply predefined styles to entire paragraphs, rather than just inline text. In contrast, the Inline Style and Inline Class plugins focus on applying styles to selected text within a paragraph. The choice between these plugins depends on the specific needs of the project and the desired level of control over the text formatting.

Learn more about the Paragraph Style plugin.

The Inline Style and Inline Class Plugins in Code

Both plugins are included by default when the Froala packaged JavaScript file is included. However, if you’re using the core editor files only, you may include the plugins individually.

Installation

Use the following code to include the Inline Style plugin:

<script type='text/javascript' src='{url_based_on_your_download_option}/js/plugins/inline_style.min.js'></script>

Use the following code to include the Inline Class plugin:

<script type='text/javascript' src='{url_based_on_your_download_option}/js/plugins/inline_class.min.js'></script>

Activation

When customizing the enabled plugins, ensure that the inlineStyle and inlineClass values are included in the pluginsEnabled array to keep the Inline Style and Inline Class plugins enabled.

new FroalaEditor('#HTMLElement',{

   pluginsEnabled: ['image', 'link', 'video', 'inlineStyle', 'inlineClass']

});

When customizing the editor toolbar buttons, ensure that the inlineStyle and inlineClass values are included in the toolbarButtons array to display the buttons needed to open the dropdown corresponding to each plugin.

new FroalaEditor('#HTMLElement',{

    toolbarButtons: ['inlineStyle', 'inlineClass', 'bold', 'italic', 'underline', 'fontFamily', 'fontSize', '|', 'paragraphFormat', 'align', 'undo', 'redo', 'html'],

});

Styles Definition

For Inline Styles, define styles using inlineStyles option. It is an object where the property name is the text shown in the dropdown menu when the inlineStyle button is clicked while the property’s value is the inline CSS rules that will be applied to the text. For example, if the inlineStyles is

// Define new inline styles.

inlineStyles: {

      'Big Red': 'font-size: 20px; color: red;',

      'Small Blue': 'font-size: 14px; color: blue;'

}

This will display two options on the dropdown menu:

• Big Red: once selected, the editor will wrap the selected text into <span style=”font-size: 20px; color: red;”> </span>.
• Small Blue: once selected, the editor will wrap the selected text into <span style=”font-size: 14px; color: blue;”> </span>.

For Inline Classes, define styles using inlineClasses option. It is an object where the property name represents a CSS class and its corresponding value is the text shown in the dropdown menu when the inlineClasses button is clicked. For example, if the assigned object is

// Define new inline styles.

inlineClasses: {

   'fr-class-code': 'Code',

   'fr-class-highlighted': 'Highlighted',

   'fr-class-transparency': 'Transparent'

}

and define the classes in the CSS code

<style>

  .fr-view .fr-class-highlighted {

    background-color: #ffff00;

  }

  .fr-view .fr-class-code {

    border-color: #cccccc;

    border-radius: 2px;

    -moz-border-radius: 2px;

    -webkit-border-radius: 2px;

    -moz-background-clip: padding;

    -webkit-background-clip: padding-box;

    background-clip: padding-box;

    background: #f5f5f5;

    padding: 10px;

    font-family: "Courier New", Courier, monospace;

  }

  .fr-view .fr-class-transparency {

    opacity: 0.5;

  }

</style>

This will display three options on the  Inline Classes dropdown menu:

• Code: when selected, the editor will toggle the ‘fr-class-code’ class in the selected text.
• fr-class-code: when selected, the editor will toggle the ‘fr-class-highlighted’ class in the selected text.

• fr-class-code: when selected, the editor will toggle the ‘fr-class-transparency’ class in the selected text.

Plugins Methods

The Inline Styles plugin provides the inlineStyle.apply(value) method, which can be used to dynamically apply inline styles to a text. The value parameter is a string that represents the inline CSS style to be applied to the selected text.

The Inline Class plugin provides the inlineClass.apply(value) method, which can be used to dynamically add a specific class to the selected text. The value parameter is the name of the defined class that should be applied to the selected text.

Full Code Example

Here is a full code example:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" />
        <link href='https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css' rel='stylesheet' type='text/css' />

        <style>

          .fr-view .fr-class-highlighted {
            background-color: #ffff00;
          }
        
          .fr-view .fr-class-code {
            border-color: #cccccc;
            border-radius: 2px;
            -moz-border-radius: 2px;
            -webkit-border-radius: 2px;
            -moz-background-clip: padding;
            -webkit-background-clip: padding-box;
            background-clip: padding-box;
            background: #f5f5f5;
            padding: 10px;
            font-family: "Courier New", Courier, monospace;
          }
        
          .fr-view .fr-class-transparency {
            opacity: 0.5;
          }

        </style>
    </head>

    <body>

            <textarea id="editor"></textarea>


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

        <script> 
            new FroalaEditor('div#froala-editor', {
              toolbarButtons: ['inlineStyle', 'inlineClass', 'bold', 'italic', 'underline', 'strikeThrough', 'fontFamily', 'fontSize', '|', 'align', 'undo', 'redo', 'html'],
            
              // Define new inline styles.
              inlineStyles: {
                'Big Red': 'font-size: 20px; color: red;',
                'Small Blue': 'font-size: 14px; color: blue;'
              },
                  inlineClasses: {
                  'fr-class-code': 'Code',
                  'fr-class-highlighted': 'Highlighted',
                  'fr-class-transparency': 'Transparent'
                },
              events: {
                'commands.after': function(cmd) {
                  // Do something here.
                  // this is the editor instance.
                  if(cmd== "strikeThrough"){
                   this.inlineStyle.apply('font-size: 20px; color: red;');
\                  
                  }
                        // this is the editor instance.
                  if(cmd== "bold"){
                   this.inlineClass.apply('fr-class-code');
                  }
                }
              }
            })

        </script>
    </body>

</html>

Balancing Simplicity and Maintainability in Froala’s Rich-Text Editor

Froala, a popular rich-text editor, offers two approaches to enhancing the visual appeal of text in web applications: inline styles and inline classes. Both are powerful tools, but each has its own advantages and disadvantages.

Inline styles, as offered by Froala’s Inline Style plugin, provide a quick and easy way to apply formatting to text. With just a few clicks, you can wrap your selected text in custom CSS rules, making it stand out and grab your users’ attention. This can be particularly useful for simple, one-off styling requirements.

However, inline styles can also lead to cluttered HTML and maintainability issues over time. That’s where Froala’s Inline Class plugin comes in. This approach allows you to define CSS classes in your stylesheet and then easily apply them to text within the editor. While it may require a bit more upfront effort to set up, this modular and reusable approach can result in a cleaner, more organized codebase.

As you continue to build and enhance your web applications, I encourage you to download Froala and experiment with both the Inline Style and Inline Class plugins. Take the time to carefully consider the tradeoffs between the two approaches and choose the one that best fits your specific needs. With Froala’s powerful tools and the right techniques, you can create engaging and visually appealing content that captivates your users and helps your application stand out from the crowd.

Froala is a popular rich text editor that offers users various editing modes, each with its own user interface and use cases. As a writer or content creator, understanding the differences between these modes can help you select the most appropriate one for your project needs.

In this blog post, we’ll take a deep dive into the four main editing modes provided by Froala: Classic, IFrame, Inline, and Document. We’ll explore the key characteristics of each mode, their benefits, and the scenarios where they are best suited. By the end, you’ll have a solid understanding of Froala’s editing capabilities and be equipped to choose the right mode for your content creation workflows.

Classic Froala Editor

The Classic mode is the default and most commonly used editing mode in Froala. In this mode, the editor is displayed as a standalone element on the page, typically within a <div> or <textarea> element.

This mode is the default mode in the Froala editor. You don’t need any special configuration when you initialize the editor.

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" />
        <link href='https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.min.css' rel='stylesheet' type='text/css' />
    </head>

    <body>

        <div id="froala-editor"></div>

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

        	new FroalaEditor('div#froala-editor');

        </script>
    </body>

</html>

In this mode, the editor toolbar is always visible at the top of the editor. If you want to make the toolbar stay visible as you scroll the content, you need to enable the toolbarSticky option.

 new FroalaEditor('div#froala-editor', {
    toolbarSticky: true
  })

You can also display the toolbar at the bottom instead of the top of the editor by setting the toolbarBottom option to true.

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

    toolbarBottom: true

  })

Explore how to customize the Froala editor toolbar.

The Froala classic mode is suitable for scenarios where you want the editor to be a distinct element on the page, such as in a content management system or a form. It provides a familiar and intuitive interface for users to input and format text.

IFrame Froala Editor

The IFrame mode embeds the Froala editor within an <iframe> element. This isolates the editor’s content and styling from the main page, providing a more secure and independent editing environment.

This mode is useful when you need to ensure the editor’s content and styles do not interfere with the surrounding page. It can be particularly helpful in scenarios where the page has complex layouts or existing styles that could potentially conflict with the editor.

The user interface of the editor is the same as it is in the classic mode.

To enable this mode, set the iframe option to true.

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

iframe: true

})

Full Page Mode

The Full Page mode is similar to the classic mode but allows the usage of HTML, HEAD, BODY tags and DOCTYPE declaration. This mode is useful when you need to edit the entire web page, including the <head> and <body> sections. It provides a more comprehensive editing experience, allowing you to modify the page’s metadata, styles, and overall structure. The Full Page mode is particularly beneficial when working on standalone HTML pages or templates that require a complete document-level editing capability.

To enable the Full Page mode, set the fullPage option to true when initializing the Froala Editor.

new FroalaEditor('div#froala-editor', {
   fullPage: true
 })

Inline (Distraction-Free) Mode

The minimalist interface of this mode helps you focus on your content. In Froala’s Inline mode, the editor’s toolbar remains accessible but stays hidden until needed, providing a clean and minimalist interface, ensuring a seamless and uninterrupted writing experience. This mode makes it easier for users to focus on their content.

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

toolbarInline: true,

});

The toolbarVisibleWithoutSelection option allows you to control whether the toolbar should be displayed when the user:

1. Select content within the editor.
2. Focuses on the editor without selecting any content.

This gives you the flexibility to decide when the toolbar should be visible to the user.

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

toolbarInline: true,

toolbarVisibleWithoutSelection: true,

});

By default, Froala displays Character and Word Counts at the bottom of the editing area. However, it may be feasible to hide this information in this mode.

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

toolbarInline: true,

toolbarVisibleWithoutSelection: true,

charCounterCount: false,

wordCounterCount: false

});

This mode is suitable for scenarios where you want to provide a seamless editing experience within the page’s content, such as in a blog post or a content-heavy website.

Explore Froala’s inline editing mode.

Document Mode

The Document mode in Froala is similar to the classic mode but with a different default toolbar configuration optimized for creating online documents. The editing area is taller, providing an A4 page layout design. However, this mode does not offer page break, headers, or footers features. The Document mode is best suited for scenarios where you need a rich text editor with a document-like appearance, such as in a word processor or a report generator. The increased editing area height makes it easier to work with longer-form content.

The content is editable within the editor, and the changes are reflected in the underlying HTML structure.

To enable this mode, set the documentReady option to true.

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

documentReady : true,

});

Edit in Popup

The Froala editor’s “Edit in Popup” mode allows users to quickly update text content within a focused popup environment. In this mode, the toolbar functionality is not available, making formatting a text is not an option but users can easily make simple text updates without the complexity of the complete editor interface. To enable this mode, set the editInPopup option to true when initializing the Froala editor. The popup will appear when the user focuses on the text, providing a streamlined experience for updating specific content areas within your application.

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

editInPopup : true,

});

What Are Froala Initialize Modes?

Froala is a flexible editor that can be initialized on different HTML elements, giving different UI and options for each.

The different modes we have discussed in this article can be applied when the editor is initialized on <div>, <p>, or <textarea> elements. However, the Froala editor can be initialized on other elements where these modes will not be applicable. For example:

• Initialize on a Button: in this mode, a popup will be displayed to update the button text.
• Initialize on an Image: The image popup will be displayed to replace or edit the image.
• Initialize on a link: allowing you to update, remove, and set link attributes.

Conclusion

Froala rich text editor offers a variety of editing modes to cater to different use cases. The choice of editing mode will depend on the specific requirements of your project and the type of editing experience you want to provide to your users. By understanding the differences between the Classic, IFrame, Inline, and Document modes, you can choose the most appropriate mode for your project and provide a seamless and efficient editing experience for your users.

Try Froala for free and explore its different modes.