vue-monaco-editor的使用

一，安装

cnpm install monaco-editor --save
cnpm install monaco-editor-webpack-plugin --save-dev

二，使用

1.webpack.base.conf.js

module.exports = {plugins: [new MonacoWebpackPlugin()]
};

2.子组件

<template><div class="myEditor"><p><el-button type="success" icon="el-icon-check" circle @click="RunResult"></el-button><span class="theme" style="float:right"><el-select v-model="theme" size="mini" @change="themeChange" placeholder="请选择主题"><el-optionv-for="item in themeOption":key="item.value":label="item.label":value="item.value"></el-option></el-select></span></p><div id="container" ref="container" style="height:600px;width:500px;"></div></div>
</template>
<script>
import * as monaco from 'monaco-editor';
export default {props:{codes:{type:String,default:function(){return '<div>请编辑html内容</div>'}},language:{type:String,default:function(){return 'html'}},editorOptions:{type:Object,default:function(){return {selectOnLineNumbers: true,roundedSelection: false,readOnly: false,      // 只读cursorStyle: 'line',     //光标样式automaticLayout: false,   //自动布局glyphMargin: true,  //字形边缘useTabStops: false,fontSize: 28,        //字体大小autoIndent:true,//自动布局//quickSuggestionsDelay: 500,   //代码提示延时}}}},data(){return{themeOption:[{value:'vs',label:'默认'},{value:'hc-black',label:'高亮'},{value:'vs-dark',label:'深色'},],theme:'hc-black',codesCopy:null,//内容备份}},mounted(){this.initEditor();},methods:{initEditor(){  //初始化let self = this;self.$refs.container.innerHTML = '';self.monacoEditor = monaco.editor.create(self.$refs.container, {value:self.codesCopy || self.codes,language: self.language,theme: self.theme,//vs, hc-black, or vs-darkeditorOptions:self.editorOptions,});self.$emit('onMounted',self.monacoEditor);//编辑器创建完成回调self.monacoEditor.onDidChangeModelContent(function(event){//编辑器内容changge事件self.codesCopy = self.monacoEditor.getValue();self.$emit('onCodeChange',self.monacoEditor.getValue(),event);});//编辑器随窗口自适应window.addEventListener('resize',function(){initEditor();})},RunResult(){console.log(this.monacoEditor.getValue());},themeChange(val){`在这里插入代码片`this.initEditor();}}
}
</script>
<style scoped>#container{height:100%;text-align: left;}
</style>

3.父组件

//1.引入
import MyEditor from "@/components/Editor/EditorHtml";

 <MyEditor:language="'html'":codes="htmlCodes"@onMounted="htmlOnMounted"@onCodeChange="htmlOnCodeChange"ref="myEditor"/>

 data() {return {htmlCodes: "<div>This is html</div>",}},methods:{htmlOnMounted(edit) {this.htmlEditor = edit;},htmlOnCodeChange(value, event) {},}

需注意编辑器初始化

this.$refs.myEditor.initEditor()this.$nextTick(()=> {this.$refs.myEditor.initEditor()})

vue-monaco-editor的使用相关推荐

monaco editor + vue的配置
monaco editor是vscode的御用编辑器. 功能非常强大,使用方便轻巧,对js\ts等等语言支持都良好,能方便的扩展以支持其他语言或者自定义的特性. 夸了这么多,这里只说它一个问题: 这货 ...
Vue项目管理器中安装及使用Monaco Editor
Vue项目管理器中安装及使用Monaco Editor 记录项目开发中遇到的难题. 部分代码参考自鹰子大佬的: Monaco Editor安装及使用 1.安装 (1)安装插件搜索安装monaco插 ...
Vue中使用Monaco Editor代码编辑器
一.安装依赖 npm install editor@1.0.0 npm install monaco-editor@0.19.3 npm install monaco-editor-webpack-p ...
vue项目中引入monaco editor
monaco-editor概述 monaco-editor 是微软开源的一款web代码编辑器,vscode就是集成monaco-editor来实现的. 官方示例官方文档使用安装 npm安装 np ...
Monaco Editor (vite/webpack + ts + vue项目使用)
1.什么是Monaco Editor?Monaco Editor 微软之前有个项目叫做Monaco Workbench,后来这个项目变成了VSCode,而Monaco Editor(就是从这个项目中成 ...
Monaco Editor结合Vue搭建好用的json格式化网站
Monaco Editor github地址安装 > npm install monaco-editor 然后导入monaco import * as monaco from "mo ...
linux终端怎么设置monaco,Monaco Editor 使用指南
为什么要写这篇文章? 最近开发了一个简单的在线代码编辑器,基于 Monaco Editor 实现,没有了解过 Monaco 的人可能不知道,我们常用的 VS Code 也是基于它实现的~ 回到正题,M ...
在线代码编辑器：Monaco Editor
monaco editor是微软开源的一款web版代码编辑器.它支持智能提示,代码高亮,代码格式化. Monaco Editor是为VS Code提供支持的代码编辑器,运行在浏览器环境中.编辑器提供代 ...
代码编辑器之monaco editor
MonacoEditor编辑器 (一)简介底层vscode开发的一款编辑器,各方面的样式功能基本与vscode一致. (二)官方文档 Monaco Editor (microsoft.github. ...
手把手教你实现在Monaco Editor中使用VSCode主题
背景笔者开源了一个小项目code-run,类似codepen的一个工具,其中代码编辑器使用的是微软的Monaco Editor,这个库是直接从VSCode的源码中生成的,只不过是做了一点修改让它支持 ...

vue-monaco-editor的使用

一，安装

二，使用

vue-monaco-editor的使用相关推荐

最新文章

热门文章