Froala Paragraph Styles for Online JavaScript Editors

Transforming ordinary paragraphs into iconic statements is now within your reach with the powerful Froala online javascript editor. By harnessing the capabilities of the Froala Paragraph Style plugin, you can effortlessly infuse your text with a touch of creativity and sophistication. Whether you aim to emphasize crucial details, craft a distinct visual identity, or simply engage your audience on a deeper level, this plugin equips you with the tools to make your paragraphs truly stand out.

In this article, we will learn how to use the Froala Paragraph Style plugin to enhance the appearance of your text. You can apply different formatting options to make your paragraphs visually striking. Additionally, you can experiment with various font styles, colors, and sizes to create a unique and captivating design. Let’s dive into the features and functionalities of this plugin to elevate your paragraph presentation.

How does the Froala Paragraph Style Plugin Work?

When the Froala Paragraph Style plugin is activated, a button appears on the editor toolbar that opens a list of predefined styles. These styles are defined using CSS classes through the paragraphStyles API option. Choosing a style will apply its corresponding class to the selected paragraphs allowing you to effortlessly enhance the visual appeal of your text. By experimenting with different fonts, colors, and sizes, you can create a unique and captivating design for your paragraphs. This plugin offers a user-friendly way to make your text more engaging and visually appealing, helping you stand out with iconic paragraph styles with your online javascript editor.

What does the Froala Paragraph Style Plugin API do?

The Froala Paragraph Style plugin offers two options and one method for customizing paragraph styles in the editor.

The Froala Paragraph Style Plugin Options

1. paragraphStyles:

The paragraphStyles option enables developers to create custom styles for selected paragraphs. 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 “Paragraph Styles” button is clicked. For example, if the assigned object is

{

'fr-text-gray': 'Gray',

'fr-text-bordered': 'Bordered',

}

This will display two options on the dropdown menu.

• Gray: once selected, the editor will check the selected paragraph. If it does not have the ‘fr-text-gray’ class, the editor will add it. If the selected paragraph already has that class, the editor will remove it.
• Bordered: once selected, the editor will check the selected paragraph. If it does not have the ‘fr-text-bordered’ class, the editor will add it. If the selected paragraph already has that class, the editor will remove it.

By default, the paragraphStyles option has the following value:

{

'fr-text-gray': 'Gray',

'fr-text-bordered': 'Bordered',

'fr-text-spaced': 'Spaced',

'fr-text-uppercase': 'Uppercase'

}

You can also define your custom styles and their corresponding classes. When you add your custom class name, make sure you have defined that class in the page stylesheet.

2. paragraphMultipleStyles

Using the paragraphMultipleStyles option, developers can choose whether users can apply a single style or multiple styles from the defined styles in the paragraphStyles option. This gives you control over the number of styles that should be applied to each paragraph using the Paragraph Styles feature. By default, the paragraphMultipleStyles option is set to true.

The Froala Paragraph Style Plugin Methods

The Froala Paragraph Style plugin provides the paragraphStyle.apply(className) method to programmatically apply a specific CSS class to selected paragraphs. This method can be called within editor events or used to create custom buttons for applying paragraph styles.

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

    // Call the method inside the initialized event.

    editor.paragraphStyle.apply('light');

})

This flexibility in styling empowers you to create visually appealing and unique paragraph designs effortlessly. Experimenting with different font styles, colors, and sizes can help you enhance the visual appeal of your text effectively.

Installation and Setup of The Froala Paragraph Style Plugin

Step 1: Add the Froala Paragraph Style plugin files.

If you have included the Froala packaged files in your web application, then the Paragraph Style plugin JavaScript file is included by default. Skip to step #2.

<link href='{url_based_on_your_download_option}/css/froala_editor.pkgd.min.css' rel='stylesheet' type='text/css' />

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

Otherwise, you should include the plugin script file. The plugin doesn’t have a stylesheet file.

<!-- The editor core files -->

<link href='{url_based_on_your_download_option}/css/froala_editor.min.css' rel='stylesheet' type='text/css' />

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



<!-- The plugin script file -->

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

Step 2: Activate the plugin

By default, the plugin is activated when its JavaScript file is added. However, if the pluginsEnabled option is customized, you should include the paragraphStyle in its assigned value. This ensures that the plugin is active and ready to be used.

new FroalaEditor('#HTMLElement',{

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

});

Step 3: Add the Paragraph Styles Button to the Froala Toolbar

The Paragraph Styles Button is shown by default when the plugin is active. If the toolbarButtons option is customized, include paragraphStyle in the assigned value to display the button.

new FroalaEditor('#HTMLElement',{

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

    toolbarButtons: ['bold','insertLink', 'insertImage', 'insertVideo','paragraphStyle']

});

Do the same with 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 toolbarButtons option.

Common use cases of the Paragraph Styles feature

The Paragraph Styles feature is very popular among users as it helps them with

• Highlighting Important Information: Use different styles to draw attention to key points or important information within your paragraphs.
• Creating a Consistent Design: Maintain a uniform look throughout your document by applying predefined styles to different sections.
• Enhancing Readability: Experiment with font styles, colors, and sizes to improve the readability of your text and make it more visually appealing.
• Adding Emphasis: Apply unique styles to specific paragraphs to emphasize their significance or create a visual hierarchy in your content.

And much more…

Conclusion

The Froala Paragraph Style plugin offers a versatile toolkit to elevate your content presentation. By highlighting important information, creating a consistent design, enhancing readability, and adding emphasis, you can captivate your audience with visually appealing paragraphs. Take your writing to the next level with the power of customization at your fingertips.

Ready to make your paragraphs iconic? Start transforming your text today with the Froala and unleash your creativity like never before!