[英]ckeditor5 vue check the image already removed
i am using ckeditor5 vue version for my article form from this package and it also come with example handling image upload by adding this code 我正在使用此软件包中的文章表格使用ckeditor5 vue版本,并且还附带了通过添加此代码来处理图像上传的示例
UploadAdapter: function (loader) {
this.loader = loader
this.upload = () => {
const body = new FormData();
body.append('gambar', this.loader.file);
let token = window.localStorage.getItem('token');
return fetch('https://bkcuvue.test/api/v1/artikel/upload', {
headers: {"Authorization": 'Bearer ' + token},
body: body,
method: 'POST'
})
.then(response => response.json())
.then(downloadUrl => {
return {
default: downloadUrl
}
})
.catch(error => {
console.log(error);
});
}
this.abort = () => {
console.log('Abort upload.')
}
},
and then on my backend (laravel) is just like this 然后在我的后端(laravel)就像这样
public function upload(Request $request)
{
if(!empty($request->gambar))
$fileName = Helper::image_processing($this->imagepath,$this->width,$this->height,$request,'');
else
$fileName = '';
return response()->json('/' . $this->imagepath . $fileName . '.jpg');
}
to the ckeditor component 到ckeditor组件
<vue-ckeditor type="classic" v-model="htmlContent" :upload-adapter="UploadAdapter"></vue-ckeditor>
and it works! 而且有效! but the problem that soon i realize is because this method is uploading the image to the server and then returning image path to or editor which will be saved to the database as a plain html tags...
但是我很快意识到的问题是因为此方法将图像上传到服务器,然后将图像路径返回到或编辑器,该路径将作为纯html标签保存到数据库中...
then if for example i upload image and then i want to remove or maybe change the image then the editor will delete the img tag from the editor but not the real image file on the server.... 然后,例如,如果我上传图像,然后想要删除或更改图像,则编辑器将从编辑器中删除img标签,而不是服务器上的真实图像文件。...
the image file will remain on the server and there is no way i can delete it unless i select the image and delete it myself by going into server by ftp or ssh manualy. 图像文件将保留在服务器上,除非我选择图像并通过ftp或ssh手动进入服务器,然后将其自己删除,否则我无法删除它。
is there any way to check if the image tag is deleted then it will delete on the server. 有什么方法可以检查图像标记是否被删除,然后它将在服务器上删除。 Or maybe there is a way in backend to check if this image file is not used by any article...
或者也许后端有一种方法可以检查任何文章是否都没有使用此图像文件...
and also if i upload the same image twice then it will also uploading to the server twice the same file, how can i detect if the same image file is already on the server and not upload duplicate but immediately return the image path 并且如果我两次上传相同的图像,那么它将两次也将同一文件上传到服务器两次,如何检测服务器上是否已存在相同的图像文件,而不是上传重复的图像,而是立即返回图像路径
I use this method, upload the images and save the URLs. 我使用这种方法,上传图像并保存URL。 When I send the content of editor also send the URLs and on the server i compare that the URLs are in the content of the editor and those that are not i delete the corresponding file.
当我发送编辑器的内容时,还会发送URL,并且在服务器上,我比较URL是否在编辑器的内容中,而不是那些URL,则删除相应的文件。
Client: 客户:
onChange={ ( event, editor ) => {
this.state.description = editor.getData();
var vm = this
var urls = Array.from( new DOMParser().parseFromString( editor.getData(), 'text/html' )
.querySelectorAll( 'img' ) )
.map( img => img.getAttribute( 'src' ) );
urls.forEach(function(element) {
if (String(element).length > 10) {
if (vm.state.filesCKeditor.length > 0) {
if(filter(vm.state.filesCKeditor, function(o) { return String(o) === String(element) }).length == 0)
{
vm.state.filesCKeditor.push(element)
}
}else{
vm.state.filesCKeditor.push(element)
}
}
});
}}
Server: 服务器:
foreach (explode(',',$this->post('filesCKeditor')) as $value) {
# code...
if (!isset(explode($value,$this->post('content'))[1])) {
print_r('false');//add code for delete image
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.