JSFiddle - React, Tailwind, and code Playground

by Froala_marketing

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/froala-editor@v4.0.0/css/froala_editor.pkgd.min.css">
<script src="https://cdn.jsdelivr.net/npm/froala-editor@4.0.6/js/froala_editor.pkgd.min.js"></script>
  <label for="tags">Choose which tag you want your text to be warped within:</label>

<select name="tags" id="tags">
  <option value="P">P</option>
  <option value="DIV">DIV</option>
   <option value="BR">BR</option>
  
</select> 
<br><br>
  <div id="editor">
   Change the HTML tag from the above dropdown menu, focus into the editor, click ENTER and start writing and notice how the wrap element changed in the code below.
  </div>
  <br/>
  <h3>
  Code Preview
  </h3>
<pre id="eg-previewer">
</pre>

JavaScript

var callback = function () {
  var editor = this

  $('pre#eg-previewer').text(editor.codeBeautifier.run(editor.html.get()))
  $('pre#eg-previewer').removeClass('prettyprinted');
}

var editor = new FroalaEditor('#editor', {
     enter: FroalaEditor.ENTER_P,
     events: {
     initialized: callback,
     contentChanged: callback
   }
  }
)

$(document).on('change', '#tags', function(){
var newTag = $(this).val();
  console.log(editor.opts.enter);


if(newTag == 'DIV')
	editor.opts.enter = 1;
else if(newTag == 'BR')
	editor.opts.enter = 2;
else
	editor.opts.enter = 0;
  
  console.log(editor.opts.enter);

})