vue中使用ckeditor,支持wps,word,网页粘贴

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/
欢迎入群一起讨论