JSFiddle - React, Tailwind, and code Playground

by George Y

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.2.3/css/froala_editor.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.2.3/js/froala_editor.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.2.3/js/plugins/save.min.js"></script>
<div class="edit">
</div>

Output without markers
<pre class="output-no-keep"></pre>
<br/>
Output with markers
<pre class="output-keep"></pre>

JavaScript

$('.edit')
	.froalaEditor({
   saveInterval: 100,
   enter: $.FroalaEditor.ENTER_BR
  })
	.on('froalaEditor.save.before', function (e, editor) {
    editor.selection.save();
    
    $('.output-no-keep').text(editor.html.get(false))
    $('.output-keep').text(editor.html.get(true))
  });