ckeditor实现本地图片base64方式上传到编辑区域

不是传服务器,而是上传到编辑区域,
效果图如下,URL中,可以填写图片base64,思路就是增加一个上传文件的input,并且把得到的图片文件转为base64赋予URL

重写\plugins\image\dialogs\image.js里的add image方法,

CKEDITOR.dialog.add("image", function (d) {
		setTimeout(()=>{
			let dom = document.getElementsByClassName("ck-input-url")[0];
			dom.style.width="100%";
			let input = dom.getElementsByTagName("input")[0]
			let fileInput = document.createElement("input");
			fileInput.type="file";
			fileInput.className="ck-file-upload-custom";
			//忘了加入图片accept
			fileInput.accept="images/*";
			fileInput.onchange=function(e){
				let file = e.target.files[0];
				if(file){
					let fileReader = new FileReader();
					fileReader.readAsDataURL(file);
					fileReader.onload = function () {
						let src = fileReader.result;
						input.value=src;
					};
				}
			}
			dom.appendChild(fileInput);
		},500);
        return u(d, "image")
    });

预览功能没兼容

此外需要对
className: “cke_dialog_image_url”, 下面的children内第一个元素加上一个className: “ck-input-url”, 才行

2022/3/8新增
以上方法有个bug,就是每次重新打开图片上传界面时会出现上一次的内容(而且无法重新传同一张图片)
以下是修改方式
重写了CKEDITOR.tools.callFunction函数

CKEDITOR.tools.callFunction=(function(f){
		return function(){
			f.apply(this,arguments);
			setTimeout(()=>{
				let tg = document.getElementById("ckeditor-custom-image-input");
				if(tg){
					tg.parentElement.removeChild(tg);
				}
				let dom = document.getElementsByClassName("ck-input-url")[0];
				dom.style.width="100%";
				let input = dom.getElementsByTagName("input")[0]
				let fileInput = document.createElement("input");
				fileInput.id="ckeditor-custom-image-input";
				fileInput.type="file";
				fileInput.className="ck-file-upload-custom";
				fileInput.accept="image/*";
				fileInput.onchange=function(e){
					let file = e.target.files[0];
					if(file){
						let fileReader = new FileReader();
						fileReader.readAsDataURL(file);
						fileReader.onload = function () {
							let src = fileReader.result;
							input.value=src;
						};
					}
				}
				dom.appendChild(fileInput);
			},500);
		}
	})(CKEDITOR.tools.callFunction);