可TINYMCE编辑器复制多张图片本地路径无法处理,尝试升级TINYMCE版本
给你一个在线转化网站
http://www.mf2.cn/img2base64/
提供参考实例【tinymce编辑支持word内容和截图的复制黏贴】,链接:http://t.zoukankan.com/songsu-p-13218239.html
tinymce实现粘贴图片自动上传(自动上传粘贴的Base64)
tinymce.init({
selector: 'div#editable',
// 解决粘贴图片后,不自动上传,而是使用base64编码。
urlconverter_callback: (url, node, onSave, name) => {
if (node === 'img' && url.startsWith('blob:')) {
// Do some custom URL conversion
console.log('urlConverter:', url, node, onSave, name)
tinymce.activeEditor && tinymce.activeEditor.uploadImages()
}
// Return new URL
return url
},
// 此处为图片上传处理函数
images_upload_handler: (blobInfo, success, failure, progress) => {
console.log('上传处理器:', blobInfo)
// 方法1:用base64的图片形式上传图片
// const img = 'data:image/jpeg;base64,' + blobInfo.base64()
// success(img)
// 方法2:上传oos
const xhr = new XMLHttpRequest()
xhr.withCredentials = false
xhr.open('POST', '/zuul/purchase/manage/object/push')
// xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded;charset=utf-8')
xhr.setRequestHeader('x-token', this.$store.getters.token)
xhr.upload.onprogress = function (e) {
progress(e.loaded / e.total * 100)
}
xhr.onload = function () {
if (xhr.status === 403) {
failure('HTTP Error: ' + xhr.status, { remove: true })
return
}
if (xhr.status < 200 || xhr.status >= 300) {
failure('HTTP Error: ' + xhr.status)
return
}
const json = JSON.parse(xhr.responseText)
if (!json || typeof json.data.fileName !== 'string') {
failure('Invalid JSON: ' + xhr.responseText)
return
}
const file = json.data
const url = '/purchase/manage/attachment/public/operation/pull?path=' + file.fileName + '&fileName=' +
encodeURIComponent(file.originalFileName)
success(url)
}
xhr.onerror = function () {
failure('Image upload failed due to a XHR Transport error. Code: ' + xhr.status)
}
const formData = new FormData()
formData.append('multipartFile', blobInfo.blob(), blobInfo.filename())
xhr.send(formData)
},
});
// 获取本地图片文件
const fileInput = document.querySelector('#image-input');
const file = fileInput.files[0];
// 创建FileReader对象
const reader = new FileReader();
// 使用FileReader的readAsDataURL方法将图片转换为base64编码
reader.readAsDataURL(file);
// 当转换完成时,使用TINYMCE编辑器的insertContent方法将base64编码插入到编辑器中
reader.onloadend = function() {
tinymce.activeEditor.insertContent(`<img src="${reader.result}"/>`);
}