Iframe Froala WYSIWYG Editor V3

by Jithin Raj P R

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://editor-latest.s3.amazonaws.com/v3/js/froala_editor.pkgd.min.js"></script>
<link rel="stylesheet" href="https://editor-latest.s3.amazonaws.com/v3/css/froala_editor.pkgd.min.css">
<link rel="stylesheet" href="https://editor-latest.s3.amazonaws.com/v3/css/froala_style.min.css">
<div id="froala-editor">
<p><img class="fr-fir fr-dii fr-draggable" width="200" src="https://cdn0.froala.com/assets/editor/pages/v3/editor-photo-0c6048e9ae73fe1da41b5e805324e919.png" alt="Editor photo"></p><p>Froala Editor is a lightweight WYSIWYG HTML Editor written in Javascript that enables rich text editing capabilities for your applications.&nbsp;<span class="fr-emoticon fr-deletable fr-emoticon-img" style="background: url(https://cdnjs.cloudflare.com/ajax/libs/emojione/2.0.1/assets/svg/1f600.svg);">&nbsp;</span>&nbsp;</p><p>Its complete <a href="/wysiwyg-editor/v2.0/docs" title="Documentation"><i class="fa fa-book fr-deletable"></i> documentation</a>, specially designed <a href="#frameworks" title="Frameworks"><i class="fa fa-puzzle-piece fr-deletable"></i> framework plugins</a> and <a href="/wysiwyg-editor/v2.0/examples" title="Examples">tons of examples</a> make it easy to integrate. We're continuously working to add in new features and take the Javascript web WYSIWYG editing capabilities beyond its current limits.</p>
</div>

JavaScript

new FroalaEditor('div#froala-editor', {
  iframe: true,
  imageMaxSize: 1024 * 1024 * 10, // Max. 10MB
})