MonacoEditor在vue中的使用

当时寻找的时候发现,大量的参考资料都是关于react中如何使用MonacoEditor,踩了很多坑,于是打算在这里记下来.

首先说一下,为什么要选取MonacoEditor而不是codemirror

1,支持代码的折叠展开

2.可以实现自动格式化json

接下来直接进入正题,首先使用npm install vue-monaco-editor

我使用的日期是2020年3月18日,此时的vue-monaco-editor是存在一定的问题的,他的一些设置项是不生效的,追更溯源,封装的时候有点出入.所以我直接将下载好的vue-monaco-editor依赖从node_modules中拿出来,直接放入项目中引入.

具体使用如下

1.引入

 import MonacoEditor from './vue-monaco-editor/src/Monaco'

2,使用

<MonacoEditor

        height="600"

        language="json"

        :code="code"

        :editorOptions="options"

        @mounted="onMounted"

        @codeChange="onCodeChange"

        >

    </MonacoEditor>

其中,options是空对象(与上文相应.封装存在问题,所以不再外面进行配置,直接进入Monaco.vue中改动),

code是我们需要展示的内容,

language是支持的语言,目前我只尝试了json,别的具体请参考官网.

onMounted和onCodeChange,一个是挂载,一个是改变编辑器内容的出发方法,建议如下书写

onMounted (editor) {

        this.editor = editor;       

      },

onCodeChange(editor) {},

(其中editor需要再data中声明,初始化为null即可)

3,格式化json内容

this.editor.updateOptions({

            readOnly: false //是否只读

});

this.editor.setValue(this.params) // 参数是编辑器需要展示的json串

this.editor.trigger('','editor.action.format') // 触发自动格式化

this.editor.setValue(this.editor.getValue()) // 强制刷新一次

this.editor.updateOptions({

            readOnly: true

});

4,配置项

在data中,其中以下配置项可以参考官方文档,此处配置即可生效

defaults: {

        selectOnLineNumbers: true,

        roundedSelection: false,

        readOnly: false,

        cursorStyle: 'line',

        automaticLayout: true,

        glyphMargin: true,

        showFoldingControls: "always",

        formatOnPaste: true,

        formatOnType: true,

        folding: true

      }

    }