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.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CKEditor 5 – Classic editor</title>
    <script src="<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.

index.html
<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.

upload.php
<?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); 
?>


  • No labels