February 2021 - Froala

Styling Your Froala HTML Editor

Thumbnail of a document collaboration tool, emphasizing teamwork and efficiency in document editing.

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

Create a Chart using Next.js and Froala Charts

Next.js is an open-source React development framework for developing single-page JavaScript applications. Next.js popularity has risen over the past couple of years given its ability to speed up page load times with Server Speed Rendering and automatic code-splitting, along with improved development time. The StateofJS 2020 Survey ranked Next.js as the top backend framework with the highest satisfaction ranking.

Froala Charts provides interactive charts to build data visualizations for web and mobile applications. From the creators of the Best WYSIWYG HTML Editor, Froala Charts offers all varieties of charting components—basic charts, widgets, and domain-specific charts that work across frameworks.

If you are wondering how to render a chart with Next.js, this article is for you! This tutorial will walk you through creating a dynamic chart in React using Next.js and Froala Charts.

Setting up the Environment

We’ll be using codesandbox for this tutorial. Before we start, we need to set up our environment by including the following dependencies in our application’s package.json:

This is what our package.json should look like after adding the above dependencies:

"dependencies": {
    "froalacharts": "^1.0.0",
    "next": "latest",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-froalacharts": "^1.0.0"
}

Creating the Chart Component

Now that we are done with setting up our environment, we’ll create a component that we’ll import later to render the chart. For this tutorial, we are going to use static data, but you can also pass dynamic data using props or fetching data via API to render charts.

For this we’ll create a JS file under pages directory with the name froalacharts.js:

Step 1: Prepare Chart Data Source

const dataSource = {
  chart: {
    caption: "Global Crypto Market Cap Analysis",
    subCaption: "January 2021 | Source: coinmarketcap.com",
    theme: "froala",
    paletteColors: "#F7931A, #3c3c3d, #1A9DF6, #52AF94, #E7BF29, #3D550C",
    numberPrefix: "$",
    defaultCenterLabel: "Total Market Cap<br>$1.02T",
    centerlabel: "$label<br>$value",
    doughnutRadius: "60%"
  },
  data: [
    { label: "Bitcoin", value: "640481178825" },
    { label: "Ethereum", value: "152441577181" },
    { label: "XRP", value: "30193577746" },
    { label: "Tether", value: "26618100965" },
    { label: "WallStreetBets", value: "24846486000" },
    { label: "Others", value: "145419079283" }
  ]
};

Step 2: Create Chart Instance

const chartConfigs = {
  type: "doughnut",
  width: 600,
  height: 400,
  dataFormat: "json",
  dataSource: dataSource
};

There are multiple chart options in Froala Charts—basic charts such as column, line, pie charts, gauges, KPI, funnel, pyramid, or advanced charts, e.g. heat maps, treemaps, radar, statistical charts, and more for domain-specific usage. Check out the complete list of charts, learn how to customize the charts, or explore the chart attributes.

Step 3: Export Chart Component

export default function NextFC() {
  const FroalaCharts = require("froalacharts");
  const FroalaTheme = require("froalacharts/themes/froalacharts.theme.froala.js");
  const { default: ReactFC } = require("react-froalacharts");

  ReactFC.fcRoot(FroalaCharts, FroalaTheme);

  return <ReactFC {...chartConfigs} />;
}

Render the Chart

Now that we have created the chart component i.e., froalacharts.js; we’ll now import this component into our index.js (the parent component) to render the chart.

import dynamic from "next/dynamic.js";
const FC = dynamic(() => import("./froalacharts.js"), { ssr: false });
export default function IndexPage() {
  return (
    <div>
      <FC></FC>
    </div>
  );
}

If you have followed the above steps correctly, your output should look as shown in the image below:

If you are having trouble rendering the chart, you can check the source code for this sample from this codesandbox.

Froala Charts Free Trial

Take a tour of Froala Charts and try out the charting library for free. Interested in the Froala Charts license plans? Check them out here.

Got questions? Leave a comment or feel free to drop an email to [email protected].