react-codemirror2 编辑器需点击一下或者延时才显示数据的问题

news/2024/7/15 17:59:03 标签: react.js, 编辑器, 前端, sql

现象:

        <Codemirror/>组件的数据已经赋上值的情况下,初始状态不渲染数据,需要点击编辑框获取焦点后才展示,或者延迟了几秒才显示出来。

原因:

        指定了一些依赖的版本,可能不兼容了一些功能,导致这个现象出现

解决:

        1. 手动引入自动刷新的插件 ;

        2. 配置一下参数 

代码如下:

import 'codemirror/lib/codemirror.css';
import 'codemirror/mode/sql/sql'; 
...
// 引入自动刷新
import 'codemirror/addon/display/autorefresh'


<codemirror 
    value={format(code,{lanuage:'plsql'})} 
    options={
        autoRefresh: true, // 重点是这句,为true

        scrollbarStyle: null,
        mode: 'text/x-pgsql',
        theme: 'material',
        autofocus: false,
        readOnly: false,
        lineNumbers: true, 
        smartIndent: true,
        lint: true,
        lintWrapping: true
        
   } 
    onChange={(editor,data,value)=>{...}}
>
</codemirror>

 

官网:https://github.com/uiwjs/react-codemirror

codemirror2编辑器总结


http://www.niftyadmin.cn/n/4928614.html

相关文章

ChatGPT将会成为强者的外挂?—— 提高学习能力

目录 前言 一、提高学习力 &#x1f9d1;‍&#x1f4bb; 1. 快速找到需要的知识 2. 组合自己的知识体系 3. 内化知识技能 二、提问能力❗ 三、思维、创新能力 &#x1f31f; 1. 批判性思维 1.1 八大基本结构进行批判性提问 1.2 苏格拉底的提问分类方法 2. 结构化思…

Tubi 前端测试:迁移 Enzyme 到 React Testing Library

前端技术发展迅速&#xff0c;即便不说是日新月异&#xff0c;每年也都推出新框架和新技术。Tubi 的产品前端代码仓库始建于 2015 年&#xff0c;至今 8 年有余。可喜的是&#xff0c;多年来紧随 React 社区的发展&#xff0c;Tubi 绝大多数的基础框架选型都遵循了社区流行的最…

Spring整合MyBatis(详细步骤)

Spring与Mybatis的整合&#xff0c;大体需要做两件事&#xff0c; 第一件事是:Spring要管理MyBatis中的SqlSessionFactory 第二件事是:Spring要管理Mapper接口的扫描 具体的步骤为: 步骤1:项目中导入整合需要的jar包 <dependency><!--Spring操作数据库需要该jar包…

STM32基于CubeIDE和HAL库 基础入门学习笔记:物联网项目开发流程和思路

文章目录&#xff1a; 第一部分&#xff1a;项目开始前的计划与准备 1.项目策划和开发规范 1.1 项目要求文档 1.2 技术实现文档 1.3 开发规范 2.创建项目工程与日志 第二部分&#xff1a;调通硬件电路与驱动程序 第三部分&#xff1a;编写最基础的应用程序 第四部分&…

PHP 使用ThinkPHP实现电子邮件发送示例

文章目录 首先我们需要设置我们的邮箱客户端授权&#xff0c;获取到授权码找到我们的邮箱设置去账号中找到这一堆服务&#xff0c;找到后开启smtp服务开启服务后管理服务 接下来需要去下载相应的第三方类库(我这里使用的是PHPMailer)在thinkPHP中封装一下邮件服务类实际调用效果…

[低端局][cx32L003] 移植U8G2

文章目录 一、简介&#xff08;1&#xff09;U8g2&#xff08;2&#xff09;U8x8 二、配置要求三、移植步骤&#xff08;1&#xff09;文件准备和添加&#xff08;2&#xff09;实现回调接口(I2C的读写函数)①软件I2C②硬件I2C &#xff08;3&#xff09;功能裁剪① u8g2_d_set…

聊聊无锁、匿名偏向锁、偏向锁、轻量级锁、重量级锁

锁的竞争可以理解是markword的竞争。 一、简介 本文做作为知识点的补充&#xff0c;有些情况并没有进行测试。 二、markword结构图 64位虚拟机markword结构图&#xff1a; 三、锁的多种状态 我们一般认为锁的状态是&#xff1a;无锁、偏向锁、轻量级锁、重量级锁&#xff…

vue-pc端实现按钮防抖处理-自定义指令

前言 我们经常在移动端会处理按钮和输入框的防抖和节流处理&#xff0c;在pc端很少进行这样的操作 但是在pc端也是可以进行按钮的防抖操作&#xff0c;这样也是比较合理&#xff0c;可以不用但不可以不会 我们只要配合vue项目自定义指令加上全局注册&#xff0c;就可以实现按…