Monaco Editor

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

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

使用

<div id="editor"></div>

<script src='https://fastly.jsdelivr.net/npm/monaco-editor@0.34.1/min/vs/loader.js'></script>

<script>
    require.config({
        paths: {
            vs: 'https://fastly.jsdelivr.net/npm/monaco-editor@0.34.1/min/vs'
        },
        'vs/nls': { availableLanguages: { '*': 'zh-cn' } }
    });
</script>

//载入Monaco
var editor = null;
require(['vs/editor/editor.main'], function () {
    //得到支持的语言
    var modesIds = monaco.languages.getLanguages().map(lang=>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.getSelection();  //获取选中的行信息

editor.getModel().getLineContent(1);    //获取某一行的内容
editor.getModel().getLinesContent();    //获取每一行的内容

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

editor._configuration._rawOptions.language  //获取编辑器当前语言（初始化值）
editor.getModel().getLanguageId()           //动态（已改变编辑器语言）

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

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

//添加按键监听
editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, function () {
　　console.log('Ctrl + S 保存')
})

editor.trigger('a', 'editor.action.formatDocument') //触发：格式化文档，更多支持项：editor._actions

//渲染代码得到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'));

// json 允许注释，VSCode 设置 搜索 Files: Associations 添加 *.json = jsonc
monaco.languages.json.jsonDefaults.diagnosticsOptions.comments = "ignore";
// 默认 error , 可选 'error' | 'warning' | 'ignore'

属性配置

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

注意

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

示例

• https://ss.netnr.com/vscode