Step 1. Install

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

npm install froala-editor

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

<link href="node_modules/froala-editor/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="node_modules/froala-editor/js/froala_editor.pkgd.min.js"></script>

As an alternative, you could use CDN:

<link href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js"></script>

Step 2. Create

The Froala Editor can be initialized on any DOM element, and we recommend do use a DIV element. Add an empty <div id="example"></div> element that will be turned into a rich text editor.

Step 3. Initialization

The last step consists of initializing the Froala Editor on our previously created empty element.

var editor = new FroalaEditor('#example')

Step 4. Display Content

To preserve the look of the edited HTML outside of the rich text editor you have to include the following CSS files.

<!-- CSS rules for styling the element inside the editor such as p, h1, h2, etc. -->
<link href="../css/froala_style.min.css" rel="stylesheet" type="text/css" />

Also, you should make sure that you put the edited content inside an element that has the class fr-view.

<div class="fr-view">
  Here comes the HTML edited with the Froala rich text editor.
</div>