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>
  

三、方式一：通过 @ckeditor/ckeditor5-vue2 组件使用

• main.js

  // 导入编辑器组件（$ 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>
  

四、细节

• 如果报错 CKEditorError: plugincollection-plugin-not-loaded 或者 CKEditorError: ckeditor-duplicated-modules，可以点击查看官方解决方案。