Styling Your Froala HTML Editor

Everything these days can be customized to fit your unique needs and software is no exception! The Froala Editor can be easily tailored to carry your specific brand image. This article talks about how easy it is to apply styles to the editor. 

Froala WYSIWYG HTML Editor provides some really handy styling options such as applying Color Themes, Font Family, Inline style, and Paragraph styles to customize your editor. 

Read on to learn how to change your color themes, text style and font, inline styles, and paragraph styles.

Color Theme

This feature provides users with the best way to change the default theme of the HTML editor to create a custom theme and customize the rich text editor’s interface.

Step 1: Include CSS Files Under Resources in JS Fiddle

https://editor-latest.s3.amazonaws.com/v3/css/froala_editor.pkgd.min.css
https://editor-latest.s3.amazonaws.com/v3/css/themes/dark.min.css
https://editor-latest.s3.amazonaws.com/v3/css/themes/royal.min.css
https://editor-latest.s3.amazonaws.com/v3/css/themes/gray.min.css

Step 2:  Include JS File under resources in JS Fiddle

https://editor-latest.s3.amazonaws.com/v3/js/froala_editor.pkgd.min.js

Step 3: Add the HTML code of the editor at the desired location on the page.

<div id="eg-dark-theme">
  Dark Theme
</div>
<br/>
 
<div id="eg-gray-theme">
  Gray Theme
</div>
<br/>

Step 4: Add the JavaScript code of the editor in the JavaScript Block

new FroalaEditor('div#eg-dark-theme', {
        // Set dark theme name.
        theme: 'dark',
        zIndex: 2003
      })

      new FroalaEditor('div#eg-gray-theme', {
        // Set gray theme name.
        theme: 'gray',
        zIndex: 2001
      })

      new FroalaEditor('div#eg-royal-theme', {
        // Set royal theme name.
        theme: 'royal'
      })

Check the working functionality here :

Font Family

This feature enables you to change the text style and font from the default. 

Include the font on your webpage and then follow the steps to add the font. Here we demonstrate how to add 4 google fonts: Roboto, Oswald, Monstserrate, and Open Sans Condensed. Define the font that appears in the Font Family dropdown using the font family option. 

Step 1: Include CSS Files Under Resources in JS Fiddle

https://cdn.jsdelivr.net/npm/froala-editor/css/froala_editor.pkgd.min.css
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
https://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,700,700italic&subset=latin,vietnamese,latin-ext,cyrillic,cyrillic-ext,greek-ext,greek
https://fonts.googleapis.com/css?family=Oswald:400,300,700&subset=latin,latin-ext

Step 2: Add JS File under Resources in JS Fiddle

https://editor-latest.s3.amazonaws.com/v3/js/froala_editor.pkgd.min.js

Step 3: Add the HTML code of the editor at the desired location on the page.

<div id="froala-editor">
  <p>By default the font family icon is visible in the editor's toolbar. If you want to be able to see the actual font family for the selected text you can use the <a href='../docs/options#fontFamilySelection' title='fontFamilySelection' target='_blank'>fontFamilySelection</a> option.</p>
</div>

Check the working functionality here :

Inline Styles

This feature enables you to define a custom style for the selected text inside the WYSIWYG HTML editor using the inline.style.min.js plugin. Note that it’s important to have unique names for the style or they won’t function properly. 

Step 1: Include CSS Files Under Resources in JS Fiddle

https://editor-latest.s3.amazonaws.com/v3/css/froala_editor.pkgd.min.css
https://editor-latest.s3.amazonaws.com/v3/css/froala_style.min.css

Step 2: Include JS File Under Resources in JS Fiddle
https://editor-latest.s3.amazonaws.com/v3/js/froala_editor.pkgd.min.js

Step 3: Add the HTML code of the editor at your desired places on the page.

<div id="froala-editor">
  <p>Use the Inline Style dropdown to select the desired inline style for the selected text inside the rich text editor.</p>
</div>

Step 4: Add the Javascript code of the editor and editor attribute as 

new FroalaEditor('div#froala-editor', {
  toolbarButtons: ['bold', 'italic', 'underline', 'strikeThrough', 'fontFamily', 'fontSize', '|', 'inlineStyle', 'paragraphFormat', 'align', 'undo', 'redo', 'html'],

  // Define new inline styles.
  inlineStyles: {
    'Big Red': 'font-size: 20px; color: red;',
    'Small Blue': 'font-size: 14px; color: blue;'
  }
})

Check the working functionality here:

Paragraph styles

Apply text formatting incorporating all elements of text formatting, including character attributes such as font, size, style, and color, along with paragraph attributes such as indentation and alignment. They differ from character styles in that they are applied to the entire paragraph at once, not just to selected characters. Using the paragraph_style.min.js plugin it is possible to add custom style on the selected paragraph inside the WYSIWYG HTML editor.

Step 1: Include CSS File under Resources in JS Fiddle

https://editor-latest.s3.amazonaws.com/v3/css/froala_editor.pkgd.min.css
https://editor-latest.s3.amazonaws.com/v3/css/froala_style.min.css

Step 2: Include JS File under resources in JS Fiddle

https://editor-latest.s3.amazonaws.com/v3/js/froala_editor.pkgd.min.js

Step 3: Add the HTML code of the editor at your desired places on the page.

<div id="froala-editor">
  <p>The classes should be defined in CSS, otherwise no changes will be visible on the paragraph's appearance.</p>
</div>

Step 4: Add the Javascript code of the editor and set editor attribute as

new FroalaEditor('div#froala-editor', {
  paragraphStyles: {
    class1: 'Class 1',
    class2: 'Class 2'
  },
  toolbarButtons: ['bold', 'italic', 'underline', 'strikeThrough', 'fontFamily', 'fontSize', '|', 'paragraphStyle', 'paragraphFormat', 'align', 'undo', 'redo', 'html']
})

Check the working functionality here:

Did you know?

Froala offers over 30 out-of-the-box plugins. Add 3rd party plugins such as spell checker, image editor and create your own version of the Froala Editor! That’s pretty cool, huh?!

Try Froala Editor for Free

Love Froala Editor? You’ll love Froala Charts too!

Create interactive data visualizations using the same easy interface you love and trust.

Access Froala Charts 7-Day Free Trial