Vue CKEditor5 剪切板事件监听，贴贴事件拦截

<template>
  <!-- ckeditor 父元素 -->
  <div class="editor-view">
    <!-- 编辑器 -->
    <div id="editor"></div>
  </div>
</template>
<script>
// 经典编辑器（$ npm install --save @ckeditor/ckeditor5-build-classic）
import Editor from '@ckeditor/ckeditor5-build-classic'
// 中文包（语言包都在 build 版本中，注意 ckeditor5-build-xxx，xxx 需要替换为安装的编辑器包路径)
import '@ckeditor/ckeditor5-build-classic/build/translations/zh-cn'
// 安装剪切板（$ npm install @ckeditor/ckeditor5-clipboard）
import plainTextToHtml from '@ckeditor/ckeditor5-clipboard/src/utils/plaintexttohtml'
export default {
  data () {
    return {
      // 编辑器对象
      editor: undefined,
      // 编辑内容
      editorData: '<p>Content of the editor</p>',
      // 编辑器配置
      editorConfig: {
        // 配置语言
        language: 'zh-cn'
        // 功能栏
        // toolbar: {
        //   items: ['Bold', 'Italic', 'Link' ...]
        // }
        // 更多的配置....
      }
    }
  },
  mounted () {
    // 初始化编辑器
    Editor.create(document.querySelector('#editor'), this.editorConfig).then(editor => {
      console.log('创建成功')
      // 记录编辑器对象
      this.editor = editor
      // 监听内容变化
      // editor.model.document.on('change:data', (e) => {
      //   // 输出当前内容
      //   console.log(editor.getData(), e)
      // })
      // 剪切板内容拦截处理
      editor.plugins.get('ClipboardPipeline').on('inputTransformation', (evt, data) => {
        const dataTransfer = data.dataTransfer
        let content = plainTextToHtml(dataTransfer.getData('text/plain'))
        data.content = this.editor.data.htmlProcessor.toView(content)
      })
      // 初始化内容
      editor.setData(this.editorData)
    }).catch(error => {
      console.log('创建失败', error)
    })
  }
}
</script>

// 导入编辑器组件（$ npm install @ckeditor/ckeditor5-vue2）
import CKEditor from '@ckeditor/ckeditor5-vue2'
Vue.use( CKEditor )

<template>
  <!-- ckeditor 父元素 -->
  <div class="editor-view">
    <!-- 编辑器 -->
    <ckeditor :editor="editor" v-model="editorData" :config="editorConfig" @ready="onReady"></ckeditor>
  </div>
</template>
<script>
// 经典编辑器（$ npm install --save @ckeditor/ckeditor5-build-classic）
import Editor from '@ckeditor/ckeditor5-build-classic'
// 中文包（语言包都在 build 版本中，注意 ckeditor5-build-xxx，xxx 需要替换为安装的编辑器包路径)
import '@ckeditor/ckeditor5-build-classic/build/translations/zh-cn'
// 安装剪切板（$ npm install @ckeditor/ckeditor5-clipboard）
import plainTextToHtml from '@ckeditor/ckeditor5-clipboard/src/utils/plaintexttohtml'
export default {
  data () {
    return {
      // 编辑器对象
      editor: Editor,
      // 编辑内容
      editorData: '<p>Content of the editor</p>',
      // 编辑器配置
      editorConfig: {
        // 配置语言
        language: 'zh-cn'
        // 功能栏
        // toolbar: {
        //   items: ['Bold', 'Italic', 'Link' ...]
        // }
        // 更多的配置....
      }
    }
  },
  methods: {
    onReady (editor) {
      editor.plugins.get('ClipboardPipeline').on('inputTransformation', (evt, data) => {
        const dataTransfer = data.dataTransfer
        let content = plainTextToHtml(dataTransfer.getData('text/plain'))
        data.content = editor.data.htmlProcessor.toView(content)
      })
    }
  }
}
</script>