| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>CKEditor 5 - Quick start ZIP</title>
- <link rel="stylesheet" href="./ckeditor5/ckeditor5.css">
- <style>
- .main-container {
- width: 795px;
- margin-left: auto;
- margin-right: auto;
- }
- </style>
- </head>
- <body>
- <div class="main-container">
- <div id="editor">
- <p>Hello from CKEditor 5!</p>
- </div>
- </div>
- <script type="importmap">
- {
- "imports": {
- "ckeditor5": "./ckeditor5/ckeditor5.js",
- "ckeditor5/": "./ckeditor5/"
- }
- }
- </script>
- <script type="module">
- import {
- ClassicEditor,
- Essentials,
- Paragraph,
- Bold,
- Italic,
- Font
- } from 'ckeditor5';
- ClassicEditor
- .create( document.querySelector( '#editor' ), {
- licenseKey: 'GPL', // Or <YOUR_LICENSE_KEY>
- plugins: [ Essentials, Paragraph, Bold, Italic, Font ],
- toolbar: [
- 'undo', 'redo', '|', 'bold', 'italic', '|',
- 'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor'
- ],
- licenseKey: 'GPL'
- } )
- .then( editor => {
- window.editor = editor;
- } )
- .catch( error => {
- console.error( error );
- } );
- </script>
- <!-- A friendly reminder to run on a server, remove this during the integration. -->
- <script>
- window.onload = function() {
- if ( window.location.protocol === "file:" ) {
- alert( "This sample requires an HTTP server. Please serve this file with a web server." );
- }
- };
- </script>
- </body>
- </html>
|