• 通过JS代码快速调用集成Monaco代码编辑器

模块介绍

「Monaco代码编辑器」是一个通过JS代码快速调用集成Monaco代码编辑器

使用方法

定义 HTML 容器

<div style="width:100%;height:100vh;" id="editor"></div>

调用 JavaScript 代码

let editorDom = document.querySelector('#editor');
let editor = null
window.require.config({paths: {vs: '/vendor/MonacoEditor/vs'}});
window.require(['vs/editor/editor.main'], () => {
    editor = window.monaco.editor.create( editorDom, {
        value: "Hello Code",
        language: 'javascript',
        readOnly: false,
        fontSize: '13px',
        renderLineHighlight: false,
        minimap: {
            enabled: false
        },
        theme: 'vs-dark',
    });
});
$(window).on('resize',function(){
    editor && editor.layout();
});

参考

• https://microsoft.github.io/monaco-editor/index.html