April Savings -  20% Off All Froala Plans
Days
Hours
Minutes
Seconds
x

Froala Editor v4.2.0 is Here LEARN MORE

Pricing
Get Started
Skip to content
    Star

    Lists Plugin

    Allows users to insert lists in the editor, not just the basic lists like numbers and bullets but also advanced types such as lower greek or upper roman.


    Plugin options:

    listAdvancedTypes
    Boolean -     		Enables list advanced types for the bullets.

    Default: true

    Plugin methods:

    lists.format (tag_name)
    returns: Object    		 Format the selected paragraphs as a list.

    ● Tag_name: The type of the list to format. Possible values are: OL and UL.
    Type: String

    Commands:

    formatOL Triggered when insertOrderedList command is executed.
    formatUL Triggered when insertUnorderedList command is executed.

    Add Plugin to your code:

    Plugin name: lists

    Plugin JS Script: ../js/plugins/lists.min.js

    Or from CDN https://cdn.jsdelivr.net/npm/froala-editor@latest/js/plugins/lists.min.js

    Plugin CSS link:


    Example

    ● List Advanced type
    Back to Plugins

    Ready to dive in? Explore our plans

    See plans
    [class^="wpforms-"]
    [class^="wpforms-"]
    [bws_google_captcha]
    <div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_469447542" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
    [class^="wpforms-"]
    [class^="wpforms-"]
    [bws_google_captcha]
    <div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_2110477266" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
    [class^="wpforms-"]
    [class^="wpforms-"]
    [bws_google_captcha]
    <div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_959535186" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>