How To Use Styling In Your HTML5 JavaScript Rich Text Editor?

Froala is an HTML5 JavaScript rich text editor. Keeping the importance of the web and web apps in view, Froala is a must-have tool for all developers and web designers alike. It enables you to create HTML documents conveniently and quickly. If you have a complex and lengthy web page, you can design and develop it fast. Instead of learning HTML and typing your content in HTML, you can use Froala’s word processor-like interface to create rich content. No wonder Froala is the best JavaScript rich text editor out there.

Froala comes with great features for creating HTML documents. Its toolbar has easily accessible options for styling text. Alternatively, you can use Markdown with its simple syntax to format text without using the mouse or toolbar.

Froala is 100% customizable. Following the principles of modular design, you can extend its functionality using a plugin. There is a wide variety of plugins to choose from. Continue reading to discover some of the features you can add to the Froala editor to style HTML documents. With these awesome features for customizability, you can’t possibly go wrong with your choice of Froala for creating rich text content.

Why Should I Opt for Froala HTML5 Javascript Rich Text Editor?

Froala is a beautiful WYSIWYG JavaScript editor. It has an awesome set of features. With its lightweight and clean design, it is extremely easy to use. Froala is also blazing fast. If you have an HTML website, you can add Froala HTML editor right there on your web page. This enables you to have your own website HTML editor. Alternatively, you can integrate Froala into the app of your choice and empower your users to create and edit rich content right there in the app itself.

Froala has a worldwide customer base. Individual users, as well as enterprise customers, all love using Froala. Big multinational companies, including IBM, eBay, Intel, Reuters, and more, all use Froala. Moreover, you can look at what users say about Froala on G2.com. Froala is ranked on G2 as the best WYSIWYG HTML editor. It is the topmost editor in terms of many features, such as customer satisfaction, market presence, and more.

How Do I Change the Color Themes in My HTML5 Javascript Rich Text Editor?

While Froala’s default color themes are beautiful, there will be times when you want to change its color schemes. Your website may have a different color palette, or your organization may have customized color schemes. In that case, you can easily change the default theme to the one that matches your requirements. Froala provides the following options:

• Dark theme
• Gray theme
• Royal theme

The example JavaScript code for setting your selected theme is shown below:

new FroalaEditor('.selector', {
  theme: "dark"
});

In the above, you can replace dark with gray or royal to select a different theme. In addition to the theme selection, you also have to include the corresponding CSS theme file as shown below:

<link href="../css/themes/dark.min.css" rel="stylesheet" type="text/css" />
<link href="../css/themes/gray.min.css" rel="stylesheet" type="text/css" />
<link href="../css/themes/royal.min.css" rel="stylesheet" type="text/css" />

If the above themes do not meet your requirement, you can create your own theme. Froala rich text editor’s interface is very easy to customize.

How Do I Choose the Font Family in Froala Javascript Editor?

In Froala editor, the default font family icon appears in the toolbar. Clicking it opens a drop-down list with a set of fonts. You can fully customize the font family options and add your own fonts to the Froala editor. All you need is the font_family.min.js plugin. Here is an example code for including the font family shown in the above figure.

new FroalaEditor('.selector', {
  fontFamily: {
      "Roboto,sans-serif": 'Roboto',
      "Oswald,sans-serif": 'Oswald',
      "Montserrat,sans-serif": 'Montserrat',
      "'Open Sans Condensed',sans-serif": 'Open Sans Condensed'
} });

You also have to include the fonts in your HTML file, as shown below:

<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,700,700italic&subset=latin,vietnamese,latin-ext,cyrillic,cyrillic-ext,greek-ext,greek' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Oswald:400,300,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700&subset=latin,greek,greek-ext,vietnamese,cyrillic-ext,cyrillic,latin-ext' rel='stylesheet' type='text/css'>

By following the above steps, you can define your own font family and include the fonts that meet your requirements.

How Do I Set Paragraph Styles in My HTML5 JavaScript Rich Text Editor?

In Froala HTML5 JavaScript rich text editor, it is possible to define your paragraph style options. Each paragraph style can have its associated font, alignment, color, and more. This way, multiple styles can be applied to a block of text with just the click of a button. In the above figure, there are two paragraph styles defined by Class 1 and Class 2. Both of them appear in the drop-down list of the paragraph styles icon in the toolbar. To set these styles, you have to define them in the CSS file as follows:

<style>
  .class1 {
    text-align: center;
    color: red;
  }

  .class2 {
    font-weight: 300;
    font-size: 16px;
  }
</style>

Next, you can initialize the editor with these paragraph styles as follows:

new FroalaEditor('.selector', {
  paragraphStyles: {
    class1: 'Class 1',
    class2: 'Class 2',
  }
});

It is important to note that if you don’t define the classes in the CSS file, no changes will be visible in the editor.

How Do I Change the Line Height in Froala Editor?

With Froala, you can easily customize your paragraph’s line spacing using the line_height.min.js plugin. These options can then be added to the paragraph styles icon in the toolbar. The code below sets the options shown in the figure above.

new FroalaEditor('.selector', {
  lineHeights: {
    'Single': 1, 
    '1.15': '1.15',
    '1.5': '1.5',
    Double: '2'
  }
});

The great thing is that you can add custom labels to each line spacing using the keys of the lineHeights JSON object.

How Do I Sign Up For Froala?

Froala is the best WYSIWYG HTML editor available in the market today. It is fully customizable with loads of plugins. Each plugin is extremely easy to use. Additionally, there are code examples to help you understand how to use them. You can customize colors, line styles, paragraphs, lists, and more in the Froala editor.

Take your rich text editing experience to a whole new level. Sign up for Froala today and start creating awesome HTML content fast!