zoukankan      html  css  js  c++  java
  • js 在浏览器中使用 monaco editor

    <!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="../node_modules/monaco-editor/min/vs/editor/editor.main.css"
        />
        <style>
          html,
          body {
            position: relative;
            padding: 0;
            margin: 0;
            height: 100vh;
             100vw;
            overflow: hidden;
          }
        </style>
      </head>
      <body>
        <script>
          var require = {
            paths: { vs: "../node_modules/monaco-editor/min/vs" },
            "vs/nls": { availableLanguages: { "*": "zh-cn" } },
          };
        </script>
        <script src="../node_modules/monaco-editor/min/vs/loader.js"></script>
        <script src="../node_modules/monaco-editor/min/vs/editor/editor.main.nls.js"></script>
        <script src="../node_modules/monaco-editor/min/vs/editor/editor.main.nls.zh-cn.js"></script>
        <script src="../node_modules/monaco-editor/min/vs/editor/editor.main.js"></script>
    
        <script>
          var editor = monaco.editor.create(document.body, {
            value: "// monaco editor example",
            language: "javascript",
            theme: "vs-dark",
          });
          
          let offset = 0;
          let codeStr = `
    import monaco from "monaco-editor";
    
    var editor = monaco.editor.create(document.body, {
      value: ["function x() {", '	console.log("Hello world!");', "}"].join(
        "\n"
      ),
      language: "javascript",
    });
    `;
    
          let id = setInterval(() => {
            const oldValue = editor.getValue();
            const addValue = codeStr[offset++];
            editor.setPosition(new monaco.Position(0, 0));
    
            if (addValue === undefined) {
              clearInterval(id);
              return;
            }
    
            editor.setValue(oldValue + addValue);
          }, 60);
        </script>
      </body>
    </html>
    

    See also:

  • 相关阅读:
    poj 1511Invitation Cards
    hust 1608Dating With Girls
    sdibt 2128Problem A:Convolution Codes
    hdu 1325Is It A Tree?
    poj 2240Arbitrage
    hdu 2818Building Block
    poj 1789Truck History
    poj 1125Stockbroker Grapevine
    展望未来
    告别过去
  • 原文地址:https://www.cnblogs.com/ajanuw/p/14397980.html
Copyright © 2011-2022 走看看