CKEditor编辑器怎么加图片上传功能？超详细教程，小白也能快速学会！

第一步：先搞懂CKEditor的“上传逻辑”——大白话讲清楚，不懵

很多人以为CKEditor本身能存图片，其实它更像个“传话的”：你点“上传”时，它得把图片交给一个“存图的地方”（比如你的服务器、云存储），拿到图片的“地址（URL）”后，再插进文章里。核心就两点：给CKEditor找个“存图的地方”，再让它知道“怎么联系这个地方”。

我第一次弄的时候，也以为要写一堆代码，后来查了CKEditor官方文档（https://ckeditor.com/docs/ckeditor4/latest/features/image_upload.htmlnofollow）才发现：它早就给了“现成的配置项”——只要填对“存图地方的地址”，就能让上传按钮生效。比如我朋友用的是七牛云存储，我直接复制了七牛的“上传接口”，填进配置里，5分钟就通了。

简单来说：CKEditor负责“发起上传请求”，后端/云存储负责“接收并保存图片”，最后CKEditor把图片地址插进文章。你不用管“存图”的细节，只要把“接口地址”填对就行——比拼乐高还简单。

第二步：手把手配置——从改文件到测试，每步都有“避坑提醒”

接下来进入实操环节。我按“最常见的CKEditor4版本”讲（要是你用的是CKEditor5，原理一样，配置项名字稍微变一下），保证你跟着走不迷路。

CKEditor的核心配置文件叫config.js，一般在ckeditor/config.js目录下（比如你的网站根目录是www，那路径就是www/ckeditor/config.js）。要是你用的是框架集成版（比如Vue里的CKEditor），得在组件里写配置，但逻辑一样。

我去年帮朋友找文件时，一开始误打开了ckeditor/plugins/image/plugin.js，改了半天没反应——后来才发现，所有上传配置都要写在config.js里！你打开config.js后，会看到这样的代码：

CKEDITOR.editorConfig = function( config ) {
 // 这里是默认配置
};

我们要把“上传配置”加在这个函数里。

直接在config.js里加这几行（复制粘贴就行，别手敲）：

// 图片上传接口地址（关键！填你后端/云存储的接口）
config.imageUploadUrl = '/api/upload/image'; 
// 兼容旧版CKEditor的配置（可选，但加了更保险）
config.filebrowserImageUploadUrl = '/api/upload/image'; 
// 要是接口需要身份验证（比如Token），就加这个（没有可以删）
config.imageUploadHeaders = { "Authorization": "Bearer your_token" }; 

为了让你更清楚，我做了个“配置项说明表”，直接对应填就行：

重点提醒：imageUploadUrl是核心——要是你没有后端接口，直接用“云存储的现成接口”就行（比如七牛云、阿里云的对象存储，他们的控制台里有“上传接口地址”，复制过来填进去）。我朋友用的是七牛云，我帮他复制了“华南区上传接口”（https://upload.qiniup.com），填进去立马能用。

配置完别着急关文件，立刻测试！按这3步来：

我朋友第一次测试时，传图显示“接口错误”——后来发现他把接口地址写错了一个字母：把/api/upload/image写成了/api/upoad/image（少了个“l”）。所以填地址时一定要复制粘贴，别手敲！

第三步：避坑指南——我踩过的3个“雷”，你直接跳过

最后跟你说3个我踩过的坑，帮你节省时间：

要是你的CKEditor网站是www.xxx.com，而后端接口是api.xxx.com，会出现“跨域错误”（浏览器提示“Access-Control-Allow-Origin”）。这时候让后端加个响应头就行：

Access-Control-Allow-Origin: （允许所有域名访问）

我朋友当时遇到这个问题，我让他后端加了这行代码，5分钟就解决了。

要是你传超过5M的图时失败，可能是后端接口限制了“文件大小”（一般默认是2M）。两种解决办法：

要是你用云存储（比如七牛云），传完图显示“403禁止访问”，肯定是“存储桶权限”设成了“私有”——改成“公开可读”就行！我朋友之前把七牛云的存储桶设为“私有”，结果传的图全显示不了，改成“公开”后立马正常。

怎么样？是不是比你想象的简单？我去年帮朋友弄的时候，前后花了不到半小时——现在他写稿时，直接点“上传图片”选本地文件，几秒钟就能插进去，再也不用折腾图床了。你要是按这些步骤试了，欢迎回来告诉我效果；要是遇到问题，评论区留个言，我帮你看看。

对了，要是你懒得自己弄，也可以试试CKEditor的“付费插件”（比如CKFinder），但性价比肯定不如云存储高——毕竟免费的云存储接口就能解决问题，何必花冤枉钱？赶紧去试试吧，等你体验“写稿不卡壳”的快乐！

配置完config.js，为什么CKEditor里没有“上传图片”的按钮？

首先检查config.js里的配置项有没有写错——核心是imageUploadUrl和filebrowserImageUploadUrl这两个项，有没有填对“存图地方”的地址。比如我之前帮朋友配置时，他把imageUploadUrl写成了imageUpLoadUrl（大小写错了），结果按钮没出来，改对后立马显示了。 要是用的是CKEditor4，得确保没禁用image插件（一般默认启用，但万一被关了，要在config.js里加config.extraPlugins = 'image';）。

还有可能是浏览器缓存的问题——改完config.js后，清一下浏览器缓存（按Ctrl+Shift+Delete）再刷新页面，有时候缓存会保留旧的配置，导致按钮不显示。

没有后端接口，怎么找“存图的地方”的地址？

直接用云存储的现成接口就行！比如七牛云、阿里云的“对象存储”服务，控制台里都有现成的“上传接口地址”，复制过来填进imageUploadUrl里就能用。像我朋友用的七牛云，登录后找到“存储空间”→“上传设置”，里面的“上传域名”就是接口地址，比如华南区的是https://upload.qiniup.com，直接复制这个地址填进去，不用自己写一行后端代码。

要是嫌注册云存储麻烦，也可以用免费图床的接口，但要注意稳定性——比如imgur国内访问慢，还是 用国内的云存储（像七牛云有10G免费额度，足够个人博客用），省得后期图片突然失效。

上传时提示“跨域错误”，怎么办？

跨域是因为CKEditor的网站域名和“存图接口”的域名不一样（比如你的网站是www.xxx.com，接口是api.xxx.com），浏览器会拦截请求。解决办法很简单：让后端在接口的响应头里加一行代码——Access-Control-Allow-Origin: （允许所有域名访问），或者更安全一点，加你网站的具体域名（比如Access-Control-Allow-Origin: https://www.xxx.com）。

我朋友之前遇到这个问题时，后端用的是PHP，我让他在接口文件里加了header("Access-Control-Allow-Origin: *");，刷新页面再传图，立马就好了。要是你用的是云存储接口（比如七牛云），它们的接口已经处理了跨域，直接用就行，不用自己加。

图片上传成功，但编辑器里显示不了，是哪里的问题？

最常见的原因是“存图的地方”没开“公开访问”——比如你用七牛云存图片，要是存储空间设成“私有”，图片地址会被拦截，根本显示不了。这时候登录云存储控制台，把存储空间的“访问权限”改成“公开可读”，再重新传一张图试试，肯定能显示。

也有可能是图片地址错了——比如接口返回的URL是不是少了https，或者域名拼错了。你可以把图片地址复制到浏览器地址栏里打开，要是能看到图片，说明地址没问题；要是打不开，就再检查接口配置或者云存储的权限。

传大一点的图片就失败，是哪里限制了？

主要是“存图的地方”限制了文件大小——比如后端用Nginx的话，默认client_max_body_size是1M，超过就会报错；PHP的upload_max_filesize默认是2M，也会拦。要是你用云存储（比如七牛云），免费额度的单文件大小限制是10G，一般不会有问题，但要是自己的后端，就得改配置：Nginx里改client_max_body_size为10M，PHP里改upload_max_filesize和post_max_size为10M。

要是不想改配置，也可以压缩图片——用微信截图工具打开要传的图，点击“保存”，图片大小会自动压缩到1-2M，画质几乎没区别，上传速度还快。我自己传图前都会压一下，从来没遇到过大小限制的问题。

YUANLEISVIP

收藏 链接