electron实现编辑区域 ctrl+enter键换行

最新推荐文章于 2024-06-28 10:21:32 发布

原创最新推荐文章于 2024-06-28 10:21:32 发布 · 825 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#electron #vim #html

JS基础同时被 2 个专栏收录

5 篇文章

订阅专栏

electron

4 篇文章

订阅专栏

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

想要在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);
      }
    },