Page History

...

STEP 1. How to secure the superbuild version of CKEditorDownload CKEditor5

The first option is to use online builder You can build your package based on your requirement at https://ckeditor.com/ckeditor-5/online-builder/

But it looks like npm is To download the superbuild version of CKEditor 5, you can follow these steps:

Visit the official CKEditor 5 GitHub repository: https://github.com/ckeditor/ckeditor5
Clone the repository using Git. Open your terminal or command prompt and run the following command:
Code Block
git clone https://github.com/ckeditor/ckeditor5.git
Change to the CKEditor 5 directory:
Code Block
cd ckeditor5
Install the npm dependencies by running:
Code Block
npm install
Build CKEditor 5 using the superbuild:
Code Block
npm run build

This will build the superbuild version of CKEditor 5, which includes all the core packages and dependencies.

After the build process is complete, you should find the compiled files in the build directory. The main editor build will be in the build/ckeditor.js file.

Keep in mind that the build process may take some time, depending on your machine and internet connection speed. Additionally, make sure you have Node.js and npm installed on your system before proceeding with these steps.

The superbuild version of CK Editor can cover as below:

Image Removed

Reference link: https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/predefined-builds.html

Option 2) Download through NPM

Below is my script to download the necessary assets

Code Block
#!/bin/bash npm install --save @ckeditor/ckeditor5-build-classic

STEP 2.

Example of the simple editor from CDN

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

Example of the full-featured editor from CDN

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:

Image Added

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.

Code Block

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

Code Block

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <style>
            #container {
                width: 1000px;
                margin: 20px auto;
            }
            .ck-editor__editable[role="textbox"] {
                /* editing area */
                min-height: 200px;
            }
            .ck-content .image {
                /* block images */
                max-width: 80%;
                margin: 20px auto;
            }
        </style>
        <div id="container">
            <div id="editor">
            </div>
        </div>
        <!--
            The "super-build" of CKEditor 5 served via CDN contains a large set of plugins and multiple editor types.
            See https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/quick-start.html#running-a-full-featured-editor-from-cdn
        -->
        <script src="https://cdn.ckeditor.com/ckeditor5/40.1.0/super-build/ckeditor.js"></script>
        <!--
            Uncomment to load the Spanish translation
            <script src="https://cdn.ckeditor.com/ckeditor5/40.1.0/super-build/translations/es.js"></script>
        -->
        <script>
            // This sample still does not showcase all CKEditor 5 features (!)
            // Visit https://ckeditor.com/docs/ckeditor5/latest/features/index.html to browse all the features.
            CKEDITOR.ClassicEditor.create(document.getElementById("editor"), {
                // https://ckeditor.com/docs/ckeditor5/latest/features/toolbar/toolbar.html#extended-toolbar-configuration-format
                toolbar: {
                    items: [
                        'exportPDF','exportWord', '|',
                        'findAndReplace', 'selectAll', '|',
                        'heading', '|',
                        'bold', 'italic', 'strikethrough', 'underline', 'code', 'subscript', 'superscript', 'removeFormat', '|',
                        'bulletedList', 'numberedList', 'todoList', '|',
                        'outdent', 'indent', '|',
                        'undo', 'redo',
                        '-',
                        'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', 'highlight', '|',
                        'alignment', '|',
                        'link', 'insertImage', 'blockQuote', 'insertTable', 'mediaEmbed', 'codeBlock', 'htmlEmbed', '|',
                        'specialCharacters', 'horizontalLine', 'pageBreak', '|',
                        'textPartLanguage', '|',
                        'sourceEditing'
                    ],
                    shouldNotGroupWhenFull: true
                },
                // Changing the language of the interface requires loading the language file using the <script> tag.
                // language: 'es',
                list: {
                    properties: {
                        styles: true,
                        startIndex: true,
                        reversed: true
                    }
                },
                // https://ckeditor.com/docs/ckeditor5/latest/features/headings.html#configuration
                heading: {
                    options: [
                        { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
                        { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
                        { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
                        { model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
                        { model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' },
                        { model: 'heading5', view: 'h5', title: 'Heading 5', class: 'ck-heading_heading5' },
                        { model: 'heading6', view: 'h6', title: 'Heading 6', class: 'ck-heading_heading6' }
                    ]
                },
                // https://ckeditor.com/docs/ckeditor5/latest/features/editor-placeholder.html#using-the-editor-configuration
                placeholder: 'Welcome to CKEditor 5!',
                // https://ckeditor.com/docs/ckeditor5/latest/features/font.html#configuring-the-font-family-feature
                fontFamily: {
                    options: [
                        'default',
                        'Arial, Helvetica, sans-serif',
                        'Courier New, Courier, monospace',
                        'Georgia, serif',
                        'Lucida Sans Unicode, Lucida Grande, sans-serif',
                        'Tahoma, Geneva, sans-serif',
                        'Times New Roman, Times, serif',
                        'Trebuchet MS, Helvetica, sans-serif',
                        'Verdana, Geneva, sans-serif'
                    ],
                    supportAllValues: true
                },
                // https://ckeditor.com/docs/ckeditor5/latest/features/font.html#configuring-the-font-size-feature
                fontSize: {
                    options: [ 10, 12, 14, 'default', 18, 20, 22 ],
                    supportAllValues: true
                },
                // Be careful with the setting below. It instructs CKEditor to accept ALL HTML markup.
                // https://ckeditor.com/docs/ckeditor5/latest/features/general-html-support.html#enabling-all-html-features
                htmlSupport: {
                    allow: [
                        {
                            name: /.*/,
                            attributes: true,
                            classes: true,
                            styles: true
                        }
                    ]
                },
                // Be careful with enabling previews
                // https://ckeditor.com/docs/ckeditor5/latest/features/html-embed.html#content-previews
                htmlEmbed: {
                    showPreviews: true
                },
                // https://ckeditor.com/docs/ckeditor5/latest/features/link.html#custom-link-attributes-decorators
                link: {
                    decorators: {
                        addTargetToExternalLinks: true,
                        defaultProtocol: 'https://',
                        toggleDownloadable: {
                            mode: 'manual',
                            label: 'Downloadable',
                            attributes: {
                                download: 'file'
                            }
                        }
                    }
                },
                // https://ckeditor.com/docs/ckeditor5/latest/features/mentions.html#configuration
                mention: {
                    feeds: [
                        {
                            marker: '@',
                            feed: [
                                '@apple', '@bears', '@brownie', '@cake', '@cake', '@candy', '@canes', '@chocolate', '@cookie', '@cotton', '@cream',
                                '@cupcake', '@danish', '@donut', '@dragée', '@fruitcake', '@gingerbread', '@gummi', '@ice', '@jelly-o',
                                '@liquorice', '@macaroon', '@marzipan', '@oat', '@pie', '@plum', '@pudding', '@sesame', '@snaps', '@soufflé',
                                '@sugar', '@sweet', '@topping', '@wafer'
                            ],
                            minimumCharacters: 1
                        }
                    ]
                },
                // The "super-build" contains more premium features that require additional configuration, disable them below.
                // Do not turn them on unless you read the documentation and know how to configure them and setup the editor.
                removePlugins: [
                    // These two are commercial, but you can try them out without registering to a trial.
                    // 'ExportPdf',
                    // 'ExportWord',
                    'AIAssistant',
                    'CKBox',
                    'CKFinder',
                    'EasyImage',
                    // This sample uses the Base64UploadAdapter to handle image uploads as it requires no configuration.
                    // https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/base64-upload-adapter.html
                    // Storing images as Base64 is usually a very bad idea.
                    // Replace it on production website with other solutions:
                    // https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/image-upload.html
                    // 'Base64UploadAdapter',
                    'RealTimeCollaborativeComments',
            .create( document.querySelector( '#editor'      'RealTimeCollaborativeTrackChanges',) )
            .catch( error => {
     'RealTimeCollaborativeRevisionHistory',
           console.error( error );
       'PresenceList',
     } );
    </script>
</body>
</html>

Below is including file uploading feature.

Code Block

language	xml
title	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.

Code Block

language	php
title	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{  'Comments',
                    'TrackChanges',
                    'TrackChangesData',
                    'RevisionHistory',
                    'Pagination',
                    'WProofreader',
                    // Careful, with the Mathtype plugin CKEditor will not load when loading this sample
                    // from a local file system (file://) - load this site via HTTP server if you enable MathType.
                    'MathType',
                    // The following features are part of the Productivity Pack and require additional license.
                    'SlashCommand',
                    'Template',
                    'DocumentOutline',
        return $fn .$ex; 
    } 
} 
 
$re = 'FormatPainter',
                    'TableOfContents',
                    'PasteFromOfficeEnhanced'
                ]
            });
        </script>
    </body>
</html>

Implementing upload feature with CKEditor 5

Code Block

language	xml
title	index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CKEditor 5 File Upload</title>
    <script src="https://cdn.ckeditor.com/ckeditor5/44.0.0/classic/ckeditor.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
    <textarea id="editor"></textarea>

    <script>
        ClassicEditor; 
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) =  .create(document.querySelector('#editor'), {
 getimagesize($_FILES['upload']['tmp_name']); 
 
        if(isset($width) && isset($height)) { 
   // CKEditor configuration options
      if($width > $imgset['maxwidth'] || $height  })
       > $imgset['maxheight']){ 
     .catch(error => {
         $re .= ' Width x Height = console.error(error);
            });

        function uploadFile(file) {'. $width .' x '. $height .' >>> The maximum Width x Height must be: '. $imgset['maxwidth']. ' x '. $imgset['maxheight']; 
            const formData = new FormData();} 
 
            formData.append('file', file);

if($width < $imgset['minwidth'] || $height < $imgset['minheight']){ 
                $re $.ajax({
                url: 'upload.php', // Your PHP script for handling uploads
.= ' Width x Height = '. $width .' x '. $height .' >>> The minimum Width x Height must be: '. $imgset['minwidth']. ' x '. $imgset['minheight']; 
            } 
 
    type: 'POST',
        if($_FILES['upload']['size'] > $imgset['maxsize']*1000){ 
        data: formData,
       $re .= ' >>> Maximum file size must  processDatabe: false,
    '. $imgset['maxsize']. ' KB.'; 
            contentType:} false,
        } 
    }else{ 
  success: function (data) {
   $re .= 'The file: '. $_FILES['upload']['name']. ' has not the allowed       console.log('File uploaded successfully:', data);
   extension type.'; 
    } 
     
    // File upload path },
    $f_name = setFName($_SERVER['DOCUMENT_ROOT']          error: function (error) {.'/'. $upload_dir, F_NAME, ".$type", 0); 
    $uploadpath = $upload_dir . $f_name; 
 
    // If no errors, upload  console.error('Error uploading file:', error);
   the image, else, output the errors 
    if($re ==     ''){ 
   }
     if(move_uploaded_file($_FILES['upload']['tmp_name'], $uploadpath)) { 
    });
        }

$url = $upload_dir . $f_name; 
   // Listen for the 'change' event on the file input$msg in= the editor
        document.querySelector('#editor input[type="file"]').addEventListener('change', (event) => {F_NAME .'.'. $type .' successfully uploaded! >>> Size: '. number_format($_FILES['upload']['size']/1024, 2, '.', '') .' KB'; 
            const$response file = event.target.files[0];[ 
            if (file) {
  'url' => $url 
            uploadFile(file)]; 
        }else{ 
       }
     $response = [ });
    </script>
</body>
</html>

Code Block

language	php
title	upload.php

<?php
// Check if the file was uploaded without errors
if ($_FILES['file']['error'] === UPLOAD_ERR_OK) {
    $uploadDir = 'uploads/'; // Adjust the upload directory
    $uploadFile = $uploadDir . basename($_FILES['file']['name']);

    // Move the uploaded file to the desired directory
    if (move_uploaded_file($_FILES['file']['tmp_name'], $uploadFile)) {
            'error' => [ 
                    'message' => 'Unable to upload the file!' 
                ] 
            ]; 
        } 
    }else{ 
        $response echo= json_encode(['success' => true, 'url[ 
            'error' => $uploadFile]);
    } else {[ 
                'message' => 'Error: '.$re 
        echo json_encode(['success' => false, 'error' => 'Failed to move the uploaded file.']);    ] 
        ]; 
    } 
} else
 {
// Return response in JSON format 
echo json_encode(['success' => false, 'error' => 'File upload failed.']$response); 
}
?>

Space shortcuts

Page tree

Versions Compared

Old Version 11

New Version Current

Key