Code View example

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">
<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 ();
    }
  }
});