react CodeMirror react-codemirror2 改变高度

最新推荐文章于 2024-04-29 09:48:16 发布
最新推荐文章于 2024-04-29 09:48:16 发布
阅读量675 收藏
点赞数
分类专栏： 开发过程总结 文章标签： react.js javascript 前端 CodeMirror
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhongmei121/article/details/129130519
版权

CodeMirror有个默认的高度300px，尝试在less文件修改，没有修改成功

/deep/ .CodeMirror {
    height: auto;
  }

然后用下面这种方法修改成功：

const codemirrorDom = document.getElementsByClassName('CodeMirror')[0]
codemirrorDom.setAttribute("style","height: auto")

真实不容易

咕噜咕噜的车轮向前
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react-codemirror-runmode:利用CodeMirror的解析器高亮显示React
05-04
react-codemirror-runmode 利用CodeMirror的解析器为React语法突出显示 安装 npm install --save react-codemirror-runmode codemirror 您还需要提供要使用的CodeMirror语言定义。 我们不会将它们捆绑在一起，以免使用未使用的定义膨胀组件。 用法 import CodeMirror from 'codemirror' import 'codemirror/addon/runmode/runmode' import 'codemirror/mode/meta' import 'codemirror/mode/javascript/javascript' import Highlighter from 'react-codemirror-runmode' import React from 'rea
react-codemirror2：React的Codemirror集成组件
02-05
react-codemirror2 演示@ 安装 npm install react-codemirror2 codemirror --save react-codemirror2带有和组件的概念。 UnControlled包含一个简单的包装程序，该包装程序主要由codemirror本身的内部工作提供codemirror ，而Controlled则需要用户进行状态管理，除非通过value正确处理，否则它会阻止Codemirror进行更改。 后者将提供更多控制权，并可能更适合使用繁重的应用程序。 不受控制的使用 import { UnControlled as CodeMirror } f
在线js编辑器来喽！CodeMirror页面代码编辑器
Pinkr28的博客
07-01 1860
在公司的开发平台使用时需要用到js代码编写输入框，大家都是在vscode之类的编辑器写好后粘贴，在用重构项目的时候想到了这里的弊端，想在页面上也可以有js 的结构可编写代码，就清晰方便很多。 来了来了它来了 大声喊出它的名字：CodeMirror 这个是我做调研使用vue还是react重构的时候发现的一款代码编辑器！！ 最终 找到了他有基于react开发的组件啊啊啊啊 话不多说 上官网：　https://www.npmjs.com/package/react-codemirror2 ...
react-codemirror2 编辑器需点击一下或者延时才显示数据的问题
Realizee的博客
08-10 1318
现象： 组件的数据已经赋上值的情况下，初始状态不渲染数据，需要点击编辑框获取焦点后才展示，或者延迟了几秒才显示出来。 解决：1. 手动引入自动刷新的插件 2. 配置一下参数。
react在线文件_在线IDE开发入门之从零实现一个在线代码编辑器
weixin_39689687的博客
11-10 503
前言3年前在AWS re:Invent 大会上AWS 宣布推出 Cloud9, 用于在云端编写、运行和调试代码，它可以直接运行在浏览器中，也就是传说中的 Web IDE。3年后的今天随着国内云计算的发展, 各大云计算服务厂商都在部署自己的WEB IDE, 而且已经有非常成熟的落地方案, 对于这一块的技术原理和实现, 也非常值得我们去学习和剖析.目前比较成熟的WEB IDE方案有CodeSandbo...
React中，使用codeMirror设置代码高度自适应
my_wings的博客
05-15 4231
在对应的less文件下，设置样式 :global .CodeMirror { /* Set height, width, borders, and global font properties here */ font-family: monospace; height: auto; color: black; direction: ltr; } ...
CodeMirror设置高度自适应
PiaoMiaoXiaodao的博客
04-12 1733
1.添加全局样式 .CodeMirror { border: 1px solid #eee; height: auto !important; /*min-height: 100px;*/ } .CodeMirror-scroll { height: auto !important; min-height: 100px; /*overflow-y: hidden;*/ /*overflow-x: auto;*/ } 2.html 允许设置最小高度
CodeMirror 设置高度问题
冷胜任 的专栏
09-02 2897
一种场景 如果当前页面就一个CodeMirror 组件的化可以直接css设置高度 .CodeMirror { border: 1px solid #eee; height: auto; } 第二种场景 一个页面有多个CodeMirror组件使用，可以设置ref ```css const codemirrorRef = React.useRef(); useEffect(() => { codemirrorRef.current.editor.display.wrapper.styl
codemirror5 设置最小高度，超出不滚动
weixin_41886421的博客
11-30 205
codemirror5 设置最小高度，超出不滚动
CodeMirror插件的高度自适应问题
热门推荐
wang704987562的博客
01-12 1万+
项目中需要使用代码编辑器插件，于是找到了CodeMirror，这个插件功能十分强大，官网地址： https://codemirror.net/ 把插件集成到项目中后发现，这个插件的默认高度是300px：但是需求是高度根据内容自适应，dmeo中有个resize的例子，效果如下：按照demo，我也添加了这个类样式，但是没效果，再搜一下资料，发现需要再添加一个类样式，如下： .CodeM
linux-reactcodemirror将优秀的CodeMirror编辑器封装为一个Reactjs组件
08-15
react-codemirror - 将优秀的CodeMirror编辑器封装为一个React.js组件
React根据宽度自适应高度的示例代码
08-29
本篇文章主要介绍了React根据宽度自适应高度的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
react-codemirror:React的CodeMirror组件。 @codemirror https
04-28
React代码镜像 React的CodeMirror组件。 演示@ 特征： :seedling: 根据配置自动加载mode文件。 :rocket: 快速轻松地配置API。安装# Not dependent on uiw.npm install @uiw/react-codemirror --save用法import Code...
用于 React 的 CodeMirror 组件
06-08
react-codemirror 用于 React 的 CodeMirror 组件。 demo @uiwjs.github.io/react-codemirror/ 功能：:seedling: 根据配置自动加载模式文件。 :rocket: 快速轻松地配置 API。 安装 # 不依赖于 uiw。 npm install @...
react-hypermd-demo:React + CodeMirror + react-codemirror + HyperMD
05-17
React超演示React + CodeMirror + react-codemirror + HyperMD这个项目是通过引导的。 您将在下面找到一些有关如何执行常见任务的信息。 您可以在找到本指南的最新版本。目录在编辑器中进行调试自动格式化代码更改...
React vs React Native写法上的不同
Ranye的博客
04-23 661
从标签和样式两个角度，快速从react过渡到react native
vue3中的reactive、readonly和shallowReactive
weixin_43784341的博客
04-29 360
这些函数提供了不同级别的响应式对象，你可以根据需求选择合适的函数来创建对象。在实际应用中，你可以将这些响应式对象用于组件的状态管理、数据传递等场景，从而实现更加灵活和高效的 Vue 应用程序。是用于创建响应式对象的函数，它们可以帮助管理组件状态和数据流。在 Vue 3 中，
react实现时钟翻牌效果
qq_39933787的博客
04-24 309
解决方案：通过判断数字改变（这里通过新旧数值变动来判断，不贴代码啦），每次变动的时候手动把animationIterationCount设置为infinite（持续动画），半秒后改为1（动画只执行一次），需求：随着数字的变动要求有时钟翻动动效。问题：只在加载时有动效。
React正式更新！开始学习React 19！
最新发布
BigYe_ChengPu的博客
04-29 915
2024年4月，React 19的第一个版本发布，版本号是19.0.0-Beta，快来抢先学习新特性。
react-codemirror
11-18
React-codemirror是一个React组件，它提供了一个代码编辑器，可以在React应用程序中使用。它是基于CodeMirror构建的，可以轻松地将其集成到React项目中。以下是一个简单的React-codemirror演示： 首先，安装react-codemirror2和codemirror： ```shell npm install react-codemirror2 codemirror --save ``` 然后，在你的React组件中引入Codemirror组件： ```javascript import {UnControlled as CodeMirror} from 'react-codemirror2' import 'codemirror/lib/codemirror.css' import 'codemirror/theme/material.css' import 'codemirror/mode/javascript/javascript' function App() { const [code, setCode] = useState('const greeting = "Hello World!') return ( <div> <h1>React Codemirror Demo</h1> <CodeMirror value={code} options={{ mode: 'javascript', theme: 'material', lineNumbers: true }} onChange={(editor, data, value) => { setCode(value) }} /> </div> ) } ``` 在上面的代码中，我们首先从react-codemirror2中引入UnControlled组件，然后在组件中设置了一些选项，例如代码模式，主题和行号。我们还设置了一个onChange事件处理程序，以便在编辑器中更改代码时更新状态。 最后，我们将Codemirror组件呈现在我们的应用程序中，并将其值设置为我们的状态代码。现在，当我们在编辑器中更改代码时，状态将更新并反映在UI中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值