Embedded a VSCode style IDE in the browser

Mike3355 0
Viewed 30

I am trying to find a vue 3 component that is a code editor with a similar theme as vscode. It should have the tree structure and be able to execute the code.

Some of the things I found that sadly did not fit the bill are:

monaco-editor

vue3-ace-editor

ace

I would like to send the files from the backend and have them rendered in the embedded code editor.

Any advice would be greatly appreciated.

visual-studio-code vue.js
1 Answers

The editor powering VSCode is open source and Microsoft provides examples on how to use it.

Demo: 

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>

How does it not fit the bill?

userx8W70
Related