Detailed Overview and Features

Step 1. Install

There are many ways to install Froala Pages and we suggest to use NPM. Just type in the following command:

npm install froala-pages

After the installation process is finished, embed this code inside your HTML file:

<link href="node_modules/froala-pages/css/froala_pages.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="node_modules/froala-pages/js/froala_pages.min.js"></script>
<script type="text/javascript" src="node_modules/froala-pages/js/pages_design_blocks_pkgd.min.js"></script>
	

As an alternative, you could use CDN:

<link href="https://cdn.jsdelivr.net/npm/froala-pages/css/froala_pages.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/froala-pages/js/froala_pages.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/froala-pages/js/pages_design_blocks_pkgd.min.js"></script>
	

Step 2. Initialization

Create div tag anywhere in HTML body with id as 'selector-id'

<div id='selector-id'></div>  

The last step consists of initializing the Froala Pages.

var pages = new FroalaPages('selector-id',key : '----Placeholder for key----'})

Go here and click 'Download' button to register and get your key on Email

Step 3. Display Content

To preserve the look of the edited HTML outside of the Froala Pages you have to include the following CSS files.

<!-- Bootstrap and Froala Design Blocks. -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/gh/froala/design-blocks@master/dist/css/froala_blocks.min.css" rel="stylesheet" type="text/css" />