Froala Full Feature Editor Demo

In this example below you will see how to do a Froala Full Feature Editor Demo with some HTML / CSS and Javascript

This is a working demo of the Full Feature Editor Demo example as shown on the Froala website per 2016-11-07. It uses Froala version 2.3.5.

Thumbnail
This awesome code was written by bleutzinn, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright bleutzinn ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Froala Full Feature Editor Demo</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <head>
  <meta charset="utf-8">

  <!-- Include Font Awesome. -->
  <link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

  <!-- Include Editor style. -->
  <link href="//cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/css/froala_editor.min.css" rel="stylesheet" type="text/css" />
  <link href="//cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/css/froala_style.min.css" rel="stylesheet" type="text/css" />

  <!-- Include Code Mirror style -->
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.min.css">

  <!-- Include Editor Plugins style. -->
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/css/plugins/char_counter.css">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/css/plugins/code_view.min.css">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/css/plugins/colors.min.css">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/css/plugins/emoticons.min.css">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/css/plugins/file.min.css">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/css/plugins/fullscreen.min.css">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/css/plugins/image.min.css">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/css/plugins/image_manager.min.css">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/css/plugins/line_breaker.min.css">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/css/plugins/quick_insert.min.css">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/css/plugins/table.min.css">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/css/plugins/video.min.css">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/css/plugins/special_characters.min.css">


  <!-- Include jQuery. -->
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

  <!-- Include JS files. -->
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/froala_editor.min.js"></script>

  <!-- Include Code Mirror. -->
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.min.js"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/mode/xml/xml.min.js"></script>

  <!-- Include Plugins. -->
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/align.min.js"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/char_counter.min.js"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/code_beautifier.min.js"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/code_view.min.js"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/colors.min.js"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/draggable.min.js"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/emoticons.min.js"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/entities.min.js"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/file.min.js"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/font_family.min.js"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/font_size.min.js"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/fullscreen.min.js"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/image.min.js"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/image_manager.min.js"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/inline_style.min.js"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/line_breaker.min.js"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/link.min.js"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/lists.min.js"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/paragraph_format.min.js"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/paragraph_style.min.js"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/quick_insert.min.js"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/quote.min.js"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/table.min.js"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/save.min.js"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/url.min.js"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/video.min.js"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/special_characters.min.js"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.3/js/plugins/print.min.js"></script>
</head>

<body>
  <div id="froala-editor"></div>
</body>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/bleutzinn/froala-full-feature-editor-demo-xRGVGE */
/* Create some space for this demo on CodePen.
*/

#froala-editor {
  min-height: 200px;
  margin: 0px 8px 20px 40px;
  border: 1px solid #ccc;
}

/*Downloaded from https://www.codeseek.co/bleutzinn/froala-full-feature-editor-demo-xRGVGE */
$(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
  })
});

Comments