Vue项目管理器中安装及使用Monaco Editor

记录项目开发中遇到的难题。
部分代码参考自鹰子大佬的: Monaco Editor安装及使用

1.安装

(1)安装插件

搜索安装monaco插件

(2)安装依赖

一共要安装三个依赖，其中monaco-editor和monaco-editor-webpack-plugin的版本要对应，不然会报错

editor-vue版本略高于plugin版本，官网issue下有关于版本对应信息

我这里用的是monaco-editor@0.19.3和monaco-editor-webpack-plugin@1.9.1

也可以命令行安装：

npm install editor@1.0.0
npm install monaco-editor@0.19.3
npm install monaco-editor-webpack-plugin@1.9.1

2.配置vue.config.js文件

目录里面没有vue.config.js的话就在根目录新建一个

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
module.exports = {configureWebpack: {plugins: [new MonacoWebpackPlugin()]
}

3.建立组件monaco.vue

<template><divref="container"class="monaco-editor":style="`height: ${height}px`"></div>
</template><script>
import * as monaco from "monaco-editor";
export default {name: "AcMonaco",props: {opts: {type: Object,default() {return {};},},height: {type: Number,default: 500,},},data() {return {// 主要配置defaultOpts: {value: "", // 编辑器的值theme: "vs", // 编辑器主题：vs, hc-black, or vs-darkroundedSelection: false, // 右侧不显示编辑器预览框autoIndent: true, // 自动缩进automaticLayout: true,foldingStrategy: 'indentation', // 代码可分小段折叠minimap: {enabled: false, // 不要小地图},},};},watch: {opts: {handler(n) {this.init();},deep: true,},},mounted() {this.init();},methods: {init() {// 初始化container的内容，销毁之前生成的编辑器this.$refs.container.innerHTML = "";this.editorOptions = Object.assign(this.defaultOpts, this.opts);// 生成编辑器对象this.monacoEditor = monaco.editor.create(this.$refs.container,this.editorOptions);// 编辑器内容发生改变时触发this.monacoEditor.onDidChangeModelContent(() => {this.$emit("change", this.monacoEditor.getValue());});},// 供父组件调用手动获取值getVal() {return this.monacoEditor.getValue();},},
};
</script>

4.ToEditor.vue调用monaco.vue

<template><div class="monaco-container"><div class="ChosseLanguage">语言：<el-selectv-model="opts.language"clearableplaceholder="请选择"size="mini"@change="changeLanguage"><el-optionv-for="item in sets.language":key="item":label="item":value="item"></el-option></el-select></div><!--调用子组件--><div class="monaco-editor"><monaco ref="monaco" :opts="opts" @change="changeValue"></monaco></div><el-buttonclass="submit-button"type="primary"size="mini"@click="getValue">提交代码</el-button></div>
</template>
<script>
import monaco from "./monaco";
export default {name:'ToEditor',components: { monaco },data() {return {sets: {language: {c: "c",css: "css",go: "go",html: "html",java: "java",javascript: "javascript",json: "json",mysql: "mysql",php: "php",python: "python",},theme: {vs: "vs","vs-dark": "vs-dark","hc-black": "hc-black",},},opts: {value: "",readOnly: false, // 是否可编辑language: "java", // 语言类型theme: "vs", // 编辑器主题},};},methods: {changeLanguage(val) {this.opts.language = val;console.log(val);},changeTheme(val) {this.opts.theme = val;},// 手动获取值getValue() {var value = this.$refs.monaco.getVal();console.log(value);},// 内容改变自动获取值changeValue(val) {console.log(val);},},
};
</script>
<style lang="less" scoped>
.monaco-container {position: relative;height: 75%;width: 80%;margin-bottom: 10px;left: 50%;transform: translate(-50%, 0%);
}
.monaco-editor {height: 100%;border: 1px solid rgb(91, 93, 93);
}
.submit-button {position: relative;right: 0;
}
.ChosseLanguage{margin-bottom: 10px;
}
</style>

5.在其他组件中调用ToEditor.vue

<template><div class="monaco-editor"><to-editor></to-editor></div>
</template>
<script>import ToEditor from "./ToEditor";export default {name:"Programming",components: { ToEditor },};
</script>
<style lang="less" scoped>
.monaco-editor {width: 100%;height: 100%;margin-top: 40px;
}
</style>

官方地址

更多功能可以参考官网

文档和示例:
https://microsoft.github.io/monaco-editor/

Github：
https://github.com/microsoft/monaco-editor

Vue项目管理器中安装及使用Monaco Editor相关推荐

windows10中如何在d盘新建kaoshi.log文件_命令行备份Windows 10驱动amp;设备管理器中安装驱动。...
一. 为何需要备份驱动. 1. 现在电脑驱动的一些情况: Windows 10系统安装好后,系统会自动在网络上查找合适的驱动并下载安装. 此外,多数电脑厂商都已提供自家的驱动管理软件,用以对驱动进行统 ...
python项目管理器宝塔面板 django 404_宝塔面板成功部署Django项目流程(图文)
上线 Django 项目记录,超简单,避免无意义的踩坑! 第一步:安装python管理器在宝塔在线面板安装" python项目管理器 " 第二步:安装适配python版本因为服 ...
linux thunderbird,在 Linux 中安装 Thunderbird
本文介绍了如何在 Linux 系统上安装 Thunderbird.其他操作系统,参见在Windows中安装Thunderbird和在 Mac 中安装 Thunderbird. 许多 Linux 的版本 ...
Monaco Editor (vite/webpack + ts + vue项目使用)
1.什么是Monaco Editor?Monaco Editor 微软之前有个项目叫做Monaco Workbench,后来这个项目变成了VSCode,而Monaco Editor(就是从这个项目中成 ...
在 Linux 中安装 Thunderbird
本文介绍了如何在 Linux 系统上安装 Thunderbird.其他操作系统,参见在Windows中安装Thunderbird 和在 Mac 中安装 Thunderbird. 许多 Linux 的版 ...
Monaco Editor API 使用范例
Monaco Editor 是微软开发的一款开源在线代码编辑器.它是 VSCode 的浏览器版本, 随着近年 VSCode 大热,Monaco Editor 也逐渐走红.目前虽未登上 Online E ...
vue项目中引入monaco editor
monaco-editor概述 monaco-editor 是微软开源的一款web代码编辑器,vscode就是集成monaco-editor来实现的. 官方示例官方文档使用安装 npm安装 np ...
vue中安装sass
安装了几次,发现很坑的地方安装必须@版本号不然不行,我的node是14版本 npm install sass-loader@7.3.1 --save-dev //安装sass-loader npm i ...
在vue中安装使用vux
最近因为的工作的原因在弄vue,从后端弄到前端之前一直用js,现在第一次接触vue感觉还挺有意思的,就是自己太菜了,这个脑子呀....不太够用.....页面设计用了一个叫vux的东西,vux可以提供一 ...

Vue项目管理器中安装及使用Monaco Editor

Vue项目管理器中安装及使用Monaco Editor

1.安装

(1)安装插件

(2)安装依赖

2.配置vue.config.js文件

3.建立组件monaco.vue

4.ToEditor.vue调用monaco.vue

5.在其他组件中调用ToEditor.vue

官方地址

Vue项目管理器中安装及使用Monaco Editor相关推荐

最新文章

热门文章

Vue项目管理器中 安装及使用Monaco Editor

Vue项目管理器中 安装及使用Monaco Editor

1.安装

(1)安装插件

(2)安装依赖

2.配置vue.config.js文件

3.建立组件monaco.vue

4.ToEditor.vue调用monaco.vue

5.在其他组件中调用ToEditor.vue

官方地址

Vue项目管理器中 安装及使用Monaco Editor相关推荐

最新文章

热门文章

Vue项目管理器中安装及使用Monaco Editor

Vue项目管理器中安装及使用Monaco Editor

Vue项目管理器中安装及使用Monaco Editor相关推荐