Froala editor plugin

In this article, we will understand how to use Froala editor plugin using jQuery. Froala Editor is one of the most powerful JavaScript rich text editors ever. It is also known as WYSIWYG HTML Editor.

Following are the various examples of Froala editor plugin using jQuery.

Example 1:

<! DOCTYPE html>  
<html>  
    <head>  
        <meta http-equiv = "Content-Type"  
            content = "text/html; charset=UTF-8" />  
        <title> Example of Froala editor plugin using jquery </title>  
        <meta name = "description"  
            content = "jQuery tooltip plugin" />  
        <meta content = "width=800, initial-scale=1"  
        name = "viewport" />  
<link href = "https: //cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel = "stylesheet" type = "text/css" />
<link href = "https: //cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/css/froala_editor.min.css" rel = "stylesheet" type = "text/css" />
<link href = "https: //cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/css/froala_style.min.css" rel = "stylesheet" type = "text/css" />
  <link rel = "stylesheet" type = "text/css"  href =" https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.min.css">
  <link rel = "stylesheet" type = "text/css" href = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/css/plugins/char_counter.css">
  <link rel = "stylesheet" type = "text/css" href = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/css/plugins/code_view.min.css">
  <link rel = "stylesheet" type = "text/css" href = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/css/plugins/colors.min.css">
  <link rel = "stylesheet" type = "text/css"  href = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/css/plugins/emoticons.min.css">
  <link rel = "stylesheet" type = "text/css" href = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/css/plugins/file.min.css">
  <link rel = "stylesheet" type = "text/css" href = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/css/plugins/fullscreen.min.css">
  <link rel = "stylesheet" type = "text/css" href = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/css/plugins/image.min.css">
  <link rel = "stylesheet" type = "text/css" href = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/css/plugins/image_manager.min.css">
  <link rel = "stylesheet" type = "text/css" href = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/css/plugins/line_breaker.min.css">
  <link rel = "stylesheet" type = "text/css" href = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/css/plugins/quick_insert.min.css">
  <link rel = "stylesheet" type = "text/css" href = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/css/plugins/table.min.css">
  <link rel = "stylesheet" type = "text/css" href = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/css/plugins/video.min.css">
  <link rel = "stylesheet" type = "text/css"  href = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/css/plugins/special_characters.min.css">
  <script type = "text/javascript" src = " https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script>
<script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/froala_editor.min.js"> </script>
<script type = "text/javascript" src = " https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.min.js"> </script>
  <script type = "text/javascript" src = https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/mode/xml/xml.min.js"> </script>
<script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/align.min.js"> </script>
<script type = "text/javascript" src = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/char_counter.min.js"> </script>
  <script type = "text/javascript" src = 
?https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/code_beautifier.min.js"> </script>
  <script type = "text/javascript" src = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/code_view.min.js"> </script>
<script type = "text/javascript" src = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/colors.min.js"> </script>
  <script type = "text/javascript" src = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/draggable.min.js"> </script>
<script type = "text/javascript" src = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/emoticons.min.js"> </script>
  <script type = "text/javascript" src = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/entities.min.js"> </script>
<script type = "text/javascript" src = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/file.min.js"> </script>
<script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/font_family.min.js"> </script>
  <script type = "text/javascript" src = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/font_size.min.js"> </script>
  <script type = "text/javascript" src = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/fullscreen.min.js"> </script>
  <script type = "text/javascript" src = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/image.min.js"> </script>
  <script type = "text/javascript" src = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/image_manager.min.js">  </script>
  <script type = "text/javascript" src = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/inline_style.min.js"> </script>
  <script type = "text/javascript" src = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/line_breaker.min.js"> </script>
<script type = "text/javascript" src = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/link.min.js"> </script>
  <script type = "text/javascript" src = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/lists.min.js"> </script>
  <script type = "text/javascript" src = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/paragraph_format.min.js"> </script>
<script type = "text/javascript" src = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/paragraph_style.min.js"> </script>
  <script type = "text/javascript" src = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/quick_insert.min.js"> </script>
  <script type = "text/javascript" src = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/quote.min.js"> </script>
  <script type = "text/javascript" src = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/table.min.js"> </script>
  <script type = "text/javascript" src = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/save.min.js"> </script>
<script type = "text/javascript" src = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/url.min.js"> </script>
  <script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/video.min.js"> </script>
<script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/special_characters.min.js"> </script>
  <script type = "text/javascript" src = " https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/print.min.js"> </script>
</head>
<style>
#froala-editor {
  min-height: 200px;
  margin: 0px 8px 20px 40px;
  border: 1px solid #ccc;
}
h2 {  
  margin-top: 40px;  
  text-transform: none;  
  font-size: 1.75em;  
  font-weight: bold;  
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;  
  color: #999;   
  letter-spacing: -0.005em;   
  word-spacing: 1px;  
  letter-spacing: none;  
  text-align: center;  
}  
html {  
text-align: center;  
  height: 100%;  
  background: #2c3e50;  
  font-family: "Montserrat", sans-serif;  
  font-size: 16px;  
}  
body {  
  justify-content: space-around;  
  align-items: centre;  
  align-content: center;  
text-align: center;  
  height: 100%;  
  background: #2c3e50;  
  font-family: "Montserrat", sans-serif;  
  font-size: 16px;  
}  
h1 {  
  margin-top: 40px;  
  text-transform: none;  
  font-size: 1.75em;  
  font-weight: bold;  
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;  
  color: #999;   
  letter-spacing: -0.005em;   
  word-spacing: 1px;  
  letter-spacing: none;  
  text-align: center;  
}
</style>
<body>
  <h2> Example </h2>
  <h1> Jquery Froala Editor </h1>
  <div id = "froala-editor"> </div>
$(function() {
  $('div#froala-editor').froalaEditor({
    toolbarButtons: ['bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize', '|', 'color', 'inlineStyle', 'paragraphStyle', '|', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', '-', 'insertLink', 'insertImage', 'insertVideo', 'insertFile', 'insertTable', 'specialCharacters', 'emoticons', '|', 'quote', 'insertHR', 'undo', 'redo', 'clearFormatting', 'selectAll', 'print', 'html', 'fullscreen'],
    pluginsEnabled: null
  })
});
</script>
</body>
</html>

Explanation:

In the above example, we created an example of froala editor. This editor has the all the features like bold, italic, paragraph style etc.

Output:

Following is the output of this example.