CKEditor5 + ckfinder3(php)

CKEditor5资源下载，这里我们选择ckeditor5-build-classic下载：

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

ckfinder3选择PHP版本下载：

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

CKEditor5安装前请注意，我发现IE11浏览器有可能是不支持CKEditor5的，调试浏览器最好是用最新版本的火狐。

CKEditor5快速安装方法：

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>

上边的代码保存example.html，放到网站根目录下运行。

ClassicEditor is not defined

如果辑编器不出现，并且在console中有这个错误提示，证明你的浏览器不支持ckeditor5，请用最新版本的火狐。

没有上述的问题，把<script src="https://cdn.ckeditor.com/ckeditor5/10.0.0/classic/ckeditor.js"></script>换成本地链接就好。

ckfinder安装方法：

把ckfinder解压后，放到网站根目录下。

打开http://localhost/ckfinder/ckfinder.html

会出现如下提示：

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

打开ckfinder/config.php

把false改成true，保存。

$config['authentication'] = function () {

    return true;

};

再次访问http://localhost/ckfinder/ckfinder.html

正常显示，测试上传图片功能是否正常。

注意：上传图片不要带中文汉字，全改成英文或数字，不然会造成乱码，不能返回图片。

更改上传文件路径

$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/'，这个自定义上传图片路径，更改这里即可。

CKEditor5+ckfinder(php)结合解决方法：

<!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: ['headings', 'bold', 'italic', 'blockQuote', 'bulletedList', 'numberedList', 'link', 'ImageUpload', 'undo'],

                //editor加载中文简体，默认是英文

                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>

CKEditor5，ckfinder减肥（可忽略）

由于下载的文件中带有一些用不上的语言包和案例，为了减少空间，可以把这些文件删除

CKEditor5删除文件：

删除\ckeditor\LICENSE.md

删除\ckeditor\README.md

保留\ckeditor\translations下只留用得上的语言包，其他删除。比如我，只留一个zh-cn.js

ckfinder删除文件：

删除\ckfinder\samples

删除\ckfinder\userfiles　　//如果不更改上传图片路径，这个保留不册

删除\ckfinder\CHANGELOG.html

删除\ckfinder\ckfinder.html

删除\ckfinder\LICENSE.html

删除\ckfinder\README.html

删除\ckfinder\lang下只留用得上的语言包，其他删除。比如我，只留一个zh-cn.json

ckeditor5+ckfinder(php)整合下载，本人测试直接在网页上下载是失败的，请用迅雷，虽然慢点，但好歹也可以下载。

下载地址：https://files.cnblogs.com/files/iasnsqt/ckeditor-ckfinder.rar

总结：注意浏览器是否兼容ckeditor5，还有ckeditor和ckfinder路径问题。