Customizing Froala Editors: Adding RTL and LTR Options for Text Direction

Link: https://support.brilliantdirectories.com/support/solutions/articles/12000100799

In this tutorial, we explore how to customize Froala editors, focusing on adding RTL and LTR options for text direction. For more details, refer to the Froala development page.

In many languages, the text flows either from left to right (LTR) or right to left (RTL), and adjusting the text direction in Froala text editors can be essential for accurately displaying content in these languages.

To customize text direction, follow the steps outlined below:

To begin, copy the code provided below:

<script>    // Function to change the text direction and alignment    var changeDirection = function (dir, align) {        // Save the current selection to maintain it after modifications        this.selection.save();        // Wrap the selected block tags        this.html.wrap(true, true, true, true);        // Restore the selection to work with the selected elements        this.selection.restore();        // Get the selected blocks        var elements = this.selection.blocks();        // Save the selection again to restore it after changes        this.selection.save();        // Iterate over the selected elements and apply changes        for (var i = 0; i < elements.length; i++) {            var element = elements[i];            if (element != this.el) {                // Change the text direction and alignment of the element                this.$(element)                    .css('direction', dir)                    .css('text-align', align)                    .removeClass('fr-temp-div'); // Remove the temporary class used for wrapping            }        }        // Unwrap the temporary divs used during the wrapping process        this.html.unwrap();        // Restore the original selection        this.selection.restore();    }    // Function to add custom buttons to the Froala editor    function addCustomButton(editor, FroalaEditor) {        // Define the icon for the right-to-left (RTL) button        FroalaEditor.DefineIcon('rightToLeft', { NAME: 'arrow-left', template: 'font_awesome' });        FroalaEditor.RegisterCommand('rightToLeft', {            title: 'RTL',            focus: true,            undo: true,            refreshAfterCallback: true,            callback: function () {                changeDirection.apply(this, ['rtl', 'right']); // Apply RTL direction and right alignment            }        });        // Define the icon for the left-to-right (LTR) button        FroalaEditor.DefineIcon('leftToRight', { NAME: 'arrow-right', template: 'font_awesome' });        FroalaEditor.RegisterCommand('leftToRight', {            title: 'LTR',            focus: true,            undo: true,            refreshAfterCallback: true,            callback: function () {                changeDirection.apply(this, ['ltr', 'left']); // Apply LTR direction and left alignment            }        });        // Add the custom buttons to the editor's toolbar		        let toolbarButtons = editor.opts.toolbarButtons;				if(Array.isArray(toolbarButtons)){			toolbarButtons.push('rightToLeft');       	 	toolbarButtons.push('leftToRight');		}else{ // scenario Froala Text Editor - Media Manager Access			toolbarButtons.moreText.buttons.push('rightToLeft');       	 	toolbarButtons.moreText.buttons.push('leftToRight');			toolbarButtons.moreText.buttonsVisible=12;		}        let settings = editor.opts;		        // Update the editor's toolbar options        editor.opts.toolbarButtons = toolbarButtons;        editor.destroy(); // Destroy the current editor instance        new FroalaEditor("#yourcustomid", settings); // Create a new editor instance with updated buttons    }    // Function to execute when the page is fully loaded    window.onload = function() {        // Ensure the editor instance is fully initialized before adding the custom button        addCustomButton(window["yourcustomid"], FroalaEditor);    };            //// EXTRA NOTE ////    /// change "yourcustomid" to the id or class of the froala you need to change</script>

Then, navigate to Toolbox >> Widget Manager to create a widget using this code.

After creating the widget, copy its shortcode for future use:

2. Customizing the Form

Next, customize the preferred form under Toolbox >> Form Manager. For this example, we will customize the "Feature - Member Articles" form to incorporate the text direction functionality.

Next, add a new form field with the type set to "Custom HTML," and then paste the previously copied widget shortcode into this field.

Important Note: The Database Variable assigned to this field is not important.

Next, click on the gear icon for the Froala Text Editor field and assign a unique "Outer Element ID." Be sure to copy this ID for future use.

To ensure the widget interacts correctly with the form field, open the newly created widget under Widget Manager:

On lines 83 and 89, replace "yourcustomid" with the Outer Element ID assigned to the Froala Text Editor field.

Before:

After:

This is how the end result would look like:

Customizing Froala Editors: Adding RTL and LTR Options for Text Direction

1. Create a Widget Using the Provided Code

2. Customizing the Form

3. Customizing the Widget to Refer to the Outer Element ID