Get Started
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>