Basic Froala Editor jsFiddle

HTML

<script src="https://editor-latest.s3.amazonaws.com/js/froala_editor.pkgd.min.js"></script>
<link rel="stylesheet" href="https://editor-latest.s3.amazonaws.com/css/froala_editor.pkgd.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://editor-latest.s3.amazonaws.com/css/froala_style.min.css">
<div id="froala-editor">
</div>

CSS

#froala-editor-p
{
  border:1px solid #0000ff;  
}

p::after 
{
  content: '\00B6';
  color: #6495ED; 
  opacity: 0.9
}
br {
  content: " ";
}
 br::after 
{
  content: '\21b5\000a';
  color: #6495ED; 
  white-space: pre;
}

JavaScript

$('div#froala-editor').froalaEditor({
      editorClass: 'da-Froala', // custom css class handle
    });