vue可输入div contenteditable,ctrl+enter换行,enter不换行

可以通过监听input事件和keydown事件来实现。

1. 监听input事件，将输入的内容同步到data中的content属性中。

<template>
  <div contenteditable @input="handleInput" v-model="content"></div>
</template>

<script>
export default {
  data() {
    return {
      content: ''
    }
  },

  methods: {
    handleInput(event) {
      this.content = event.target.innerHTML
    }
  }
}
</script>

2. 监听keydown事件，判断按下的键是否为Enter和Ctrl，如果是，就在内容后面添加<br>元素，否则继续输入。

<template>
  <div contenteditable @input="handleInput" @keydown="handleKeyDown" v-model="content"></div>
</template>

<script>
export default {
  data() {
    return {
      content: ''
    }
  },

  methods: {
    handleInput(event) {
      this.content = event.target.innerHTML
    },

    handleKeyDown(event) {
      // 判断按下的键是否为Enter和Ctrl
      if (event.keyCode === 13 && event.ctrlKey) {
        event.preventDefault()
        this.content += '<br>'
      }
    }
  }
}
</script>

这样就可以实现可输入div，Ctrl+Enter换行，Enter不换行的效果了。