Monaco Editor

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

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


使用

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

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

<script src="https://lib.baomitu.com/monaco-editor/0.17.0/min/vs/loader.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.getSelection();

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

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

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

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

//设置主题
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

示例

第 1 页1 个留言
  • 头像
    111 Guest 6天前回复 1

    11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111123132111---

    ![图片说明](‘1. 12321’)

回复
昵称
邮箱
链接
ˆ