ckeditor5官网目前不支持wps的图片粘贴，但可以通过修改源码实现。
<template>
<div>
<div v-if="!disabled">
<div id="toolbar-container"></div>
<!-- 编辑器容器 -->
<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:\/\/线上地址/
let IS_UPLOAD = false
export default {
name: 'my-quill-edit',
data () {
return {
editor: null,//编辑器实例
};
},
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 () {
//重置上传路径
// let fileName = 'goods' + this.loader.file.lastModified;
// var fileName = 'goods' + this.loader.file.lastModified
// 通过 FormData 对象上传文件
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
//后端处理上传逻辑返回json数据,包括uploaded(选项true/false)和url两个字段
}
}).then(editor => {
const toolbarContainer = document.querySelector('#toolbar-container');
toolbarContainer.appendChild(editor.ui.view.toolbar.element);
// 加载适配器
editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
return new UploadAdapter(loader);
}
this.editor = editor //将编辑器保存起来，用来随时获取编辑器中的内容等，执行一些操作
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)
// 获取图片地址
if (!src) return false
if (src && src[1] && !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);//销毁编辑器
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>
参考文章：http://blog.ncmem.com/wordpress/2023/10/17/vue%e4%b8%ad%e4%bd%bf%e7%94%a8ckeditor%e6%94%af%e6%8c%81wpsword%e7%bd%91%e9%a1%b5%e7%b2%98%e8%b4%b4-3/
欢迎入群一起讨论
标签：src,vue,word,ckeditor,default,res,loader,let,editor From： https://www.cnblogs.com/songsu/p/17769368.html