Monaco Editor是一款支持多语言多皮肤主题浏览器端代码编辑器-BFW插件库

Monaco Editor是一款支持多语言多皮肤主题浏览器端代码编辑器

它在 MIT 许可下获得许可，并支持 Edge、Chrome、Firefox、Safari 和 Opera。

移动浏览器或移动 Web 框架不支持 Monaco 编辑器。

支持XML、PHP、C#、C++、Razor、Markdown、Diff、Java、VB、CoffeeScript、Handlebars、Batch、Pug、F#、Lua、Powershell、Python、Ruby、SASS、R、Objective-C。

安装

使用npm：

npm install monaco-editor@0.33.0

使用cdn:

使用方式：

1、设置容器

 <div id="container" style="height: 100%"></div>

2、采用require方式加载编辑器各个模块，设置reqire的地址：

require.config({ paths: { 'vs': '//repo.bfw.wiki/bfwrepo/js/monaco-editor' } });

3、然后引用加载核心文件

require(['vs/editor/editor.main'], function () {

	monaco.editor.create(document.getElementById('container'), {
		value: "function hello() {\n\talert('Hello world!');\n}",
		language: 'javascript'
	});

});

示例代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
    <title>BFW NEW PAGE</title>
    <script src="//repo.bfw.wiki/bfwrepo/js/monaco-editor/loader.js"></script>
<style>
    body{
        height: 100vh;
    }
</style>
</head>

<body>
    <div id="container" style="height: 100%"></div>

    <script>
        require.config({ paths: { 'vs': '//repo.bfw.wiki/bfwrepo/js/monaco-editor' } });
         
require(['vs/editor/editor.main'], function () {

monaco.editor.create(document.getElementById('container'), {
	value: "function hello() {\n\talert('Hello world!');\n}",
	language: 'javascript'
});

            });
    </script>
</body>

</html>

官网：https://microsoft.github.io/monaco-editor/index.html

官网更多示例代码在线编辑：https://microsoft.github.io/monaco-editor/playground.html