codemirror 相关问题

我正在使用reactjs和nodejs编写一个leetcode克隆。为了挑战自己，我将其作为一个类来编写，而不是作为一个整体功能。无论哪种情况，我似乎都不知道如何获得我正在使用reactjs和nodejs编写一个leetcode克隆。为了挑战自己，我将其作为一个类来编写，而不是作为一个整体功能。在任何一种情况下，我似乎都不知道如何让 axios.post("http://localhost:80/python", {code})}>[Run] 返回字段的输入而不是变量。我附上了以下代码： import React from "react"; import CodeMirror from '@uiw/react-codemirror'; import 'codemirror/keymap/sublime'; import 'codemirror/theme/monokai.css'; import axios from 'axios'; import './App.css'; class App extends React.Component { reload = () => { this.setState({ index: this.state.index+1, //index: this.state.index-1 }); } runCode = () => { this.setState({codea: true}) } constructor(props) { super(props); this.state = { DataisLoaded: false, count: 0, index: 0, firstName: '', lastName: '', age: '', email: '', description: '', hobbies: '', location: '', codea: false, code: 'console.log("Hello World")', }; //this.Select = this.Select.bind(this); } componentDidMount() { fetch( //"https://jsonplaceholder.typicode.com/users") "http://localhost") .then((res) => res.json()) .then((json) => { this.setState({ items: json, DataisLoaded: true }); }) } render() { const videos = new Array("https://www.youtube.com/embed/aXXZwyeTJ98"); videos.push("https://www.youtube.com/embed/GnodscC2p-A"); var map = new Map(); for(var s = 0; s < videos.length; s++){ map.set(videos[s]); } let i = 0; while (i < videos.length) { if (i === this.state.count){ var video = videos[i]; } i++; } const { DataisLoaded, items } = this.state; if (!DataisLoaded) return <div> <h1> Please wait some time.... </h1> </div> ; var codea = 0; var code = 'console.log("Hello World")'; return ( <> <div className = "App"> <header className="App-header"> <h1 className="text-1xl font-bold underline"> </h1> <table> <tr><td> <button onClick={() => this.setState({ count: this.state.count - 1 })}> [Last] </button> </td><td><p><code>-</code> Video {this.state.count} <code>-</code> </p> </td><td> <button onClick={() => this.setState({ count: this.state.count + 1 })}> [Next] </button> </td></tr> </table> <iframe key={this.state.index} width="560" height="315" src={video} title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> <div ClassName ="absolute top-20 bottom-40 left-10 right-10 text-11"> </div> <div> <CodeMirror value={this.state.code} options={{ mode: 'python', lineNumbers: true, }} onChange={(editor, data, value) => { this.setState({ codea: false, code: value, } ) }} /> <button onClick={() => axios.post("http://localhost:80/python", {code})}>[Run]</button> <div className="Output"> <pre>{this.state.codea && this.state.code}</pre> </div> </div> </header> </div> </> ); } } export default App; const http = require('http'); const express = require('express'); const cors = require("cors"); const app = express(); const port = 80; const fs = require("fs"); app.use(cors()); app.use(express.json()); const users = require("./users"); app.get('/', (req, res) => { res.send(users) }) app.post('/python', (req, res) => { if (req.body.code != null) { fs.stat('test.py', function (err, stats) { console.log(stats); if (err) { return console.error(err); fs.writeFileSync("test.py", req.body.code); } fs.unlink('test.py',function(err){ if(err) return console.log(err); console.log('file deleted successfully'); fs.writeFileSync("test.py", req.body.code); }); }); var user = req.body.code; console.log({user}); } else { console.log("Error1"); } if (req.body != null) { console.log("Success1"); } else { console.log("Error1"); } if (req.method === 'POST') { console.log("Post1"); } else { console.log("?1"); } }) app.post('/users', (req, res) => { res.json({ message: "success" }); if (req.body != null) { console.log("Success2"); } else { console.log("Error2"); } if (req.method === 'POST') { console.log("Post2"); } else { console.log("?2"); } }); app.listen(port, () => { console.log(`Example app listening on port ${port}`) })` 我已经尝试了所有我能想到的事情。到目前为止还没有任何效果。

node.js reactjs react-native class codemirror

回答 0 投票 0

正则表达式匹配主函数之外的所有内容

我目前正在使用CodeMirror，带有javascript，它似乎不支持lookahead或lookbehind。用户应该在单个函数中编写所有内容，这被认为是...

javascript regex codemirror

回答 1 投票 0

无法将 codemirror 组件中的值传递给 useState 钩子

所以我试图将值从 codemirror 组件的文本字段发送到称为 setendpoint 的父组件使用状态，在该端点中我有像 {url = "", headers ...

reactjs react-hooks react-props text-editor codemirror

回答 0 投票 0

使用它时代码镜像出现故障我的自定义代码编辑器中出现多行如何解决

我下载了代码镜像包，但问题是我的文本区域没有一个输入，而是有两个如何解决这个问题？我尝试使用 CSS 解决此问题，但没有成功。

javascript codemirror code-editor

回答 0 投票 0

虽然在 codemirror 上工作，即使我在我的包 json 中有它，但我收到这个错误

导入“codemirror/lib/codemirror.css”；导入“codemirror/theme/material.css”；导入“代码镜像/模式/xml/xml.js” 导入“代码镜像/模式/javascript/javascript.js” 进口'

javascript reactjs codemirror

回答 1 投票 0

如何在浏览器扩展中使用CodeMirror 6？

我一直在浏览器扩展中使用 CodeMirror 5。我还没有找到关于在不使用第 3 方打包脚本的情况下直接包含 CodeMirror 6 的指南。是否可以将 CM6 导入为 ES6 ...

codemirror codemirror-6

回答 0 投票 0

CodeMirror getValue 函数不工作

我导出了编辑器组件并在我的代码编辑器页面中使用了它我使用了 Editor.getValue() 并期望返回一个字符串，但是浏览器控制台显示“无法读取未定义的属性（重新...

node.js reactjs express web codemirror

回答 0 投票 0

设置CodeMirror的缩进单位

我想将 indentUnit 设置为 x 个空格而不是 CM 6 中的默认两个这是我在我正在使用的 JSON 查看器中将其设置为 10 的尝试：让状态 = EditorState.create({ 扩展名：[...

codemirror

回答 0 投票 0

window.CSSLint 未定义，CodeMirror CSS linting 无法运行。角度 15

如何在 Angular 15 中定义 CSLint？对于代码镜像 5 Css lint 不适用于我的 codemirror 5 编辑器如何在 Angular 15 中定义 CSLint？对于 CodeMirror 5 Css lint 不适用于我的 codemirror 5 编辑器 <ngx-codemirror [(ngModel)]="cmEditor[0]" [options]="cmEditorOption" (cursorActivity)="getIndexOfLineColumn($event, 0);" #editor> </ngx-codemirror> cmEditorOption = { mode: 'text/css', theme: 'default', lineNumbers: true, lineWrapping: true, foldGutter: true, gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter', 'CodeMirror-lint-markers'], autoCloseBrackets: true, matchBrackets: true, matchClosing: true, alignCDATA: true, lint: true, lintGutter: true }

angular codemirror angular15 csslint

回答 0 投票 0

节点类型的悬停光标上的代码镜像更改

我的语法中有一个特定的节点，称为插值。在编辑器中将鼠标悬停在该节点上时，我想更改光标。这在 codemirror 中可能吗？

codemirror react-codemirror

回答 0 投票 0

任何人都可以指导我完成制作功能齐全的编码平台的过程

如何使用 MERN 实现制作编码平台。我只想知道如何集成所有组件，包括代码编辑器（代码镜像）、特定问题的测试用例（s ...

javascript mern codemirror

回答 0 投票 0

在博文中嵌入功能

我想构建一个功能，就像我们在 gist.gihub.com 上使用的那样，我可以将我的代码从 gist 嵌入到我的博客文章中，github 使用脚本标签和 url，比如，我想创建更多类似的东西