Code Beautifier Plugin

by Froala_marketing

HTML

<script src="https://cdn.jsdelivr.net/npm/froala-editor@4.0.4/js/froala_editor.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/froala-editor@4.0.4/css/froala_editor.min.css">
<script src="https://cdn.jsdelivr.net/npm/froala-editor@4.0.4/js/plugins/code_view.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/froala-editor@4.0.4/css/plugins/code_view.min.css">
<script src="https://cdn.jsdelivr.net/npm/froala-editor@4.0.4/js/plugins/code_beautifier.min.js"></script>
<h1>
Code Beautifier Plugin
</h1>
<div id='froala'>
 <h1>
 open code editor
 </h1>
 <p>
 based on the codeBeautifierOptions settings, you will see different layouts.
 </p>
</div>
<br/>
<div id='froala2'>
 <h1>
 open code editor
 </h1>
 <p>
 based on the codeBeautifierOptions settings, you will see different layouts.
 </p>
</div>

JavaScript

var editor = new FroalaEditor('#froala', {
  pluginsEnabled: ['codeView','codeBeautifier'],
  codeViewKeepActiveButtons: ['selectAll','moreMisc'],
  codeBeautifierOptions:{
      end_with_newline: true,
      indent_inner_html: true,
      extra_liners: "['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'pre', 'ul', 'ol', 'table', 'dl']",
      brace_style: 'expand',
      indent_char: '\t',
      indent_size: 1,
      wrap_line_length: 0
    },
  }, function () {
  	// Call the method inside the initialized event.
    // open Code view mode
  	editor.codeView.toggle ();
    }
 );
 
 var editor2 = new FroalaEditor('#froala2', {
  pluginsEnabled: ['codeView'],
  codeViewKeepActiveButtons: ['selectAll'],

  }, function () {
  	// Call the method inside the initialized event.
    // open Code view mode
  	editor2.codeView.toggle ();
    }
 );