3rd Party Integration

Code Mirror

The code_view.min.js plugin can be used as is or you can use also use it together with Code Mirror. All there is to be done is to include the corresponding Code Mirror CSS and JS files.

Try it yourself:

There also are 2 options related to Code Mirror:

• codeMirror - which enables or disables the use of Code Mirror, the default value is window.codeMirror.
• codeMirrorOptions - that can be used to customize Code Mirror options, such as tab size.

Edit in JSFiddle

HTML

<div id="froala-editor">

  <p>Click the Code View button to see the editor content's HTML.</p>
  <img src="https://raw.githubusercontent.com/froala/wysiwyg-editor/master/editor.jpg" class="fr-fil" alt="book" width="150"/>
</div>

CSS

<!-- Code Mirror CSS file. -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">

<!-- Include the plugin CSS file. -->
<link rel="stylesheet" href="../css/plugins/code_view.min.css">

JAVASCRIPT

<!-- Code Mirror JS files. -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>

<!-- Include the plugin JS file. -->
<script type="text/javascript" src="../js/plugins/code_view.min.js"></script>

<script>
  new FroalaEditor('div#froala-editor', {
    toolbarButtons: ['bold', 'italic', 'html']
  });
</script>