- Getting Started
- Browser Support
- Languages Support
- Shortcuts
- Activation
- Examples
- Customize the Editor
- Use-cases
- Plugins
- APIs
- Development Frameworks
- Server Integrations
- Server SDKs
- Migration Guides
- Changelog
- Tutorials
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.
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>
Try Froala Free Related Plugin: Code View