頁面編輯器CodeMirror初始化不顯示行號或文本內容

?延遲刷新

本來想延遲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)}}/>

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/diannao/77492.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/77492.shtml
英文地址,請注明出處:http://en.pswp.cn/diannao/77492.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

使用 Spring Boot 和 Uniapp 搭建 NFC 讀取系統

目錄 一、NFC 技術原理大揭秘1.1 NFC 簡介1.2 NFC 工作原理1.3 NFC 應用場景 二、Spring Boot 開發環境搭建2.1 創建 Spring Boot 項目2.2 項目基本配置 三、Spring Boot 讀取 NFC 數據3.1 NFC 設備連接與初始化3.2 數據讀取邏輯實現3.3 數據處理與存儲 四、Uniapp 前端界面開發…

臺式電腦插入耳機沒有聲音或麥克風不管用

目錄 一、如何確定插孔對應功能1.常見音頻插孔顏色及功能2.如何確認電腦插孔?3.常見問題二、 解決方案1. 檢查耳機連接和設備選擇2. 檢查音量設置和靜音狀態3. 更新或重新安裝聲卡驅動4. 檢查默認音頻格式5. 禁用音頻增強功能6. 排查硬件問題7. 檢查系統服務8. BIOS設置(可選…

Gerrit的安裝與使用說明(Ubuntu)

#本頁面按192.168.60.148服務器舉例進行安裝配置 1.權限配置 ## 使用root或者有sudo權限用戶執行 # 創建gerrit用戶 sudo useradd gerrit # 設置gerrit用戶的密碼 sudo passwd gerrit # 增加sudo權限 sudo visudo 在root ALL(ALL:ALL) ALL行下添加如下內容 gerrit ALL(ALL:…

Visual Studio 2019 配置VTK9.3.1

文章目錄 參考博客1、 VTK下載和編譯2、vs2019配置vtk9.3.1參考博客 Visual Studio 2022 配置VTK9.3.0 1、 VTK下載和編譯 見博客 CMake編譯VTK 2、vs2019配置vtk9.3.1 新建一個項目 寫入以下代碼 #include <vtkActor.h> #include <vtkAssembly.h> #include…

C++進階——C++11_右值引用和移動語義_可變參數模板_類的新功能

目錄 1、右值引用和移動語義 1.1 左值和右值 1.2 左值引用和右值引用 1.3 引用延長生命周期 1.4 左值和右值的參數匹配 1.5 右值引用和移動語義的使用場景 1.5.1 左值引用主要使用場景 1.5.2 移動構造和移動賦值 1.5.3 右值引用和移動語義解決傳值返回問題 1.5.4 右值…

HTTP協議原理深度解析:從基礎到實踐

引言 在互聯網技術體系中,HTTP(HyperText Transfer Protocol)協議如同數字世界的"通用語言",支撐著全球超50億網民的日常網絡交互。作為爬蟲開發、Web應用構建的核心技術基礎,理解HTTP原理是每個開發者必須掌握的技能。本文將從協議本質、技術演進、安全機制三…

Web品質 - 重要的HTML元素

Web品質 - 重要的HTML元素 在構建一個優秀的Web頁面時,HTML元素的選擇和運用至關重要。這些元素不僅影響頁面的結構,還直接關系到頁面的可用性、可訪問性和SEO表現。本文將深入探討一些關鍵的HTML元素,并解釋它們在提升Web品質方面的重要性。 1. <html> 根元素 HTM…

【AI提示詞】競品分析專家

提示說明 對產品進行競品分析&#xff0c;明確產品定位和優化營銷策略。 提示詞 # 角色:競品分析專家## 背景: 需要對旗下產品A進行競品分析,明確產品定位和優化營銷策略。## 描述: - 作者:張三 - 版本:1.0 - 語言:中文## 注意事項: 保持客觀公正態度,用數據說話,給出具體的…

4-6記錄(B樹)

找左邊右下或者右邊左下 轉化成了前驅后繼的刪除 又分好幾種情況&#xff1a; 1. 只剩25&#xff0c;小于2&#xff0c;所以把父親拉到25旁邊&#xff0c;兄弟的70頂替父親 對于25&#xff0c;25的后繼就是70&#xff0c;25后繼的后繼是71&#xff08;中序遍歷) 2. 借左子樹…

什么是RACI矩陣,應用在什么場景?

一、什么是RACI RACI矩陣是一種用于明確項目或任務中角色與責任的管理工具&#xff0c;通過定義不同人員在任務中的參與程度來避免職責不清的問題。以下是其核心要點&#xff1a; ?RACI的含義? ● ?R&#xff08;Responsible&#xff09;執行者?&#xff1a;直接完成任務…

深入理解全排列算法:DFS與回溯的完美結合

全排列問題是算法中的經典問題&#xff0c;其目標是將一組數字的所有可能排列組合列舉出來。本文將詳細解析如何通過深度優先搜索&#xff08;DFS&#xff09;和回溯法高效生成全排列&#xff0c;并通過模擬遞歸過程幫助讀者徹底掌握其核心思想。 問題描述 給定一個正整數 n&a…

在 Dev-C++中編譯運行GUI 程序介紹(二)示例:祝福程序

在 Dev-C中編譯運行GUI 程序介紹&#xff08;二&#xff09;示例&#xff1a;祝福程序 前期見&#xff1a; 在 Dev-C中編譯運行GUI 程序介紹&#xff08;一&#xff09;基礎 https://blog.csdn.net/cnds123/article/details/147019078 示例1、祝福程序 本文中的這個祝福程序是…

Stable Diffusion 四重調參優化——項目學習記錄

學習記錄還原&#xff1a;在本次實驗中&#xff0c;我基于 Stable Diffusion v1.5模型&#xff0c;通過一系列優化方法提升生成圖像的質量&#xff0c;最終實現了圖像質量的顯著提升。實驗從基礎的 Img2Img 技術入手&#xff0c;逐步推進到參數微調、DreamShaper 模型和 Contro…

Solidity智能合約漏洞類型與解題思路指南

一、常見漏洞類型與通俗解釋 1. 重入攻擊(Reentrancy) ?? 通俗解釋:就像你去銀行取錢,柜臺人員先給你錢,然后再記賬。你拿到錢后立即又要求取錢,由于賬還沒記,柜臺又給你一次錢,這樣循環下去你就能拿走銀行所有的錢。 漏洞原理:合約在更新狀態前調用外部合約,允許…

Docker部署.NetCore8項目

在VS.net新建.netCore8項目&#xff0c;生成項目的發布文件&#xff0c;之后添加Dockerfile&#xff0c;內容如下&#xff1a; FROM mcr.microsoft.com/dotnet/aspnet:8.0 # 設置工作目錄 WORKDIR /app # 掛載臨時卷&#xff08;類似于 VOLUME /tmp&#xff09; VOLUME /tmp …

【C++】右值引用、移動語義與完美轉發

左值、右值是C常見的概念&#xff0c;那么什么是右值引用&#xff0c;移動語義&#xff0c;完美轉發呢&#xff1f;本UP帶大家了解一下C校招常問的C11新特性。 左值與右值 左值&#xff1a;明確存儲未知、可以取地址的表達式 右值&#xff1a;臨時的、即將被銷毀的&#xff…

艾爾登法環地圖不能使用鼠標移動或點擊傳送點原因和設置方法

今天玩艾爾登法環突發發現地圖不能用鼠標點擊傳送點了。 找了半天發現設置地圖選單的游標移動方式只有鍵盤了&#xff0c;改成鍵盤與鼠標就好啦。

【算法】——一鍵解決動態規劃

前言 動態規劃是一種高效解決??重疊子問題??和??最優子結構??問題的算法思想。它通過??分治記憶化??&#xff0c;將復雜問題分解為子問題&#xff0c;并存儲中間結果&#xff0c;避免重復計算&#xff0c;從而大幅提升效率。 ??為什么重要&#xff1f;? ??優化…

uniApp開發微信小程序-連接藍牙連接打印機上岸!

歷經波折三次成功上岸&#xff01; 三次經歷簡單絮叨一下&#xff1a;使用uniAppvue開發的微信小程序&#xff0c;使用藍牙連接打印機&#xff0c;藍牙所有的接口都是插件中封裝的&#xff0c;用的插件市場中的這個&#xff1a; dothan-lpapi-ble &#xff1b;所以&#xff0c…

軟件系統安全設計方案,信息化安全建設方案(Word原件)

1.1 總體設計 1.1.1 設計原則 1.2 物理層安全 1.2.1 機房建設安全 1.2.2 電氣安全特性 1.2.3 設備安全 1.2.4 介質安全措施 1.3 網絡層安全 1.3.1 網絡結構安全 1.3.2 劃分子網絡 1.3.3 異常流量管理 1.3.4 網絡安全審計 1.3.5 網絡訪問控制 1.3.6 完…