如何为mavon-editor添加keydown或keyup事件监听器

问题原因 #

mavon-editor组件内部的编辑区域是独立的DOM元素（textarea或CodeMirror实例），直接在组件标签上绑定@keydown无法触发，因为事件没有传递到组件根节点，且组件未暴露该事件钩子。

解决方案 #

方法1：监听内部textarea的keydown事件 #

通过组件的ref获取内部的textarea元素，手动绑定事件监听：

<template>
  <el-popover v-model="showMavonSuggestionList" popper-class="suggestions-popover" ref="suggestionPopover" placement="top-start" width="200" trigger="manual">
    <mavon-editor
      ref="mavonInput"
      slot="reference"
      :toolbars="markdownOption"
      v-model="template.entryContent.text"
      @input="handleMavonEditorInput"
    />
    <ul v-if="mavonSuggestionList.length > 0">
      <li v-for="(suggestion,index) in mavonSuggestionList"
        :key="index" :value="suggestion.key"
        @click="selectMavonSuggestion(suggestion)"
        :class="{'selected' : index === mavonSelectedIndex}"
      >
        {{ suggestion.key }}
      </li>
    </ul>
  </el-popover>
</template>

<script>
export default {
  data() {
    return {
      showMavonSuggestionList: false,
      mavonSuggestionList: [],
      mavonSelectedIndex: -1,
      template: { entryContent: { text: '' } },
      markdownOption: {},
      editorTextarea: null
    }
  },
  mounted() {
    const textarea = this.$refs.mavonInput.$el.querySelector('textarea');
    if (textarea) {
      textarea.addEventListener('keydown', this.handleMavonKeyDown);
      this.editorTextarea = textarea;
    }
  },
  beforeDestroy() {
    if (this.editorTextarea) {
      this.editorTextarea.removeEventListener('keydown', this.handleMavonKeyDown);
    }
  },
  methods: {
    handleMavonKeyDown(event) {
      console.log(event);
      if (this.showMavonSuggestionList) {
        if (event.key === 'ArrowUp') {
          event.preventDefault();
          this.mavonSelectedIndex =
            (this.mavonSelectedIndex - 1 + this.mavonSuggestionList.length) % this.mavonSuggestionList.length;
        } else if (event.key === 'ArrowDown') {
          event.preventDefault();
          this.mavonSelectedIndex = (this.mavonSelectedIndex + 1) % this.mavonSuggestionList.length;
        } else if (event.key === 'Enter') {
          if (this.mavonSelectedIndex >= 0) {
            this.selectMavonSuggestion(this.mavonSuggestionList[this.mavonSelectedIndex]);
          }
        }
      }
    },
    handleMavonEditorInput() {
      // 原有输入逻辑
    },
    selectMavonSuggestion(suggestion) {
      // 原有选择逻辑
    }
  }
}
</script>

方法2：适配CodeMirror模式（若启用） #

如果你的mavon-editor配置了使用CodeMirror作为编辑引擎，需要获取CodeMirror实例来监听事件：

mounted() {
  const mavonInstance = this.$refs.mavonInput;
  if (mavonInstance.codemirror) {
    mavonInstance.codemirror.on('keydown', this.handleMavonKeyDown);
    this.codemirrorInstance = mavonInstance.codemirror;
  } else {
    const textarea = mavonInstance.$el.querySelector('textarea');
    if (textarea) {
      textarea.addEventListener('keydown', this.handleMavonKeyDown);
      this.editorTextarea = textarea;
    }
  }
},
beforeDestroy() {
  if (this.codemirrorInstance) {
    this.codemirrorInstance.off('keydown', this.handleMavonKeyDown);
  } else if (this.editorTextarea) {
    this.editorTextarea.removeEventListener('keydown', this.handleMavonKeyDown);
  }
},
data() {
  return {
    // ...原有数据
    codemirrorInstance: null,
    editorTextarea: null
  }
}

注意事项 #

• 必须在mounted钩子中执行事件绑定，确保组件DOM已渲染完成
• 务必在beforeDestroy中移除事件监听，避免内存泄漏
• 根据你的mavon-editor配置（是否启用CodeMirror）选择对应监听方式

内容的提问来源于stack exchange，提问作者Z.H.Chen