The ckeditor5 official website currently does not support WPS image pasting, but it can be achieved by modifying the source code.
<template>
<div>
<div v-if="!disabled">
<div id="toolbar-container"></div>
<!-- Editor container -->
<div id="editor">
<p>This is the initial editor content.</p>
</div>
</div>
<div class="look" v-else>
<div v-html="modelData"></div>
</div>
</div>
</template>
<script>
const ZZ_HTTP = process.env.NODE_ENV === 'development' ? /^http:\/\/192.168.1.205/ : /^http:\/\/Online address/
let IS_UPLOAD = false
export default {<!-- -->
name: 'my-quill-edit',
data () {<!-- -->
return {<!-- -->
editor: null,//Editor instance
};
},
model: {<!-- -->
prop: 'modelData',
event: 'modelChage'
},
props: {<!-- -->
modelData: {<!-- -->
type: String,
default: ''
},
disabled: {<!-- -->
type: Boolean,
default: false
}
},
created () {<!-- -->
this.value2 = this.modelData
setTimeout(() => {<!-- -->
this.$nextTick(() => {<!-- -->
this.initCKEditor()
})
}, 500);
},
mounted () {<!-- -->
},
methods: {<!-- -->
initCKEditor () {<!-- -->
if (this.disabled) return
let _this = this;
class UploadAdapter {<!-- -->
constructor(loader) {<!-- -->
this.loader = loader;
}
async upload () {<!-- -->
//Reset upload path
// let fileName = 'goods' + this.loader.file.lastModified;
// var fileName = 'goods' + this.loader.file.lastModified
//Upload files through FormData object
let file = await this.loader.file
return new Promise((resolve, reject) => {<!-- -->
let formData = new FormData();
formData.append('files', file);
_this.$api.ckeditImageUpload3(formData).then(res => {<!-- -->
// let resData = res[0]
// resData.default = res[0].filePath;
if (res) {<!-- -->
resolve({<!-- -->
default: res[0].filePath
});
} else {<!-- -->
resolve({<!-- -->
default: ''
});
}
}).catch(error => {<!-- -->
reject(error)
return false
})
})
// _this.$axios.post(_this.$url.uploadUrl, formData).then(rs => {<!-- -->
// if (rs) {<!-- -->
// console.log(rs.filePath);
// }
// });
// client().put(fileName, this.loader.file).then(result => {<!-- -->
// console.log(result);
// resolve({<!-- -->
// default: result.url
// })
// }).catch(err => {<!-- -->
// console.log(err)
// })
}
abort () {<!-- -->
}
}
ClassicEditor.create(document.querySelector('#editor'), {<!-- -->
ckfinder: {<!-- -->
// uploadUrl: this.$url.uploadUrl
//The backend processes the upload logic and returns json data, including uploaded (option true/false) and url fields.
}
}).then(editor => {<!-- -->
const toolbarContainer = document.querySelector('#toolbar-container');
toolbarContainer.appendChild(editor.ui.view.toolbar.element);
//Load adapter
editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {<!-- -->
return new UploadAdapter(loader);
}
this.editor = editor //Save the editor and use it to access the content in the editor at any time and perform some operations.
editor.setData(this.modelData || '')
editor.model.document.on('change:data', (eventInfo, name, value, oldValue) => {<!-- -->
// this.value = this.editor.getData()
this.handleImage(this.editor.getData())
this.$emit('modelChage', this.editor.getData())
});
}).catch(error => {<!-- -->
console.error(error);
});
},
handleImage (val) {<!-- -->
var imgReg = /<img.*?(?:>|\/>)/gi
var srcReg = /src=['"]?([^'"]*)['"]?/i
var arr = val.match(imgReg)
let array = []
if (arr) {<!-- -->
for (var i = 0; i < arr.length; i + + ) {<!-- -->
var src = arr[i].match(srcReg)
// Get the image address
if (!src) return false
if (src & amp; & amp; src[1] & amp; & amp; !src[1].match(ZZ_HTTP)) {<!-- -->
array.push(src[1])
}
}
}
if (array[0]) {<!-- -->
this.uploadImage(array)
}
},
uploadImage (array) {<!-- -->
this.$api.ckeditImageUpload({<!-- --> urlList: array }).then(res => {<!-- -->
if (res) {<!-- -->
let newVal = this.editor.getData()
let str = ''
res.forEach(item => {<!-- -->
newVal = newVal.replace(item.oldUrl, item.newUrl)
})
// this.editor.destroy(true);//Destroy the editor
this.editor.setData(newVal)
}
})
}
}
}
</script>
<style lang="less">
.ck.ck-editor__editable_inline {<!-- -->
max-height: 500px !important;
overflow-x: hidden !important;
}
</style>
<style lang="less" scoped>
#editor .ck-blurred.ck {<!-- -->
height: 400px;
}
.look {<!-- -->
max-height: 500px;
overflow-x: hidden;
}
</style>
Reference article: http://blog.ncmem.com/wordpress/2023/10/17/Using ckeditor in vue to support wpsword web page pasting-3/
Welcome to join the group to discuss
