我正试图找到一个vue3组件，它是一个主题与vscode类似的代码编辑器。它应该具有树形结构，并且能够执行代码。
遗憾的是，我发现一些不符合要求的东西是：
monaco编辑器
vue3 ace编辑器
ace
我想从后端发送文件，并在嵌入式代码编辑器中进行渲染。
如有任何建议，我们将不胜感激。
更新1
我开始工作了。没有文件树，但有一个组件。只需要在文件树中添加一个观察者，并在ManacoEditor中选择什么。下面是一个让IDE在浏览器中渲染的基本示例。
<template>
<div>
<MonacoEditor
width="900"
height="750"
language="go"
@change="onChange"
:value="value"
></MonacoEditor>
</div>
</template>
<script lang="ts">
import {Options, Vue} from "vue-class-component";
import MonacoEditor from "monaco-editor-vue3";
@Options({
components: {
MonacoEditor,
},
props: {
editorInit: String,
content: String,
},
})
export default class Editor extends Vue {
value = `
package main
import "fmt"
func main() {
fmt.println("HelloWorld")
}`
onChange() {
console.log("value");
}
async mounted() {
// add parameters here
}
}
</script>
<style scoped>
</style>
软件包.json
"dependencies": {
"@codemirror/lang-html": "^6.1.1",
"@codemirror/lang-javascript": "^6.1.0",
"@codemirror/lang-json": "^6.0.0",
"@monaco-editor/loader": "^1.3.2",
"codemirror": "^6.0.1",
"core-js": "^3.8.3",
"monaco-editor": "^0.34.0",
"monaco-editor-vue3": "^0.1.6",
"monaco-editor-webpack-plugin": "^7.0.1",
"monaco-languageclient": "^4.0.0",
"vscode-ws-jsonrpc": "^2.0.0",
"vue": "^3.2.13",
"vue-class-component": "^8.0.0-0",
"vue-codemirror": "^6.1.1",
"vue-monaco": "^1.2.2",
"vue-router": "4"
},
享受吧！
支持VSCode的编辑器是开源的，Microsoft提供了如何使用它的示例。
演示：
var editor = monaco.editor.create(document.getElementById("container"), {
value: ["function x() {", 'tconsole.log("Hello world!");', "}"].join("n"),
language: "javascript",
});
monaco.editor.setTheme("vs-dark");body {
margin: 0;
}<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link
rel="stylesheet"
data-name="vs/editor/editor.main"
href="https://unpkg.com/monaco-editor@0.34.0/min/vs/editor/editor.main.css"
/>
</head>
<body>
<div
id="container"
style="width: 800px; height: 600px; border: 1px solid grey"
></div>
<script>
var require = {
paths: {
vs: "https://unpkg.com/monaco-editor@0.34.0/min/vs",
},
};
</script>
<script src="https://unpkg.com/monaco-editor@0.34.0/min/vs/loader.js"></script>
<script src="https://unpkg.com/monaco-editor@0.34.0/min/vs/editor/editor.main.nls.js"></script>
<script src="https://unpkg.com/monaco-editor@0.34.0/min/vs/editor/editor.main.js"></script>
</body>
</html>它怎么不符合要求？
我开始工作了。没有文件树，但有一个组件。只需要在文件树中添加一个观察者，并在ManacoEditor中选择什么。下面是一个让IDE在浏览器中渲染的基本示例。
<template>
<div>
<MonacoEditor
width="900"
height="750"
language="go"
@change="onChange"
:value="value"
></MonacoEditor>
</div>
</template>
<script lang="ts">
import {Options, Vue} from "vue-class-component";
import MonacoEditor from "monaco-editor-vue3";
@Options({
components: {
MonacoEditor,
},
props: {
editorInit: String,
content: String,
},
})
export default class Editor extends Vue {
value = `
package main
import "fmt"
func main() {
fmt.println("HelloWorld")
}`
onChange() {
console.log("value");
}
async mounted() {
// add parameters here
}
}
</script>
<style scoped>
</style>
软件包.json
"dependencies": {
"@codemirror/lang-html": "^6.1.1",
"@codemirror/lang-javascript": "^6.1.0",
"@codemirror/lang-json": "^6.0.0",
"@monaco-editor/loader": "^1.3.2",
"codemirror": "^6.0.1",
"core-js": "^3.8.3",
"monaco-editor": "^0.34.0",
"monaco-editor-vue3": "^0.1.6",
"monaco-editor-webpack-plugin": "^7.0.1",
"monaco-languageclient": "^4.0.0",
"vscode-ws-jsonrpc": "^2.0.0",
"vue": "^3.2.13",
"vue-class-component": "^8.0.0-0",
"vue-codemirror": "^6.1.1",
"vue-monaco": "^1.2.2",
"vue-router": "4"
},