CKEditor5简单的使用

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",
}

如果想加一些自定义的参数该怎么办呢？我们可以这样

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();
}