electron实现编辑区域 ctrl+enter键换行_electron 换行-优快云博客

本文链接：https://blog.youkuaiyun.com/Alive_tree/article/details/120418411

本文介绍如何在内容编辑面板中使用Vue.js实现当用户按下Ctrl+Enter键时进行换行的功能。通过监听键盘事件并自定义lineFeed函数来更新编辑区域的内容，并保持光标位置不变。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

想要在enter 发送内容的情况下，客户按ctrl+enter实现换行

		<div
          class="edit-panel"
          contenteditable="true"
          @keyup.ctrl.enter="lineFeed"
          ref="editor"
        ></div>

对应的lineFeed()函数

lineFeed(){
      if(this.sendHotKey === "Enter"){
        var el = this.$refs.editor;
         var range = document.createRange();
        //返回用户当前的选区
        var sel =  document.getSelection();
        //获取当前光标位置
        var offset = sel.focusOffset;
        // 正常文本补充换行
        if (!this.$refs.editor.innerHTML.endsWith('\n')) {
          this.$refs.editor.innerHTML  += '\r\n';
        }
        // 新增一个换行
        this.$refs.editor.innerHTML  += '\r\n';
        // 重置光标到结尾
        range.setStart(el.childNodes[0], offset+1);
        //使得选区(光标)开始与结束位置重叠
        range.collapse(true);
        //移除现有其他的选区
        sel.removeAllRanges();
        //加入光标的选区
        sel.addRange(range);
      }
    },

方法二

lineFeed(){
      if(this.sendHotKey === "Enter"){
        var el = this.$refs.editor;
         var range = document.createRange();
        //返回用户当前的选区
        var sel =  document.getSelection();
        //获取当前光标位置
        var offset = sel.focusOffset;
        // 正常文本补充换行
        if (!this.$refs.editor.innerHTML.endsWith('\n')) {
          this.$refs.editor.innerHTML  += '\r\n';
        }
        // 新增一个换行
        this.$refs.editor.innerHTML  += '\r\n';
        // 重置光标到结尾
        range.setStart(el.childNodes[0], offset+1);
        //使得选区(光标)开始与结束位置重叠
        range.collapse(true);
        //移除现有其他的选区
        sel.removeAllRanges();
        //加入光标的选区
        sel.addRange(range);
      }
    },