File "ckeditor.html"

Full Path: /home/analogde/www/MDPH/Work/ckeditor.html
File size: 2.08 KB
MIME-type: text/html
Charset: utf-8

<!--

https://www.codexworld.com/ckeditor-upload-image-to-server-using-php/

https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-ckfinder/docs/features/ckfinder.md#image-upload-only

https://www.tiny.cloud/docs/tinymce/latest/php-upload-handler/


aaa
-->
<!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 CDN</title>
        <link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/43.0.0/ckeditor5.css" />
    </head>
    <body>
        <div id="editor">
            <p>Hello from CKEditor 5!</p>
        </div>

        <script type="importmap">
            {
                "imports": {
                    "ckeditor5": "https://cdn.ckeditor.com/ckeditor5/43.0.0/ckeditor5.js",
                    "ckeditor5/": "https://cdn.ckeditor.com/ckeditor5/43.0.0/"
                }
            }
        </script>

        <script type="module">
            import {
                ClassicEditor,
                Image,
                ImageInsert,
                Essentials,
                Bold,
                Italic,
                Font,
                Paragraph
            } from 'ckeditor5';

            ClassicEditor
                .create( document.querySelector( '#editor' ), {
                    plugins: [ Image, ImageInsert, Essentials, Bold, Italic, Font, Paragraph ],
                    toolbar: {
                        items: [
                            'undo', 'redo', 'insertImage' , '|', 'bold', 'italic', '|',
                            'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor'
                        ],
                        simpleUpload: {
                        // The URL that the images are uploaded to.
                        uploadUrl: 'ck_upload.php',
                        }    
                    }
                } )
                .then( /* ... */ )
                .catch( /* ... */ );
        </script>
    </body>
</html>