init_on_image.html 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" />
  6. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
  7. <link rel="stylesheet" href="../../css/froala_editor.css">
  8. <link rel="stylesheet" href="../../css/froala_style.css">
  9. <link rel="stylesheet" href="../../css/plugins/image.css">
  10. <style>
  11. body {
  12. text-align: center;
  13. }
  14. div#editor {
  15. width: 81%;
  16. margin: auto;
  17. text-align: left;
  18. }
  19. </style>
  20. </head>
  21. <body>
  22. <div id="editor">
  23. <div style="margin-top: 30px; text-align: center;">
  24. <h1>Init On Image</h1>
  25. <p>Using the <code>image.min.js</code> plugin it is possible to initialize the WYSIWYG HTML editor only on an
  26. image.</p>
  27. <img id="edit" class="fr-dii" src="../../img/photo1.jpg" alt="Old Clock" width="300" />
  28. </div>
  29. </div>
  30. <script type="text/javascript" src="../../js/froala_editor.min.js"></script>
  31. <script type="text/javascript" src="../../js/plugins/image.min.js"></script>
  32. <script type="text/javascript" src="../../js/plugins/link.min.js"></script>
  33. <script>
  34. (function () {
  35. new FroalaEditor("#edit")
  36. })()
  37. </script>
  38. </body>
  39. </html>