CKEditor5简单的使用
![views](/static/super/images/icon/evaluate-9a.png)
1)去官网下载CKEditor的代码
https://ckeditor.com/ckeditor-5/online-builder/
2)自定义组件
①. 选择编辑器类型
![](/uploads/article/20210610/0ae0e9c6d68bc66e12765361329ebedb.png)
②. 根据自己的需求增删组件(其中带$符号的为收费项,)
注:如果想要上传图片 CKFinder upload adapter 组件是必选的
![](/uploads/article/20210610/8c7851ee9555d11474e818a6d44b17f8.png)
③. 调整组件位置,把上面亮着的组件拖到下面合适的位置
![](/uploads/article/20210610/8575002f5ee2a058b6602194f658124f.png)
④. 选择语言
![](/uploads/article/20210610/87db30110befaeafd0b88190c101a60b.png)
⑤. 下载组件
注:如果提示下图,代表你选择的组件中,有需要付费的项目(可以回到第③步去掉收费组件)
![](/uploads/article/20210610/4ffaf5ba68bba5bda06ea213ec0e5911.png)
正常提示如下,点击按钮下载即可
![](/uploads/article/20210610/2eb30fc89600fcdf1eaaa4087c256154.png)
3)解压,将CKEditor目录放到你的项目目录中,并在页面引用
![](/uploads/article/20210610/a93e1b26ebb5ecd50b56fe6254cee800.png)
4)初始化编辑器,这一步非常重要!!!
也非常简单=。=,打开/ckeditor/sample/index.html (这是ckeditor根据你选择的组件生成的示例html代码【可运行】)
![](/uploads/article/20210610/229c9e0714b526fb244280b71606d66e.png)
找到后在你的IDE中打开html示例代码,找到script部分,将整块儿script中的代码放到你需要用到编辑器的页面中
![](/uploads/article/20210610/235db1db63c9701da03563598f62e227.png)
差不多就是这个样子
![](/uploads/article/20210610/a2e6b64f1dc88bc309876e8ff3d620e7.png)
将document.querySelector('#editor') 中括号里面的内容换成你的dom节点
![](/uploads/article/20210610/8b32e72e4fe16feca5a49956360990a6.png)
5)配置图片上传地址
在licenseKey下,新建ckfinder,定义上传地址即可
![](/uploads/article/20210610/6e8640a74b154959e0a8a95429d52e04.png)
ckfinder: {
uploadUrl: "https://rongsp.com/upload.html",
}
文档:https://ckeditor.com/docs/ckeditor5/latest/api/module_ckfinder_ckfinder-CKFinderConfig.html
如果想加一些自定义的参数该怎么办呢?我们可以这样
ckfinder: {
uploadUrl: "https://rongsp.com/upload.html?path=goods",
}
6)后端处理
首先,打开控制台可以发现,默认的上传key名叫:upload
![](/uploads/article/20210610/1fa1c58f6f310e0419582c552033b1fd.png)
… 你的上传操作,balabalabala …
拿到图片的路径后,拼接成完整路径如http://rongsp.com/upload_pic_path.jpg 例:
![](/uploads/article/20210610/f7343c7ec4ad55bf15ee2e9021cb93bc.png)
这个格式返回的数据,才能被ckeditor给实时的在编辑器中显示出来
![](/uploads/article/20210610/ea8808890c3478a87289db2d6dab5f7e.png)
7)获取编辑器内容
// 获取编辑器内容
function getEditor() {
return window.editor.getData();
}