vue项目中引入monaco editor

最新推荐文章于 2024-09-13 09:38:33 发布

木蓝茶陌*_*

最新推荐文章于 2024-09-13 09:38:33 发布

阅读量1.3k

点赞数

分类专栏：前端 vue 文章标签： vue.js monaco-editor 代码编辑器

本文链接：https://blog.csdn.net/jyn15159/article/details/126832447

版权

前端同时被 2 个专栏收录

77 篇文章 7 订阅

订阅专栏

vue

58 篇文章 2 订阅

订阅专栏

本文介绍了如何在Web项目中集成和使用Monaco-Editor，这是微软开源的代码编辑器组件，用于实现类似VSCode的功能。通过npm安装后，在Vue项目中导入并创建编辑器实例，配置编辑器选项如语言、主题、行号等，并展示了编辑器的常用方法，如搜索、滚动、内容获取与设置、布局调整等。

摘要由CSDN通过智能技术生成

monaco-editor概述

monaco-editor 是微软开源的一款web代码编辑器，vscode就是集成monaco-editor来实现的。

官方示例

官方文档

使用

安装

npm安装

npm install monaco-editor

在vue项目中使用

引入相关js文件：

import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';

代码编辑器的容器div：

<div ref="monaco"></div>

编辑器实例化：

mounted () {
    // 编辑器实例化
    this.monacoInstance = monaco.editor.create(this.$refs.monaco, {
        ...this.options
    })
    // console.log(this.monacoInstance.getActions())
    this.model = this.monacoInstance.getModel()
    // console.log(this.model)
}

data(){
    return {
         options: {
        // Monaco Editor Options
        // automaticLayout: true,
        // folding: true,
        value: this.value,      // 编辑器内容
        language: "plaintext",
        theme: 'myCustomTheme',  // 主题
        lineNumbers: 'on',   // 行号
        wordWrap: 'off',     // 自动换行
        readOnly: false,     // 是否只读
        minimap: {           // 缩略图
          enabled: false
        },
        'semanticHighlighting.enabled': true    // 高亮
      },
    }
}

销毁实例：

destroyed () {
    this.monacoInstance.dispose();//使用完成销毁实例
},

monaco editor常用方法和事件

搜索功能：

搜索功能要引入相关js文件

import 'monaco-editor/esm/vs/editor/contrib/find/browser/findController.js';

// 搜索关键字
findKeyWorld () {
    // console.log(this.monacoInstance.getAction("actions.find"))
    this.monacoInstance.getAction("actions.find").run()
}

滚动：

// 滚动到最后一行
scrollToBottom () {
    if (!this.monacoInstance) { return }
    this.model && (this.monacoInstance.revealLine(this.model.getLineCount(), 'Smooth'))
}

获取编辑器内容：

this.monacoInstance.getValue()

设置编辑器内容：

this.monacoInstance.setValue(value)

编辑器自适应：

this.monacoInstance.layout();

编辑器设置更新：

this.monacoInstance.updateOptions({lineNumbers: "on" })