首页 技术 正文
技术 2022年11月12日
0 收藏 646 点赞 4,057 浏览 2950 个字

CKEditor5资源下载,这里我们选择ckeditor5-build-classic下载:

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

ckfinder3选择PHP版本下载:

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

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

CKEditor5快速安装方法:

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

<!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路径问题。

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:8,993
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,507
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,350
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,135
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,768
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,845