Welcome folks today in this blog post we will be integrating froala wysiwyg html editor
in browser using javascript. All the full source code of the application is shown below.
Get Started
In order to get started you need to make an index.html
file and copy paste the following code
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" /> <link href='https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css' rel='stylesheet' type='text/css' /> </head> <body> <div id="example"></div> <script type='text/javascript' src='https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js'></script> <script> var editor = new FroalaEditor('#example'); </script> </body> </html> |
As you can see we are including the froala library
cdn for the css
and javascript
library. And now we have the simple div
section where we will be mounting the editor inside the javascript. For this we are using the FroalaEditor()
method where we are providing the id
of the div element.