text-editor text-editor netnr 发布于:2018年07月31日 更新于:2021年03月27日 3011

Monaco Editor

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

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


使用

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

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

<script>
    require.config({
        paths: {
            vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.22.3/min/vs'
        },
        'vs/nls': { availableLanguages: { '*': 'zh-cn' } }
    });
</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();    //获取每一行的内容

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

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

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

//内容改变事件
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 保存')
})

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'));

属性配置

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


注意

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

示例

第 1 页1 个留言
  • 头像
    111 Guest 2019年10月08日回复 1
    block