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

页面编辑器CodeMirror初始化不显示行号或文本内容

news 来源：原创 2025/8/22 5:11:49

延迟刷新

本来想延迟100毫秒的，但是会出现样式向左偏移的情况，于是试了试500毫秒，发现就没有问题了，可能是样式什么是需要一个加载过程吧。

  useEffect(() => {editorRef.current?.setValue(value || '');setTimeout(() => {editorRef.current?.refresh();}, 500);}, [value]);

另外记录一下写的编辑器组件

npm install codemirror --save

import CodeMirror, { EditorFromTextArea } from 'codemirror';
import 'codemirror/lib/codemirror.css';
import React, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';// 导入需要的语言模式和样式主题
import 'codemirror/addon/fold/foldgutter.css';
import 'codemirror/addon/hint/javascript-hint.js'; // 自动提示
import 'codemirror/mode/htmlmixed/htmlmixed';
import 'codemirror/mode/javascript/javascript';
import 'codemirror/mode/xml/xml';
import 'codemirror/theme/material.css'; // 加载的样式主题 https://codemirror.net/5/theme/// 折叠代码块
import 'codemirror/addon/fold/brace-fold.js';
import 'codemirror/addon/fold/comment-fold.js';
import 'codemirror/addon/fold/foldcode.js';
import 'codemirror/addon/fold/foldgutter.js';import 'codemirror/addon/selection/active-line.js'; // 当前行高亮import 'codemirror/addon/hint/anyword-hint.js'; // end
import 'codemirror/addon/hint/show-hint.css'; // start-ctrl+空格代码提示补全
import 'codemirror/addon/hint/show-hint.js';// 定义组件属性类型
interface CodeMirrorEditorProps {ref: any;readOnly: boolean;value: string;language: string;theme?: 'default' | 'material';height?: number;width?: number;onChange: (value: string) => void;onShiftEnter?: () => void;onBlur?: (value: string) => void;onChangeLine?: () => void;
}const CodeMirrorEditor: React.FC<CodeMirrorEditorProps> = forwardRef((props, ref) => {const { language, readOnly, value, theme, width, height } = props;const textareaRef = useRef<HTMLTextAreaElement>(null);const editorRef = useRef<EditorFromTextArea>();useImperativeHandle(ref, () => ({refresh: () => {editorRef.current?.refresh();},}));/** 失焦 */const blur = (instance: any) => {if (props.onBlur) {props.onBlur(instance.doc.getValue());}};/** 键盘按键按下 */const keydown = (_: any, change: any) => {if (change.shiftKey === true && change.keyCode === 13) {if (props.onShiftEnter) {props.onShiftEnter();}change.preventDefault();}};/** 编辑内容变化 */const codemirrorValueChange = (doc: any, change: any) => {doc.eachLine((line: any) => {if (line.text.startsWith('//') || line.text.startsWith('#')) {doc.addLineClass(line, 'wrap', 'notes');} else if (line.wrapClass === 'notes') {doc.removeLineClass(line, 'wrap', 'notes');}});if (change.origin !== 'setValue') {if (props.onChange) {props.onChange(doc.getValue());}}};const initCodeMirror = () => {const editorConfig = {readOnly: readOnly,tabSize: 4, // 制表符的宽度。默认为 4。fontSize: '16px', // 字体大小styleActiveLine: !readOnly, // 选中行高亮autoCloseBrackets: true, // 在键入时自动关闭括号和引号showCursorWhenSelecting: true, // 当选择处于活动状态时是否应绘制光标。默认为 false。这里设置成自动补全lineWrapping: true, // ，CodeMirror 是否应该滚动或换行。默认为false(滚动)。这里设置成换行lineNumbers: true, // 是否在编辑器左侧显示行号firstLineNumber: 1,fullScreen: true, //当设置为 时true，将使编辑器全屏显示（如占据整个浏览器窗口）。mode: language, // 使用模式// theme: 'default' // 编辑器样式的主题 必须确保.cm-s-[name] 加载定义相应样式的 CSS 文件。默认值为"default"，颜色包含在 中codemirror.css。可以一次使用多个主题类，例如将和类"foo bar"都分配给编辑器。cm-s-foocm-s-bartheme: theme || 'default', // 编辑器样式的主题 必须确保.cm-s-[name] 加载定义相应样式的 CSS 文件。默认值为"default"，颜色包含在 中codemirror.css。可以一次使用多个主题类，例如将和类"foo bar"都分配给编辑器。cm-s-foocm-s-barfoldGutter: true,gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],extraKeys: { Ctrl: 'autocomplete' },};editorRef.current = CodeMirror.fromTextArea(textareaRef.current!, editorConfig);// 监听编辑器内容变化事件editorRef.current.on('change', codemirrorValueChange);editorRef.current.on('keydown', keydown);editorRef.current.on('blur', blur);// const { value, width, height } = props;editorRef.current.setValue(value || '');if (width || height) {editorRef.current.setSize(width, height);}};useEffect(() => {if (textareaRef.current) {initCodeMirror();}return () => {// 清理和销毁编辑器实例editorRef.current?.toTextArea();};}, [readOnly, textareaRef, theme, width, height, language]);useEffect(() => {editorRef.current?.setValue(value || '');setTimeout(() => {editorRef.current?.refresh();}, 500);}, [value]);return <textarea ref={textareaRef} />;
});export default CodeMirrorEditor;

使用

import { CodeMirrorEditor } from '@/components';
<CodeMirrorEditorheight={550}theme={'default'}readOnly={false}value={content || ''}language="javascript"onChange={(value) => {console.log('值'，value)}}/>

页面编辑器CodeMirror初始化不显示行号或文本内容

延迟刷新本来想延迟100毫秒的，但是会出现样式向左偏移的情况，于是试了试500毫秒，发现就没有问题了，可能是样式什么是需要一个加载过程吧。 useEffect(() > {editorRef.current?.setValue(value || );setTimeout(() > {edi…...

编程日记 2025/8/22 5:11:49

顺序表——C语言实现

目录一、线性表二、顺序表 1.实现动态顺序表 SeqList.h SeqList.c Test.c 问题经验：free 出问题，2种可能性解决问题 （2）尾删 （3）头插，头删 （4）在 pos 位…...

编程日记 2025/8/19 2:05:34

OpenCV 图形API（21）逐像素操作

操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述在OpenCV的G-API模块中，逐像素操作指的是对图像中的每个像素单独进行处理的操作。这些操作可以通过G-API的计算图（Graph …...

编程日记 2025/8/18 0:33:31

车载联网终端4G汽车TBOX介绍定义与概述

汽车 TBOX（Telematics Box）是专为汽车设计的远程通信终端设备，属于车联网系统的关键组成部分。车联网系统一般包含主机、汽车 T - BOX、手机 APP 及后台系统。融合了车身网络和 4G 无线通信技术，为汽车提供丰富的 Telematics 服务…...

编程日记 2025/8/19 4:15:42

CentOS无法安装Vim文本编辑器问题以及解决方法

1.问题一：用户权限不够解决方法一：切换到root用户解决方法二：给本用户添加权限 2.问题二：镜像源问题：官方镜像源可能已经失效解决方法： 1. 检查网络连接 2. 检查和配置 DNS 3. 更换镜像源&#…...

编程日记 2025/8/20 16:20:30

Kettle如何与应用集成

Kettle（Pentaho Data Integration，PDI）可以通过多种方式与应用程序集成，以下是7种主流方法及具体实现示例： 一、命令行调用（最基础） # 执行转换（Transformation） ./pan.…...

编程日记 2025/8/21 8:59:06

Pytorch torch.nn.utils.rnn.pad_sequence 介绍

torch.nn.utils.rnn.pad_sequence 是 PyTorch 中一个用于填充序列的实用函数，它主要用于处理长度不一的序列数据，将这些序列填充到相同的长度，以便能将它们组合成一个批量（batch）输入到神经网络中。以下是详细介绍&…...

编程日记 2025/8/17 7:16:49

4.7正则表达式

1.字符匹配一般字符匹配自身. 匹配任意字符(换行符\n除外),一个点占一位\转义字符，使其后一个字符改变原来的意思(\.就是.)[......]字符集,对应的位置可以是字符集中的任意字符.字符集中的字符可以逐个列出,也可以给出范围如[abc]或[a-c] [^abc] 表示取反&#xf…...

编程日记 2025/8/22 8:00:08

CogPatInspectTool工具

CogPatInspectTool是康耐视中的一种模板比对的视觉检测工具，主要用于产品不良检测。其核心功能是通过将输入图像与预先训练好的模板进行对比，识别出两者之间的差异，并生成高亮差异图，从而判断产品是否存在缺陷。效果图 CogPatIn…...

编程日记 2025/8/17 22:11:00

秘藏 #include<bits/stdc.h> using namespace std; typedef long long ll; const int N 200010; ll a[N], b[N]; int n, k; ll dp[2][N];//dp[i][j]是在i界中取了j之前的最大值 int main(){ios::sync_with_stdio(false), cin.tie(0), cout.tie(0);cin >> n >&…...

编程日记 2025/8/21 23:13:53

【数据结构】图论存储革新：十字链表双链设计高效解决有向图入度查询难题

十字链表导读一、邻接表的优缺点二、十字链表2.1 结点结构2.2 原理解释2.2.1 顶点表2.2.2 边结点2.2.3 十字链表三、存储结构四、算法评价4.1 时间复杂度4.2 空间复杂度五、优势与劣势5.1 优势5.2 劣势5.3 特点结语导读大家好，很高兴又和大家见面啦&#xff…...

编程日记 2025/8/20 18:57:47

【JavaScript】十五、事件对象与环境对象

文章目录 1、事件对象1.1 获取事件对象1.2 常用属性1.3 案例：回车发布评论 2、环境对象this3、回调函数4、案例：tab切换5、案例：全选文本框📖 1、事件对象事件对象： 也是个对象，object，里面存…...

编程日记 2025/8/22 16:30:29

OJ--第N个泰波那契数列

1137. 第 N 个泰波那契数 - 力扣（LeetCode） 1 题干部分 2 拆解 1 状态表示：dp[i] 2 状态转移方程:dp[i]dp[i-1]dp[i-2]dp[i-3] 3 初始化:让dp[0]0,dp[1]dp[2]1 4 填表顺序:从dp[3]开始填从左往右填 5 返回值：dp[n]即为返回的…...

编程日记 2025/8/23 3:20:10

Python从入门到高手8.1节-元组类型详解

目录 8.1.1 理解元组类型 8.1.2 元组的类型名 8.1.3 元组的定义 8.1.4 元组的解包 8.1.5 元组是可迭代的 8.1.6 假期就这么结束了 8.1.1 理解元组类型元组与列表有着相同的数据结构，区别在于，元组是不可变的数据类型，而列表是可变的数…...

编程日记 2025/8/23 3:20:10

使用 Qt 和 OBS 工具检测系统硬件编码器支持情况（NVENC、QSV、AMF）

在开发涉及视频处理的软件时，判断系统是否支持硬件加速编码器（如 NVIDIA NVENC、Intel QSV、AMD AMF）对于性能优化至关重要。本文将介绍如何结合 Qt 与 OBS Studio 附带的小工具程序，实现一个完整、异步且不会卡住 UI 的硬件加速检测模块。一、背景与目标硬件加速编码器…...

编程日记 2025/8/21 5:33:20

Python爬虫生成CSV文件的完整流程

引言在当今数据驱动的时代，网络爬虫已成为获取互联网数据的重要工具。Python凭借其丰富的库生态系统和简洁的语法，成为了爬虫开发的首选语言。本文将详细介绍使用Python爬虫从网页抓取数据并生成CSV文件的完整流程，包括环境准备、网页请求、…...

编程日记 2025/8/23 3:24:26

图论：多源最短路

多源最短路 B3647 【模板】Floyd - 洛谷 #include<iostream> #include<cstring> using namespace std;const int N 110; int f[N][N]; int n, m;int main() {memset(f, 0x3f, sizeof(f));//对于重边的处理取较小值，所以要把全部都初始化成无穷大&…...

编程日记 2025/8/23 3:24:27

2024年已备案大模型发展趋势分析

2024年已备案大模型发展趋势分析随着生成式人工智能技术的快速发展，其在各个领域的应用逐渐深入。为了规范和促进生成式人工智能服务的健康发展，国家互联网信息办公室发布了《生成式人工智能服务已备案信息》。本文将基于已备案信息，分析生成式人工智能服务的发展趋势，并…...

编程日记 2025/8/22 2:05:40

spring功能汇总

1.创建一个dao接口，实现类；service接口，实现类并且service里用new创建对象方式调用dao的方法 2.使用spring分别获取dao和service对象(IOC) 注意 2中的service里面获取dao的对象方式不用new的(DI) 运行测试： 使用1的方式创建servic…...

编程日记 2025/8/18 0:20:52

Transformer - Feed Forward前馈网络

一、数学原理 1. 前馈神经网络公式 2. Dropout公式二、代码实现 import math import torchimport torch.nn as nnclass FeedForward(nn.Module):def __init__(self, d_model, dff, dropout):super().__init__()self.W1 nn.Linear(d_model, dff)self.W2 nn.Linear(dff, d_mo…...

编程日记 2025/8/22 4:03:29

Compose Multiplatform+Kotlin Multiplatfrom 第五弹跨平台截图

截图功能 Compose MultiplatformKotlin Multiplatfrom下实现桌面端的截图功能，起码搞了两星期，最后终于做出来了，操作都很流畅，截取的文件大小也正常，可参考支持讨论！ 功能效果代码实现 //在jvmMain下创…...

编程日记 2025/8/23 3:23:14

算法题（119）：高精度减法

审题： 本题高精度减法主要是要区分正负号，然后进行模拟思路： 方法一：模拟法首先本题需要我们利用字符串进行大数相减第一步：区分s1和s2谁更大先从数的位数进行判断，然后再从高到低的位数进行判断第二步…...

编程日记 2025/8/23 3:23:13

使用成员函数指针数组简化C++类中的操作

使用成员函数指针数组简化C类中的操作在C编程中，我们常常会遇到需要对一组相似的操作进行处理的情况。例如，在一个游戏引擎中，你可能希望角色能够执行一系列的动作，如行走、跳跃或攻击等。为了简化这些操作的管理和调用&#xf…...

编程日记 2025/8/22 15:23:03

WebGL数学手记:矩阵基础

一、矩阵的定义矩阵，数学术语。在数学中，矩阵（Matrix）是一个按照长方阵列排列的复数或实数集合。 1.英文发音（Matrix） Matrix的发音类似于中文的[美吹克斯]，知道它的发音。方便后期看教程时…...

编程日记 2025/8/23 3:23:42

Python爬取数据（二）

一.example2包下的 1.re模块的compile函数使用 import repatternre.compile(r\d) print(pattern) 2.match的方法使用 import re patternre.compile(r\d) # m1pattern.match(one123twothree345four) #参数2：指定起始位置(包含),参数3：终止位置(包含),…...

编程日记 2025/8/21 17:52:25

我的NISP二级之路-01

目录一.SSE-CMM系统安全工程-能力成熟度模型（Systems Security Engineering - Capability Maturity Model）二.ISMS 即信息安全管理体系（Information Security Management System），是一种基于风险管理的、系统化的管理体系三.Kerberos协议 1. 用户登录与 AS 请求 2…...

编程日记 2025/8/17 23:39:45

自制简易 Shell：像搭建积木小屋一样打造命令交互小天地

目录准备工作：搭建小屋的材料打造小屋的 “身份牌” 接收指令：小屋的 “对讲机” 拆解指令：把大任务拆成小积木执行指令：小屋的 “行动队” 特殊指令：小屋的 “特色功能” 小屋的日常运转完整代码啥是 …...

编程日记 2025/8/17 20:34:23

WEB安全--内网渗透--利用Net-NTLMv2 Hash

一、前言在前两篇文章中分析了NTLM协议中Net-NTLMv2 Hash的生成、如何捕获Net-NTLMv2 Hash，现在就来探讨一下在内网环境中，如何利用Net-NTLMv2 Hash进行渗透。二、Net-NTLM Hash的破解工具：hashcat 原理：利用其内部的字典对…...

编程日记 2025/8/20 12:15:22

MySQL 数据库操作指南：从数据库创建到数据操作

关键词：MySQL；数据库操作；DDL；DML 一、引言 MySQL 作为广泛应用的关系型数据库管理系统，对于开发人员和数据库管理员而言，熟练掌握其操作至关重要。本文章通过一系列 SQL 示例，详细阐述 MySQL…...

编程日记 2025/8/20 20:25:42

从传递函数到PID控制器

在过程控制中，按偏差的比例（P，Proportional）、积分（I，Integral）和微分（D，Differential）进行控制的PID控制器（亦称PID调节器）是应用最为…...

编程日记 2025/8/17 23:55:51

抓wifi无线空口包之Ubuntu抓包（二）

一、设置网卡信道和频段，并抓包 1、使用iwconfig查看自己机器的无线网卡名称 wangwang-ThinkCentre-M930t-N000:~$ iwconfig lo no wireless extensions. eno1 no wireless extensions. enxc8a3624ab329 no wireless extensions. wlx90de80d1b5b1 IE…...

编程日记 2025/8/20 10:19:21

使用protobuf编译提示无法打开包括文件: ‘absl/log/absl_log.h’: No such file or directory

问题原因 Protobuf 依赖 Abseil： Protobuf 3.20 版本开始依赖 Abseil，但你的系统未正确安装或配置 Abseil。头文件路径未包含： 编译器找不到 absl/log/absl_log.h，可能是因为 Abseil 未正确安装或未在项目中设置包含路径。 …...

编程日记 2025/8/21 5:33:08

深入浅出Java 锁 | 源码剖析 | 万字解析

目录硬件内存结构&Java内存模型硬件内存结构 Java内存模型（JMM） JMM中三大特性：原子性、有序性、可见性 Java中有哪些锁？ Java中锁可以分成悲观锁和乐观锁的实现。乐观锁和悲观锁的区别，乐观锁一定好嘛&…...

编程日记 2025/8/17 23:32:07

java流程控制12：流程控制练习

流程控制练习打印三角型 package com.zheng.struct;public class TestDemo {public static void main(String[] args) {//打印三角形 5行for(int i1;i<5;i){for(int j5;j>i;j--){System.out.print(" ");}for(int j1;j<i;j){System.out.print("*&quo…...

编程日记 2025/8/17 10:11:14

JAVA：ByteBuddy 动态字节码操作库的技术指南

1、简述 ByteBuddy 是一个功能强大的 Java 字节码操作库，可以帮助开发者在运行时动态生成和修改类，而无需直接接触复杂的 ASM API。它被广泛应用于框架开发、AOP（面向切面编程）、代理类生成、性能监控等领域。 2、ByteBuddy 的优…...

编程日记 2025/8/22 7:17:50

C语言学习记录（13）自定义类型：结构体

一、结构体变量的声明、创建和初始化 1.结构体变量的声明结构体变量我们学操作符的时候就顺带讲了一点了，因为当时讲了结构体成员变量访问操作符.。结构体变量不像int、float这种内置类型的，一旦创建，系统就知道这是干啥的，结…...

编程日记 2025/8/19 23:10:04

rtthread 软件SPI驱动, 支持mode0~3,MSB,LSB

rtthread的软件模拟SPI用的上层PIN驱动写，由于经过层层封装，时钟频率并不会太高，200MHz的MCU跑不到1MHz的时钟频率。所以最好是在底层就模拟好，给上层用。头文件 struct io_poSOFT {gpio_type *port;uint16_t pin; }; typedef …...

编程日记 2025/8/17 23:01:38

C++自学笔记——动态创建对象

动态创建对象 1. 什么是动态创建对象？ 在学习之前的知识点时，我们知道有静态存储期和自动存储期。静态存储期的对象在程序的整个生命周期内都存在，全局变量和static修饰的局部变量都属于这一类。自动存储期的对象，这些对象在函…...

编程日记 2025/8/21 16:13:05

35.[前端开发-JavaScript基础]Day12-for循环中变量-华为商城-商品列表-轮播图

for循环中监听函数中打印变量 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"wi…...

编程日记 2025/8/20 5:13:45

详细描述以太坊的gas、gaslimit、gasPrice

目录一、Gas 是什么？ ✅ 简要定义： 🧠 举例理解：二、Gas Limit 是什么？ ✅ 简要定义：分两种：举例说明：三、Gas Price 是什么？ ✅ 简要定义：为什么它重要？示例：四、 EIP-1559 后的新机制（伦敦升级）三个要素：五、额外技巧（开发实用）本文…...

编程日记 2025/8/20 21:19:06

【Java】Maven

一、概念是一个项目管理和构建工具，它基于项目对象模型（POM）的概念，通过一小段描述信息来管理项目的构建。二、Maven坐标 <groupId>com.itheima</groupId><artifactId>maven-project01</artifactId>&…...

编程日记 2025/8/20 1:53:08

PageCache

目录一、PageCache的具体过程二、具体实现代码一、PageCache的具体过程页缓存主要解决的是内存外碎片问题，并且直接和系统调用打交道。申请过程如下： 当中心缓存中没有内存时,会去页缓存申请一个span结构,要经过下面几步: （1&#xf…...

编程日记 2025/8/17 22:09:56

Vue3实战五、面包屑，收缩菜单，高亮暗黑主题切换,全屏功能实现

目录面包屑，收缩菜单，黑夜白夜样式,全屏功能实现收缩菜单按钮结合pinia功能实现第一步、定义布局配置的数据类型第二步、创建布局状态管理文件第三步、使用布局配置状态第四步、进行展开/收起左侧菜单逻辑第五步、动态切换左侧菜单宽度样式第六步、动态…...

编程日记 2025/8/21 5:33:30

Linux内核设计——（二）进程调度

目录一、进程调度简介二、多任务三、调度器 3.1 I/O消耗型和处理器消耗型进程 3.2 进程优先级 3.3 CFS算法 3.4 实时调度策略 3.5 SCHED_FIFO 3.6 SCHED_RR 3.7 调度器入口四、上下文切换 4.1 睡眠和唤醒 4.2 need_resched标志 4.3 用户抢占 4.4 内核抢占一…...

编程日记 2025/8/22 10:52:42

【C++初阶】--- string类模拟实现

1.基础函数 1.1成员函数成员函数主要是_str、_size、_capacity这三个。npos是size_t 的最大值,用于当作后续成员函数的参数的缺省值。 class string { private:char* _str nullptr;//指向字符串的指针size_t _size 0;//字符串长度size_t _capacity 0;//空间大小static c…...

编程日记 2025/8/19 17:32:41

Pythia 使用说明

Pythia 是一个由非营利研究组织 EleutherAI 开发的开源语言模型套件，专注于透明性和可复现性。它是为了推动自然语言处理（NLP）领域的开放研究而设计，尤其在模型训练过程和性能分析方面提供了详尽的文档和数据。 Pythia 的核心特点…...

编程日记 2025/8/18 0:19:09

python：获取某路径下所有图片的名称

可以使用 Python 的 os 模块或者 pathlib 模块来获取指定路径下所有图片的名称。以下是使用这两种方法实现的代码示例： 使用 os 模块 import osdef get_image_names_os(path):image_extensions (.jpg, .jpeg, .png, .gif, .bmp)image_names []for root, dirs, f…...

编程日记 2025/8/20 15:27:31