Vue组件中CKEditor 5如何区分用户手动与代码触发的输入事件？

你可以通过两种实用方法区分用户手动操作和代码端修改触发的内容变更：

方法一：用标记变量过滤编程式修改 #

在组件里定义一个标记变量，代码修改内容时临时标记，回调里跳过这类变更：

<template>
  <ckeditor :editor="editor" @input="onEditorInput" v-model="editorData"></ckeditor>
</template>

<script>
// 假设已导入CKEditor编辑器类，比如ClassicEditor
import ClassicEditor from '@ckeditor/ckeditor5-build-classic'

export default {
  data() {
    return {
      editor: ClassicEditor,
      editorData: '',
      // 标记是否是代码触发的修改
      isProgrammaticUpdate: false
    }
  },
  methods: {
    onEditorInput() {
      // 仅处理非代码触发的变更
      if (!this.isProgrammaticUpdate) {
        console.log('用户手动修改了内容')
        // 这里写你的业务逻辑
      }
    },
    // 代码修改内容的方法
    updateContent(newText) {
      this.isProgrammaticUpdate = true
      this.editorData = newText
      // 异步恢复标记，避免影响后续用户操作
      this.$nextTick(() => {
        this.isProgrammaticUpdate = false
      })
    }
  }
}
</script>

方法二：监听CKEditor原生事件并判断焦点状态 #

利用CKEditor的原生change:data事件，结合编辑器焦点状态判断是否为用户操作：

<template>
  <ckeditor :editor="editor" @ready="onEditorReady" v-model="editorData"></ckeditor>
</template>

<script>
import ClassicEditor from '@ckeditor/ckeditor5-build-classic'

export default {
  data() {
    return {
      editor: ClassicEditor,
      editorData: ''
    }
  },
  methods: {
    onEditorReady(editor) {
      // 监听数据变更的原生事件
      editor.model.document.on('change:data', () => {
        // 用户操作时编辑器处于聚焦状态，代码修改时一般不会聚焦
        if (editor.editing.view.document.isFocused) {
          console.log('用户手动修改了内容')
          // 执行你的业务逻辑
        }
      })
    },
    // 代码修改内容的方法
    updateContent(newText) {
      this.editorData = newText
    }
  }
}
</script>

两种方法对比 #

• 方法一：兼容性更强，不管编辑器是否聚焦，都能准确过滤代码端修改，适合需要频繁编程式更新内容的场景。
• 方法二：更贴近CKEditor原生机制，无需维护额外标记变量，适合大部分常规场景。

内容的提问来源于stack exchange，提问作者Anonymous Creator