Code View example

by velo_ninja

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/js/froala_editor.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/froala_editor.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/js/plugins/code_view.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/plugins/code_view.min.css">
<h1>
Code View Plugin
</h1>
<div id='froala'>
 Open the code viewer, edit the code and close the code view mode, this will trigger the codeView.update event and in this example, the HTML code inside the code view mode will appear under the editor.
</div>
<br/>
<pre id="eg-previewer">
</pre>

JavaScript

var editor = new FroalaEditor('#froala', {
  pluginsEnabled: ['codeView'],
  codeViewKeepActiveButtons: ['selectAll'],
  events: {
    'codeView.update': function () {
      // Do something here.
      // this is the editor instance.
      document.getElementById("eg-previewer").textContent = this.codeView.get ();
    }
  }
});