Explore Froala Lists Plugin Setup, Options, and Methods

Crafting content with clear structure and organization is essential for effective communication. Fortunately, Froala – a powerful rich text editor – offers advanced list formatting capabilities that go beyond the basic list features found in most editors. In this post, we’ll explore how you can harness Froala’s robust list management tools to create and customize lists like a pro.

What are HTML Lists? and How Are They Structured?

HTML lists are a way for web developers to group related items together in an organized manner. They help present content in a clear and structured way, making it more readable and accessible. There are three main types of lists in HTML:

1. Ordered Lists (<ol>): These lists are used when the order of items matters. Each item is numbered.
2. Unordered Lists (<ul>): These lists are used when the order of items doesn’t matter. Each item is marked with a bullet point.
3. Definition Lists (<dl>): These lists are used for terms and their definitions.

Each type of list serves a specific purpose and can be customized to fit the design and content requirements of your website. Let’s break down how each type of list is structured:

Ordered List (<ol>):

<ol>

<li>First item</li>
<li>Second item</li>
<li>Third item</li>

</ol>

• <ol>: This tag defines the start of an ordered list.
• <li>: Each list item is wrapped in this tag.

Unordered List (<ul>):

<ul>

<li>First item</li>

<li>Second item</li>

<li>Third item</li>

</ul>

• <ul>: This tag defines the start of an unordered list.
• <li>: Each list item is wrapped in this tag.

Definition List (<dl>):

<dl>

<dt>Term 1</dt>

<dd>Definition of Term 1</dd>

<dt>Term 2</dt>

<dd>Definition of Term 2</dd>

</dl>

• <dl>: This tag defines the start of a definition list.
• <dt>: This tag is used for each term.
• <dd>: This tag is used for each definition.

How does Froala Help in Creating HTML Lists?

Froala helps developers and non-developers create HTML content without needing to know or remember the HTML tags. Users can use the editor’s intuitive toolbar to format the content. The editor offers the option to create ordered or unordered lists without writing a single line of code. Moreover, Froala supports advanced list styling options, allowing users to customize the appearance of their lists. For example, you can change bullet points to different shapes. The Froala’s Lists plugin is responsible for providing this functionality.

By providing these features, Froala empowers non-developers to create well-structured and visually appealing HTML lists with ease, enhancing both the user experience and the quality of the web content.

Froala’s Lists plugin

Froala’s Lists plugin provides a comprehensive set of options and methods to create and manage HTML lists within your rich text editor. With Froala, you can easily insert, modify, and style unordered and ordered lists to enhance the structure and presentation of your content. The plugin allows you to seamlessly integrate lists into your web application’s content.

The Froala’s Lists plugin registers three buttons that can be added to the editor toolbar:

1. formatOLSimple: Display a button for formatting content in an ordered list where list items will be numbered with numbers.
2. formatOL: Display a list of options for formatting content in an ordered list
   1. Default: list items will be numbered with numbers.
   2. Lower Alpha: The list items will be numbered with lowercase letters style="list-style-type: lower-alpha;"
   3. Lower Greek: The list items will be numbered with lowercase classical Greek symbols style="list-style-type: lower-greek;"
   4. Lower Roman: The list items will be numbered with lowercase Roman numerals style="list-style-type: lower-roman;"
   5. Upper Alpha: The list items will be numbered with uppercase letters style="list-style-type: upper-alpha;"
   6. Upper Roman: The list items will be numbered with uppercase Roman numerals style="list-style-type: upper-roman;"
3. formatUL: Display a list of options for formatting content in an unordered list
   1. Default: Sets the list item marker to a disc bullet (small black circle).
   2. Circle: Sets the list item marker to a hollow circle.
   3. Disc: Sets the list item marker to a small black circle.
   4. Square: Sets the list item marker to a filled square.

By default, the formatOL and formatUL are displayed in the “Paragraph” toolbar buttons group. Learn more about Froala’s toolbar configuration.

Formatting a List

To create a list:

1. Click on one of the formatting toolbar buttons.
2. Start typing to create the first list item.
3. Press “Enter” to create a new list item.
4. To create a second-level list item, press “Tab”.
5. To decrease the list level, press “Shift + Tab”.
6. When you’re finished with the list, press “Enter” twice to start a normal paragraph.

If the content was already on the editor

1. Select it.
2. Click on one of the formatting toolbar buttons and it will be converted to a list.

To reformatting a list:

1. Select the list.
2. Click on the same formatting toolbar button that was used to create the list.

Installation and Setup of Froala Lists Plugin

If you include the Froala packaged script, the Froala Lists plugin is active by default. However, if you only include the Froala core script, you will need to add the Lists plugin script separately.

<!DOCTYPE html>
<html lang="en">

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

</head>

<body>

    <!--Editor element -->
    <textarea id="editor"></textarea>

    <!--Include Froala Script -->
    <script type='text/javascript'
        src='https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.min.js'></script>
            
    <!--Include Lists Plugin Script -->
    <script type='text/javascript'
        src='https://cdn.jsdelivr.net/npm/froala-editor@latest/js/plugins/lists.min.js'></script>


    <script>

        new FroalaEditor('#editor');
    </script>
</body>

</html>

If you are customizing the enabled plugins, add the “Lists” plugin to the `pluginsEnabled` option.

new FroalaEditor('#editor', {

  pluginsEnabled: ['lists', 'image', 'link', 'video']

});

When customizing the toolbar buttons, add the list formatting buttons you want to use to the toolbarButtons option.

new FroalaEditor('#editor', {

  pluginsEnabled: ['lists', 'image', 'link', 'video'],

  toolbarButtons: ['formatOL', 'formatUL', 'bold']

});

Similarly, customize the toolbarButtonsMD, toolbarButtonsSM, toolbarButtonsXS options. These options indicate the buttons to be displayed on medium, small, and extra small screens, respectively. By default, these options display the same buttons defined in the toolbarButtonsoption.

Customizing the Lists Plugin

Setting the listAdvancedTypes option to false disables the advanced types selection for the bullets. This restricts the list formatting options to the default settings only.

new FroalaEditor('#editor', {

  pluginsEnabled: ['lists', 'image', 'link', 'video'],

  toolbarButtons: ['formatOL', 'formatUL', 'bold'],

  listAdvancedTypes: false

});

Moreover, you can listen to the formatOL and formatUL actions and execute a custom function before or after them using Froala commands.before and commands.after events.

        new FroalaEditor('#editor', {
            pluginsEnabled: ['lists', 'image', 'link', 'video'],
            toolbarButtons: ['formatOL', 'formatUL', 'bold'],
            listAdvancedTypes: false,
            events: {
                'commands.before': function (cmd) {
                    if (cmd == 'formatUL' || cmd == 'formatOL') {
                        this.html.insert('Do somthing <b>before</b> ' + cmd + ' ');

                    }
                },
                'commands.after': function (cmd) {
                    if (cmd == 'formatUL' || cmd == 'formatOL') {
                        this.html.insert('Do somthing <b>after</b> ' + cmd + ' ');

                    }
                }
            }
        });

Additionally, the plugin provides a lists.format(tag_name) method, which allows developers to programmatically convert selected content into a list. If the tag_name is ‘OL’, the method will create an ordered list. If the tag_name is ‘UL’, the method will create an unordered list.

Try Froala List Plugin for Free

The Froala Lists plugin provides a flexible and customizable way to create and manage lists within your Froala-powered content editor. You can easily configure the available list formatting options, control the toolbar buttons, and even listen to list-related events to execute custom functionality. By leveraging the plugin’s programmatic methods, you can also dynamically convert content into ordered or unordered lists as needed. This level of control and extensibility allows you to tailor the list management experience to best fit your specific application requirements.

Ready to unlock the power of structured content? Try the Froala Editor for free today and experience the difference it can make in your web projects. Elevate your content with the advanced list formatting capabilities of Froala.