Script 标签引入 Monaco Editor - a博客-个人博客-技术分享

将 monaco-editor 下载到本地，地址：https://microsoft.github.io/monaco-editor/

目录结构：

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./monaco-editor-0.50.0/package/min/vs/editor/editor.main.css">
</head>

<body>

    <div id="monaco" style="height: 100vh;"></div>

    <script src="./monaco-editor-0.50.0/package/min/vs/loader.js"></script>
    <script>
        require.config({ paths: { 'vs': './monaco-editor-0.50.0/package/min/vs' } });

        require(['vs/editor/editor.main'], function (e) {
            window.monaco = e;

            var editor = monaco.editor.create(document.querySelector('#monaco'), {
                value: this.code,
                language: 'html',  // 语言
                minimap: {
                    enabled: false
                },
                fontSize: '14px',
                fixedOverflowWidgets: true // 超出编辑器大小的使用fixed属性显示
            })

            // 监听编辑器内容变化
            editor.onDidChangeModelContent(function () {
                console.log(editor.getValue());
            })
        });
    </script>

</body>

</html>