Customizing Froala’s Behavior with Command-Driven Events

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!