Reference
STEP 1. Download CKEditor5
The first option is to use online builder at https://ckeditor.com/ckeditor-5/online-builder/
- The benefit of the online-builder is that you do not need to install NPM and all other necessary binaries to get what you want.
- The below is the one I acquired at the online builder that does not include premium libraries that have to pay by the cases.
ckeditor5-40.1.0_2023_12_09.zip
ckeditor5-40.2.0-2023_12_22i.zip (Excluding Markdown, General HTML Support, Text part language, Style, Word Count, Watchdog)
By the model there are some options basically included as below:
Reference link: https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/predefined-builds.html
STEP 2. Implement Code
Below is the simple test code. Note that you should change <the_folder_where_you_saved> to the correct location.Simple example of CKEditor
Code Block |
---|
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CKEditor 5 – Classic editor</title> <script src="https://cdn.ckeditor.com/ckeditor5/40.1.0/classic/<the_folder_where_you_saved>/ckeditor.js"></script> </head> <body> <h1>Classic editor</h1> <div id="editor"> <p>This is some sample content.</p> </div> <script> ClassicEditor .create( document.querySelector( '#editor' ) ) .catch( error => { console.error( error ); } ); </script> </body> </html> |
Below is including file uploading feature.
Code Block | ||||
---|---|---|---|---|
| ||||
<html>
<head>
<title>CKEditor 5 ClassicEditor build</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="editor">
</div>
<script src="ck/ckeditor.js"></script>
<script>
ClassicEditor
.create( document.querySelector( '#editor' ), {
simpleUpload: {
// The URL that the images are uploaded to.
uploadUrl: 'upload.php',
}
} )
.then( editor => {
window.editor = editor;
} )
.catch( err => {
console.error( err.stack );
} );
</script>
</body>
</html> |
You will need to have following upload.php to save the necessary files as planned.
Code Block | ||||
---|---|---|---|---|
| ||||
<?php
// Define file upload path
$upload_dir = array(
'img'=> './',
);
// Allowed image properties
$imgset = array(
'maxsize' => 5000,
'maxwidth' => 4096,
'maxheight' => 3000,
'minwidth' => 10,
'minheight' => 10,
'type' => array('bmp', 'gif', 'jpg', 'jpeg', 'png'),
);
// If 0, will OVERWRITE the existing file
define('RENAME_F', 1);
$site = '';
/**
* Set filename
* If the file exists, and RENAME_F is 1, set "img_name_1"
*
* $p = dir-path, $fn=filename to check, $ex=extension $i=index to rename
*/
function setFName($p, $fn, $ex, $i){
if(RENAME_F ==1 && file_exists($p .$fn .$ex)){
return setFName($p, F_NAME .'_'. ($i +1), $ex, ($i +1));
}else{
return $fn .$ex;
}
}
$re = '';
if(isset($_FILES['upload']) && strlen($_FILES['upload']['name']) > 1) {
define('F_NAME', preg_replace('/\.(.+?)$/i', '', basename($_FILES['upload']['name'])));
// Get filename without extension
$sepext = explode('.', strtolower($_FILES['upload']['name']));
$type = end($sepext); /** gets extension **/
// Upload directory
$upload_dir = in_array($type, $imgset['type']) ? $upload_dir['img'] : $upload_dir['audio'];
$upload_dir = trim($upload_dir, '/') .'/';
// Validate file type
if(in_array($type, $imgset['type'])){
// Image width and height
list($width, $height) = getimagesize($_FILES['upload']['tmp_name']);
if(isset($width) && isset($height)) {
if($width > $imgset['maxwidth'] || $height > $imgset['maxheight']){
$re .= ' Width x Height = '. $width .' x '. $height .' >>> The maximum Width x Height must be: '. $imgset['maxwidth']. ' x '. $imgset['maxheight'];
}
if($width < $imgset['minwidth'] || $height < $imgset['minheight']){
$re .= ' Width x Height = '. $width .' x '. $height .' >>> The minimum Width x Height must be: '. $imgset['minwidth']. ' x '. $imgset['minheight'];
}
if($_FILES['upload']['size'] > $imgset['maxsize']*1000){
$re .= ' >>> Maximum file size must be: '. $imgset['maxsize']. ' KB.';
}
}
}else{
$re .= 'The file: '. $_FILES['upload']['name']. ' has not the allowed extension type.';
}
// File upload path
$f_name = setFName($_SERVER['DOCUMENT_ROOT'] .'/'. $upload_dir, F_NAME, ".$type", 0);
$uploadpath = $upload_dir . $f_name;
// If no errors, upload the image, else, output the errors
if($re == ''){
if(move_uploaded_file($_FILES['upload']['tmp_name'], $uploadpath)) {
$url = $upload_dir . $f_name;
$msg = F_NAME .'.'. $type .' successfully uploaded! >>> Size: '. number_format($_FILES['upload']['size']/1024, 2, '.', '') .' KB';
$response = [
'url' => $url
];
}else{
$response = [
'error' => [
'message' => 'Unable to upload the file!'
]
];
}
}else{
$response = [
'error' => [
'message' => 'Error: '.$re
]
];
}
}
// Return response in JSON format
echo json_encode($response);
?> |