• 新增：支持 Laravel 13 / PHP 8.5 运行环境，在最新框架与 PHP 版本下可正常使用
• 优化：通过 JS 代码快速调用集成 Monaco 代码编辑器，使用方式保持兼容

模块介绍

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

Monaco 代码编辑器
    集成
        JS 快速初始化
        内置静态资源引用
    能力
        语法高亮
        代码补全与折叠

功能特性

• 通过一段 JS 代码即可在任意页面集成 Monaco 代码编辑器
• 支持语法高亮、代码补全、折叠与暗色主题等编辑器能力
• 编辑器资源由模块内置提供，无需引用外部 CDN
• 兼容最新运行环境（Laravel 13 / PHP 8.5）

使用方法

定义 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