<!--
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>