<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0"/> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css"> <link rel="stylesheet" href="../css/froala_editor.css"> <link rel="stylesheet" href="../css/froala_style.css"> <link rel="stylesheet" href="../css/plugins/code_view.css"> <link rel="stylesheet" href="../css/plugins/colors.css"> <link rel="stylesheet" href="../css/plugins/emoticons.css"> <link rel="stylesheet" href="../css/plugins/file.css"> <link rel="stylesheet" href="../css/plugins/image_manager.css"> <link rel="stylesheet" href="../css/plugins/image.css"> <link rel="stylesheet" href="../css/plugins/line_breaker.css"> <link rel="stylesheet" href="../css/plugins/table.css"> <link rel="stylesheet" href="../css/plugins/video.css"> <link rel="stylesheet" href="../css/plugins/fullscreen.css"> <link rel="stylesheet" href="../css/plugins/quick_insert.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css"> <style> body { text-align: center; margin: 0; } div#editor { width: 81%; margin: auto; text-align: left; } .fr-toolbar { position: fixed; top: 0; left: 0; right: 0; } </style> </head> <body> <div id="editor"> <h1>Shared Container inline</h1> <p>You can have more than one editor instance on the same page. However, this will not affect the editing experience. You can even drag and drop images from one editor to the other.</p> <div id='edit' style="margin-top: 30px;"> <img class="fr-fir fr-dii" src="../img/photo1.jpg" alt="Old Clock" width="150"/> <h3>This is the first editor instance</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis diam in odio iaculis blandit. Nunc eu mauris sit amet purus viverra gravida ut a dui.</p> </div> <div id="edit2" style="margin-top: 10px;"> <img class="fr-fir fr-dii" src="../img/photo1.jpg" alt="Old Clock" width="150"/> <h3>This is the second editor instance</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis diam in odio iaculis blandit. Nunc eu mauris sit amet purus viverra gravida ut a dui.</p> </div> </div> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <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> <script type="text/javascript" src="../js/froala_editor.min.js"></script> <script type="text/javascript" src="../js/plugins/align.min.js"></script> <script type="text/javascript" src="../js/plugins/code_beautifier.min.js"></script> <script type="text/javascript" src="../js/plugins/code_view.min.js"></script> <script type="text/javascript" src="../js/plugins/colors.min.js"></script> <script type="text/javascript" src="../js/plugins/draggable.min.js"></script> <script type="text/javascript" src="../js/plugins/emoticons.min.js"></script> <script type="text/javascript" src="../js/plugins/file.min.js"></script> <script type="text/javascript" src="../js/plugins/font_size.min.js"></script> <script type="text/javascript" src="../js/plugins/font_family.min.js"></script> <script type="text/javascript" src="../js/plugins/image.min.js"></script> <script type="text/javascript" src="../js/plugins/image_manager.min.js"></script> <script type="text/javascript" src="../js/plugins/line_breaker.min.js"></script> <script type="text/javascript" src="../js/plugins/link.min.js"></script> <script type="text/javascript" src="../js/plugins/lists.min.js"></script> <script type="text/javascript" src="../js/plugins/paragraph_format.min.js"></script> <script type="text/javascript" src="../js/plugins/paragraph_style.min.js"></script> <script type="text/javascript" src="../js/plugins/video.min.js"></script> <script type="text/javascript" src="../js/plugins/table.min.js"></script> <script type="text/javascript" src="../js/plugins/url.min.js"></script> <script type="text/javascript" src="../js/plugins/entities.min.js"></script> <script type="text/javascript" src="../js/plugins/inline_style.min.js"></script> <script type="text/javascript" src="../js/plugins/save.min.js"></script> <script type="text/javascript" src="../js/plugins/quick_insert.min.js"></script> <script type="text/javascript" src="../js/plugins/fullscreen.min.js"></script> <script> $(function(){ $('#edit, #edit2').froalaEditor({ toolbarInline: true, toolbarContainer: 'body', toolbarButtons: ['bold', 'italic', 'underline', 'strikeThrough', 'color', 'emoticons', '|', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'indent', 'outdent', '|', 'insertImage', 'insertLink', 'insertFile', 'insertVideo', 'undo', 'redo'] }) }); </script> </body> </html>