当前位置: 首页 > news >正文

使用 CodeMirror 6 实现插入文本及替换选中文本功能

本文将通过具体的代码示例,详细解释如何在 Vue3 中使用 CodeMirror 6 实现文本插入功能,包括在光标位置插入文本和选中文本插入文本的代码示例,以及这两种插入方式的区别。

1. 只能在光标位置插入文本

1.1 代码示例

const insertTemplate = (template) => {try {if (!editorView.value) return;const state = editorView.value.state;const selection = state.selection.main;const currentPos = selection.head;const anchor = currentPos + template.length;const head = selection.main.head;console.log('当前光标位置:', currentPos);editorView.value.dispatch({changes: {from: currentPos,to: currentPos,insert: template},selection: EditorSelection.range(anchor, head),scrollIntoView: true});editorView.value.focus();} catch (e) {console.error('插入失败:', e);}
};

1.2 详细解释

  1. 获取编辑器状态和选择范围

    const state = editorView.value.state;
    const selection = state.selection.main;
    const currentPos = selection.head;
    • state:获取当前编辑器的状态。

    • selection:获取当前选择范围。

    • currentPos:获取当前光标位置。

  2. 计算新光标位置

    const anchor = currentPos + template.length;
    const head = selection.main.head;
    • anchor:新光标位置的起始点。

    • head:新光标位置的结束点。

  3. 执行插入操作

editorView.value.dispatch({changes: {from: currentPos,to: currentPos,insert: template},selection: EditorSelection.range(anchor, head),scrollIntoView: true
});
  • changes:定义插入操作的范围和内容,from和to要特别注意,要不报错。

  • selection:设置新的选择范围。

  • scrollIntoView:确保插入位置滚动到可见区域。

遇见这样的错误,很大概率是from和to搞错了。

更新编辑器

editorView.value.focus();

2. 可以根据用户是否选中文本,在选中文本位置替换插入文本

2.1 代码示例

const insertTemplate = (template) => {try {if (!editorView.value) return;const state = editorView.value.state;const selection = state.selection.main;if (selection.empty) {const from = selection.main.from;const to = selection.main.to;editorView.value.dispatch({changes: {from: from,to: to,insert: template},selection: EditorSelection.range(from + template.length, selection.main.from)});} else {const posFrom = selection.main.from;const anchor = posFrom + template.length;editorView.value.dispatch({changes: {from: posFrom,to: posFrom,insert: template},selection: EditorSelection.range(anchor, selection.main.from)});}editorView.value.focus();} catch (e) {console.error('插入失败:', e);}
};

2.2 详细解释

  1. 判断是否选中文本

    if (selection.empty) {// 选中文本为空
    } else {// 选中文本不为空
    }

selection.empty:查询codemirror6的文档,可以知道该属性可以用来判断from和to是否相同,进而判断当前选择范围是否为空。

  • 处理选中文本为空的情况

    const from = selection.main.from;
    const to = selection.main.to;editorView.value.dispatch({changes: {from: from,to: to,insert: template},selection: EditorSelection.range(from + template.length, selection.main.from)
    });
    • fromto:获取当前选择范围的起始和结束位置,此时from和to不同。

    • changes:定义插入操作的范围和内容。

    • selection:设置新的选择范围。

  • 处理选中文本不为空的情况

    const posFrom = selection.main.from;
    const anchor = posFrom + template.length;editorView.value.dispatch({changes: {from: posFrom,to: posFrom,insert: template},selection: EditorSelection.range(anchor, selection.main.from)
    });
    • posFrom:获取当前选择范围的起始位置,from和to相同。

    • anchor:计算新光标位置的起始点。

    • changes:定义插入操作的范围和内容。

    • selection:设置新的选择范围。

3. 两种插入方式的区别

3.1 在光标位置插入文本

  • 适用场景:用户希望在当前光标位置插入文本,而不影响其他内容。

  • 实现方式:在当前光标位置插入文本,并更新光标位置。

3.2 在选中文本位置插入文本

  • 适用场景:用户希望在选中的文本范围内插入文本,可能替换选中的文本。

  • 实现方式:在选中的文本范围内插入文本,并更新选择范围。

4. 常见问题及解决方案

4.1 插入失败:RangeError: Invalid change range

问题描述:在插入文本时,可能会遇到 RangeError: Invalid change range 错误。

解决方案

  • 确保 fromto 的值正确,且 from 小于等于 to

  • 确保插入的文本范围在文档范围内。

4.2 光标位置不正确

问题描述:编辑器组件的值来自父组件的传值,在初始化父组件传值之后,每次插入文本都会在刚开始的第一行插入,无论怎么选中光标也不行,后来感觉光标位置可能不正确。原因就是在父组件传值之后,光标位置并没有更新,所以每次插入还是从0开始。

解决方案

确保在父组件传值之后,在 EditorView.value.dispatch 方法中正确设置 selection,设置正确的光标位置

4.3 如何监听光标位置,判断是否是光标位置错误的问题

问题描述:如何监听光标位置,并在控制台输出,以此判断是否是光标位置错误的问题

解决方案

state的插件中使用一个函数输出光标起始位置。

4.4 怎么判断自己写的事务是不是有效的

问题描述:在代码调试时,我一度怀疑是自己的事务使用错了,导致无法成功。

解决方案

可以简单使用下面的函数判断一下事务是不是有效的。

5. 总结

通过以上代码示例和详细解释,我们可以在 Vue3 中成功使用 CodeMirror 6 实现文本插入功能。希望本文能够帮助大家更好地理解和使用 CodeMirror 6,有什么问题欢迎大家在评论区一起交流。

相关文章:

使用 CodeMirror 6 实现插入文本及替换选中文本功能

本文将通过具体的代码示例,详细解释如何在 Vue3 中使用 CodeMirror 6 实现文本插入功能,包括在光标位置插入文本和选中文本插入文本的代码示例,以及这两种插入方式的区别。 1. 只能在光标位置插入文本 1.1 代码示例 const insertTemplate …...

Huatuo热更新--如何使用

在安装完huatuo热更新插件后就要开始学习如何使用了。 1.创建主框渐Main 新建文件夹Main(可自定义),然后按下图创建文件,注意名称与文件夹名称保持一致 然后新建场景(Init场景),添加3个空物体…...

Flask实现高效日志记录模块

目录 一. 简介: 1. 为什么需要请求日志 二. 日志模块组成 1. 对应日志表创建(包含日志记录的关键字段) 2. 编写日志记录静态方法 3. 在Flask中捕获请求日志 4. 捕获异常并记录错误日志 5. 编写日志接口数据展示 6. 写入数据展…...

scroll、offset、client三大家族和getBoundingClientRect方法

scroll、offset、client三大家族和getBoundingClientRect方法 1.offset(只能读,不能修改)2.client(只能读,不能修改)3.scroll滚动家族4.getBoundingClientRect方法 1.offset(只能读,不能修改) offsetParent:离当前元素最近的有定位的祖先元素…...

JWT 令牌

目录 一、JWT 1、什么是JWT 2、JWT的组成 3、JJWT签发与验证token 1、创建token 2、解析token 3、设置过期时间 4、自定义claims 前言: 在现代Web应用和微服务架构中,用户身份验证和信息安全传输是核心问题。JSON Web Token(J…...

Python基于Flask的豆瓣Top250电影数据可视化分析与评分预测系统(附源码,技术说明)

博主介绍:✌IT徐师兄、7年大厂程序员经历。全网粉丝15W、csdn博客专家、掘金/华为云//InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专栏推荐订阅👇&#x1f3…...

JavaScript数组-遍历数组

在JavaScript中,数组是一种非常常用的数据结构,用于存储一系列有序的数据项。无论是处理简单的列表还是复杂的数据集合,遍历数组都是我们经常需要执行的操作之一。本文将详细介绍几种常见的遍历数组的方法,并讨论它们各自的优缺点…...

基于Flask的第七次人口普查数据分析系统的设计与实现

【Flask】基于Flask的第七次人口普查数据分析系统的设计与实现(完整系统源码开发笔记详细部署教程)✅ 目录 一、项目简介二、项目界面展示三、项目视频展示 一、项目简介 基于Flask的人口普查可视化分析系统 二、项目界面展示 登录/注册 首页/详情 …...

解决DeepSeek服务器繁忙的有效方法

全球42%的企业遭遇过AI工具服务器过载导致内容生产中断(数据来源:Gartner 2025)。当竞品在凌晨3点自动发布「智能家居安装指南」时,你的团队可能正因DeepSeek服务器繁忙错失「净水器保养教程」的流量黄金期⏳。147SEO智能调度系统…...

分词器(Tokenizer) | 有了分词器,为什么还需要嵌入模型

文章目录 什么是tokenizer有了分词器,为什么还需要嵌入模型分词器为什么在transformers 里Hugging Face的Tokenizer大模型不同tokenizer训练效果对比分词器库选择当前顶尖大模型所采用的 Tokenizer 方法与词典大小 参考 什么是tokenizer Tokenizers huggingface官方…...

VisionTransformer(ViT)与CNN卷积神经网络的对比

《------往期经典推荐------》 一、AI应用软件开发实战专栏【链接】 项目名称项目名称1.【人脸识别与管理系统开发】2.【车牌识别与自动收费管理系统开发】3.【手势识别系统开发】4.【人脸面部活体检测系统开发】5.【图片风格快速迁移软件开发】6.【人脸表表情识别系统】7.【…...

计算机视觉+Numpy和OpenCV入门

Day 1:Python基础Numpy和OpenCV入门 Python基础 变量与数据类型、函数与类的定义、列表与字典操作文件读写操作(读写图像和数据文件) 练习任务:写一个Python脚本,读取一个图像并保存灰度图像。 import cv2 img cv2.im…...

Vue 3 工程化打包工具:从理论到实践 (下篇)

引言 在前端开发中,打包工具是工程化的重要组成部分。Vue 3 作为当前流行的前端框架,其工程化离不开高效的打包工具。打包工具不仅能够将代码、样式、图片等资源进行优化和压缩,还能通过模块化、代码分割等功能提升应用的性能。本文将深入探…...

java经验快速学习python!

title: java经验快速学习python! date: 2025-02-19 01:52:05 tags: python学习路线 java经验快速学习python! 本篇文档会一直更新!!!变量、分支结构、循环结构、数据结构【列表、元组、集合字典】python常用内置函数元…...

爬虫破解网页禁止F12

右击页面显示如下 先点击f12再输入网址,回车后没有加载任何数据 目前的一种解决方法: 先 AltD ,再 CtrlShifti...

从零开始构建一个语言模型中vocab_size(词汇表大小)的设定规则

从零开始构建一个语言模型就要设计一个模型框架,其中要配置很多参数。在自然语言处理任务中,vocab_size(词汇表大小) 的设定是模型设计的关键参数之一,它直接影响模型的输入输出结构、计算效率和内存消耗。 本文是在我前文的基础上讲解的:从零开始构建一个小型字符级语言…...

Jenkins插件管理切换国内源地址

安装Jenkins 插件时,由于访问不了国外的插件地址,会导致基本插件都安装失败。 不用着急,等全部安装失败后,进入系统,修改插件源地址,重启后在安装所需插件。 替换国内插件更新地址 选择:系统…...

Q - learning 算法是什么

Q - learning 算法是什么 Q - learning 算法是一种经典的无模型强化学习算法,由克里斯沃特金斯(Chris Watkins)在 1989 年提出。它被广泛应用于解决各种决策问题,尤其适用于智能体在环境中通过与环境交互来学习最优策略的场景。下面从基本概念、核心公式、算法流程和特点几…...

nasm - console 32bits

文章目录 nasm - console 32bits概述笔记my_build.batnasm_main.asm用VS2019写个程序,按照win32方式编译,比较一下。备注END nasm - console 32bits 概述 看到一个nasm的例子(用nasm实现一个32bits控制台的程序架子) 学习一下 笔记 my_build.bat ec…...

11.编写前端内容|vscode链接Linux|html|css|js(C++)

vscode链接服务器 安装VScode插件 Chinese (Simplified) (简体中⽂) Language Pack for Visual Studio CodeOpen in BrowserRemote SSH 在命令行输入 remote-ssh接着输入 打开配置文件,已经配置好主机 点击远程资源管理器可以找到 右键链接 输入密码 …...

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案&#xff1a; 语义化标签&#xff1a; <header>&#xff1a;页头<nav>&#xff1a;导航<main>&#xff1a;主要内容<article>&#x…...

R语言AI模型部署方案:精准离线运行详解

R语言AI模型部署方案:精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案,实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点: 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

Redis相关知识总结(缓存雪崩,缓存穿透,缓存击穿,Redis实现分布式锁,如何保持数据库和缓存一致)

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

图表类系列各种样式PPT模版分享

图标图表系列PPT模版&#xff0c;柱状图PPT模版&#xff0c;线状图PPT模版&#xff0c;折线图PPT模版&#xff0c;饼状图PPT模版&#xff0c;雷达图PPT模版&#xff0c;树状图PPT模版 图表类系列各种样式PPT模版分享&#xff1a;图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

Swagger和OpenApi的前世今生

Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章&#xff0c;二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑&#xff1a; &#x1f504; 一、起源与初创期&#xff1a;Swagger的诞生&#xff08;2010-2014&#xff09; 核心…...

Golang——6、指针和结构体

指针和结构体 1、指针1.1、指针地址和指针类型1.2、指针取值1.3、new和make 2、结构体2.1、type关键字的使用2.2、结构体的定义和初始化2.3、结构体方法和接收者2.4、给任意类型添加方法2.5、结构体的匿名字段2.6、嵌套结构体2.7、嵌套匿名结构体2.8、结构体的继承 3、结构体与…...

从 GreenPlum 到镜舟数据库:杭银消费金融湖仓一体转型实践

作者&#xff1a;吴岐诗&#xff0c;杭银消费金融大数据应用开发工程师 本文整理自杭银消费金融大数据应用开发工程师在StarRocks Summit Asia 2024的分享 引言&#xff1a;融合数据湖与数仓的创新之路 在数字金融时代&#xff0c;数据已成为金融机构的核心竞争力。杭银消费金…...

ZYNQ学习记录FPGA(一)ZYNQ简介

一、知识准备 1.一些术语,缩写和概念&#xff1a; 1&#xff09;ZYNQ全称&#xff1a;ZYNQ7000 All Pgrammable SoC 2&#xff09;SoC:system on chips(片上系统)&#xff0c;对比集成电路的SoB&#xff08;system on board&#xff09; 3&#xff09;ARM&#xff1a;处理器…...

无需布线的革命:电力载波技术赋能楼宇自控系统-亚川科技

无需布线的革命&#xff1a;电力载波技术赋能楼宇自控系统 在楼宇自动化领域&#xff0c;传统控制系统依赖复杂的专用通信线路&#xff0c;不仅施工成本高昂&#xff0c;后期维护和扩展也极为不便。电力载波技术&#xff08;PLC&#xff09;的突破性应用&#xff0c;彻底改变了…...

接口 RESTful 中的超媒体:REST 架构的灵魂驱动

在 RESTful 架构中&#xff0c;** 超媒体&#xff08;Hypermedia&#xff09;** 是一个核心概念&#xff0c;它体现了 REST 的 “表述性状态转移&#xff08;Representational State Transfer&#xff09;” 的本质&#xff0c;也是区分 “真 RESTful API” 与 “伪 RESTful AP…...