CKEditor5 + ckfinder3(php)

CKEditor5 resource download, here we choose ckeditor5-build-classic download:

https://ckeditor.com/ckeditor-5-builds/download/

ckfinder3 select the PHP version to download:

https://ckeditor.com/ckeditor-4/download/#ckfinder

Please note before installing CKEditor5, I found that the IE11 browser may not support CKEditor5, the debugging browser is best to use the latest version of Firefox.

CKEditor5 quick installation method:

https://docs.ckeditor.com/ckeditor5/latest/builds/guides/quick-start.html#classic-editor

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CKEditor 5 - Classic editor</title>
    <script src="https://cdn.ckeditor.com/ckeditor5/10.0.0/classic/ckeditor.js"></script>
</head>
<body>
    <h1>Classic editor</h1>
    <textarea name="content" id="editor">
        <p>This is some sample content.</p>
    </textarea>
    <script>
        ClassicEditor
            .create( document.querySelector( '#editor' ) )
            .catch( error => {
                console.error( error );
            } );
    </script>
</body>
</html>

The above code saves example.html and runs it in the root directory of the website.

ClassicEditor is not defined

If the editor does not appear and there is this error message in the console, it means that your browser does not support ckeditor5, please use the latest version of Firefox.

Without the above problems, just replace <script src="https://cdn.ckeditor.com/ckeditor5/10.0.0/classic/ckeditor.js"></script> with a local link.

ckfinder installation method:

After decompressing ckfinder, put it in the root directory of the website.

Open http://localhost/ckfinder/ckfinder.html

The following prompt will appear:

The file browser is disabled for security reasons. Please contact your system administrator and check the CKFinder configuration file.

Open ckfinder/config.php

Change false to true and save.

$config['authentication'] = function () {
    return true;
};

Visit http://localhost/ckfinder/ckfinder.html again

Normal display, test whether the function of uploading pictures is normal.

Note: Do not upload pictures with Chinese characters, and change them to English or numbers, otherwise it will cause garbled characters and the picture cannot be returned.

Change upload file path

$config['backends'][] = array(
    'name'         => 'default',
    'adapter'      => 'local',
    'baseUrl' => '/ckfinder/userfiles/',
//  'root'         => '', // Can be used to explicitly set the CKFinder user files directory.
    'chmodFiles'   => 0777,
    'chmodFolders' => 0755,
    'filesystemEncoding' => 'UTF-8',
);

'baseUrl' => '/ckfinder/userfiles/', this custom upload image path, you can change it here.

CKEditor5+ckfinder combined solution:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CKEditor 5 - Classic editor</title>
    <script src="/ckeditor/ckeditor.js"></script>
    <script src="/ckeditor/translations/zh-cn.js"></script>
</head>
<body>
    <h1>Classic editor</h1>
    <textarea name="content" id="editor" rows="10">
        <p>This is some sample content.</p>
    </textarea>
    <script type="text/javascript">
        ClassicEditor
            .create( document.querySelector( ' #editor ' ), {
                 // Toolbar, you can choose to add or remove 
                // toolbar: ['headings', 'bold', 'italic', 'blockQuote', 'bulletedList', ' numberedList', 'link', 'ImageUpload', 'undo'], 
                // The editor loads simplified Chinese, the default is English 
                language: ' zh-cn ' ,
                ckfinder: {
                    uploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images&responseType=json'
                }
            }
            )            
            .catch( error => {
                console.error( error );
            } );
    </script>
</body>
</html>

Summary: Pay attention to whether the browser is compatible with ckeditor5, and the path of ckeditor and ckfinder.