Catalog
  1. 1. ckeditor 图片上传修改
    1. 1.1. 背景
    2. 1.2. 源码位置
    3. 1.3. 修改方案
ckeditor

ckeditor 图片上传修改

背景

公司使用ckeditor作为富文本空间,最近发现图片上传时,在链接返回后需要过一段时间才能访问到图片

询问文件服务同事因对接原因无法处理,我这边决定从前端进行校验

源码位置

图片上传失败会显示一个红色图片(noimage.png),此处通过该图片找到对应代码位置为

1
ckeditor/plugins/image/dialogs/image.js

观察此处为处理图片异常逻辑,替换原有链接为 noimage.png

修改方案

首先通过js判断图片是否存在

1.8
1
2
3
4
5
6
7
8
9
function check_image_exist(src) {
let image = new Image()
image = src

if (image.width() > 0 || image.height() > 0) {
return true
}
return false
}

其次将原有代码封装为新函数oldFunction()

添加定时器,进行一定延时后循环判断文件是否可访问
代码大致思路如下

1.8
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
let gap_time = 300
let max_count = 10
let count = 0
let find = -1
let timer = setInterval(time, gap)
let src = ''
function time() {
count++;
if (find != -1 && count > find) {
let newSrc = src + "?t" + Math.random()
// 设置新src 加上随机数强制页面重新加载图片
clearInterval(timer)
return
}

if (check_image_exist(src)) {
find = count + 1
}

if (count >= max_count) {
clearInterval(timer)
oldFunction()
return
}
}
Author: tuean
Link: http://tuean.cn/2019/10/30/ckeditor/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.
Donate
  • 微信
  • 支付寶

Comment