index.html 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>CKEditor 5 - Quick start ZIP</title>
  7. <link rel="stylesheet" href="./ckeditor5/ckeditor5.css">
  8. <style>
  9. .main-container {
  10. width: 795px;
  11. margin-left: auto;
  12. margin-right: auto;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <div class="main-container">
  18. <div id="editor">
  19. <p>Hello from CKEditor 5!</p>
  20. </div>
  21. </div>
  22. <script type="importmap">
  23. {
  24. "imports": {
  25. "ckeditor5": "./ckeditor5/ckeditor5.js",
  26. "ckeditor5/": "./ckeditor5/"
  27. }
  28. }
  29. </script>
  30. <script type="module">
  31. import {
  32. ClassicEditor,
  33. Essentials,
  34. Paragraph,
  35. Bold,
  36. Italic,
  37. Font
  38. } from 'ckeditor5';
  39. ClassicEditor
  40. .create( document.querySelector( '#editor' ), {
  41. licenseKey: 'GPL', // Or <YOUR_LICENSE_KEY>
  42. plugins: [ Essentials, Paragraph, Bold, Italic, Font ],
  43. toolbar: [
  44. 'undo', 'redo', '|', 'bold', 'italic', '|',
  45. 'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor'
  46. ],
  47. licenseKey: 'GPL'
  48. } )
  49. .then( editor => {
  50. window.editor = editor;
  51. } )
  52. .catch( error => {
  53. console.error( error );
  54. } );
  55. </script>
  56. <!-- A friendly reminder to run on a server, remove this during the integration. -->
  57. <script>
  58. window.onload = function() {
  59. if ( window.location.protocol === "file:" ) {
  60. alert( "This sample requires an HTTP server. Please serve this file with a web server." );
  61. }
  62. };
  63. </script>
  64. </body>
  65. </html>