早睡早起,方能养生!
Sleep early rise early, square can preserve one's health!

CKEditor5简单的使用

super
2021-06-10 13:00
views 69

1)去官网下载CKEditor的代码

 

https://ckeditor.com/ckeditor-5/online-builder/

 

2)自定义组件

 

①. 选择编辑器类型

 

 

②. 根据自己的需求增删组件(其中带$符号的为收费项,)

 

注:如果想要上传图片 CKFinder upload adapter 组件是必选的

 

 

③. 调整组件位置,把上面亮着的组件拖到下面合适的位置

 

 

④. 选择语言

 

 

⑤. 下载组件

 

注:如果提示下图,代表你选择的组件中,有需要付费的项目(可以回到第③步去掉收费组件)

 

 

正常提示如下,点击按钮下载即可

 

 

3)解压,将CKEditor目录放到你的项目目录中,并在页面引用

 

 

4)初始化编辑器,这一步非常重要!!!

 

也非常简单=。=,打开/ckeditor/sample/index.html (这是ckeditor根据你选择的组件生成的示例html代码【可运行】)

 

 

找到后在你的IDE中打开html示例代码,找到script部分,将整块儿script中的代码放到你需要用到编辑器的页面中

 

 

差不多就是这个样子

 

 

将document.querySelector('#editor') 中括号里面的内容换成你的dom节点

 

 

5)配置图片上传地址

 

在licenseKey下,新建ckfinder,定义上传地址即可

 

 

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

 

 

 … 你的上传操作,balabalabala …

 

拿到图片的路径后,拼接成完整路径如http://rongsp.com/upload_pic_path.jpg 例:

 

 

这个格式返回的数据,才能被ckeditor给实时的在编辑器中显示出来

 

 

7)获取编辑器内容

 

// 获取编辑器内容
function getEditor() {
    return window.editor.getData();
}

分享
0 条讨论
top