ckeditor5官網(wǎng)目前不支持wps的圖片粘貼，但可以通過修改源碼實(shí)現(xiàn)。
<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,//編輯器實(shí)例
? ? ? };
? ? },
? ? 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 對(duì)象上傳文件
? ? ? ? ? ? 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數(shù)據(jù),包括uploaded(選項(xiàng)true/false)和url兩個(gè)字段
? ? ? ? ? }
? ? ? ? }).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 //將編輯器保存起來，用來隨時(shí)獲取編輯器中的內(nèi)容等，執(zhí)行一些操作
? ? ? ? ? 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>
如果不懂可以聯(lián)系我，轉(zhuǎn)載請(qǐng)附上原文地址
