Monaco Editor

https://microsoft.github.io/monaco-editor/

非常强大的一款在线代码编辑器,vscode就是最好的证明


使用

<div id="editor"></div>
<link href="https://lib.baomitu.com/monaco-editor/0.13.1/min/vs/editor/editor.main.css" rel="stylesheet">

<script>
    var require = { paths: { 'vs': 'https://lib.baomitu.com/monaco-editor/0.13.1/min/vs' } };
</script>

<script src="https://lib.baomitu.com/monaco-editor/0.13.1/min/vs/loader.js"></script>

//可选引入
<script src="https://lib.baomitu.com/monaco-editor/0.13.1/min/vs/editor/editor.main.nls.js"></script>
<script src="https://lib.baomitu.com/monaco-editor/0.13.1/min/vs/editor/editor.main.js"></script>

//载入Monaco
var editor = null;
require(['vs/editor/editor.main'], function () {
    //得到支持的语言
    var modesIds = monaco.languages.getLanguages().map(function (lang) { return lang.id }).sort();

    //创建编辑器
    editor = monaco.editor.create(document.getElementById("editor"), {
        //内容
        value: 'console.log("Hello world!");',
        //语言
        language: 'javascript',
        //自适应调整
        automaticLayout: true,
        //主题,三款:vs、vs-dark、hc-black
        theme: 'vs',
        //代码略缩图
        minimap: {
            enabled: false
        }
    });
});

常用的方法

//设置值
editor.setValue('console.log("Hello world!");');

//获取值
editor.getValue();

//内容改变事件
editor.onDidChangeModelContent(function(e){
  console.log(e);
});

//设置主题
monaco.editor.setTheme('vs-dark');

//改变属性
editor.updateOptions({
  //关闭行号
  lineNumbers: "off"
});

//渲染代码得到HTML
monaco.editor.colorize('console.log("Hello world!");', 'javascript').then(function (data) {
    console.log(data);
});

//渲染节点代码
<pre id="code" data-lang="javascript" style="width:500px;">console.log("Hello world!");</pre>
monaco.editor.colorizeElement(document.getElementById('code'));

属性配置

https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.ieditoroptions.html


注意

  • 谷歌火狐支持优秀,IE11+
  • Monaco很多方法得到是一个Promise

示例

留言

ˆ