Vue cli2.0 项目中使用Monaco Editor编辑器
monaco-editor 是微软出的一条开源web在线编辑器
支持多种语言,代码高亮,代码提示等功能,与Visual Studio Code 功能几乎相同。
在项目中可能会用带代码编辑功能,或者展示代码。对于习惯使用vsCode的开发者来说使用monaco-editor是非常不错的选择。
安装依赖
cnpm install monaco-editor --save cnpm install monaco-editor-webpack-plugin --save-dev //webpack 4.x 以上版本不需要执行此命令
修改webpack.base.conf.js配置文件,如图:
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
... module.exports = {
...
plugins: [
...
new MonacoWebpackPlugin()
]
};
editor组件
<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-option
v-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"></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-dark
editorOptions: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>
引用editor组件
<template>
<div>
<el-tabs type="border-card">
<el-tab-pane :lazy="true">
<span slot="label"><i class="el-icon-document"></i> HTML</span>
<MyEditor
:language="'html'"
:codes="htmlCodes"
@onMounted="htmlOnMounted"
@onCodeChange="htmlOnCodeChange" />
</el-tab-pane>
<el-tab-pane label="Javascript" :lazy="true">
<MyEditor
:language="'javascript'"
:codes="javascriptCodes"
@onMounted="javascriptOnMounted"
@onCodeChange="javascriptOnCodeChange" />
</el-tab-pane>
<el-tab-pane label="CSS" :lazy="true">
<MyEditor
:language="'css'"
:codes="cssCodes"
@onMounted="cssOnMounted"
@onCodeChange="cssOnCodeChange" />
</el-tab-pane>
</el-tabs>
</div>
</template> <script>
import MyEditor from './myEditor'
export default {
components:{
MyEditor
},
data () {
return {
htmlCodes:'<div>This is html</div>',
javascriptCodes:'console.log("This is javascript")',
cssCodes:'body{}',
htmlEditor:null,
jsEditor:null,
cssEditor:null,
}
},
methods:{
htmlOnMounted(edit){
this.htmlEditor = edit;
},
javascriptOnMounted(edit){
this.jsEditor = edit;
},
cssOnMounted(edit){
this.cssEditor = edit;
},
htmlOnCodeChange(value,event){},
javascriptOnCodeChange(value,event){},
cssOnCodeChange(value,event){},
}
}
</script> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped> </style>
效果图如下:
Vue cli2.0 项目中使用Monaco Editor编辑器的更多相关文章
- vue/cli2.0优化
vue/cli2.0 脚手架 在项目写完了之后, 运行npm run build --report可以看出这个项目的资源占比情况.可以看出整个项目哪一个资源在整个项目占比最大.它会自动打开一个可视化的 ...
- 在Vue&Element前端项目中,使用FastReport + pdf.js生成并展示自定义报表
在我的<FastReport报表随笔>介绍过各种FastReport的报表设计和使用,FastReport报表可以弹性的独立设计格式,并可以在Asp.net网站上.Winform端上使用, ...
- 在Vue&Element前端项目中,对于字典列表的显示处理
在很多项目开发中,我们为了使用方便,一般都会封装一些自定义组件来简化界面的显示处理,例如参照字典的下拉列表显示,是我们项目中经常用到的功能之一,本篇随笔介绍在Vue&Element前端项目中如 ...
- web项目中nicedit富文本编辑器的使用
web项目中nicedit富文本编辑器的使用 一.为什么要用富文本编辑器? 先说什么是富文本编辑器吧,普通的html中input或textarea标签只能进行简单的输入,而做不到其他的文本调整功能,甚 ...
- flask项目中使用富文本编辑器
flask是一个用python编写的轻量级web框架,基于Werkzeug WSGI(WSGI: python的服务器网关接口)工具箱和Jinja2模板,因为它使用简单的核心,用extension增加 ...
- vue2.0项目中使用Ueditor富文本编辑器示例
最近在vue项目中需要使用富文本编辑器,于是将Ueditor集成进来,作为公共组件. 在线预览:https://suweiteng.github.io/vue2-management-platform ...
- ASP.NET CORE MVC 2.0 项目中引用第三方DLL报错的解决办法 - InvalidOperationException: Cannot find compilation library location for package
目前在学习ASP.NET CORE MVC中,今天看到微软在ASP.NET CORE MVC 2.0中又恢复了允许开发人员引用第三方DLL程序集的功能,感到甚是高兴!于是我急忙写了个Demo想试试,我 ...
- VUE+webpack+npm项目中的RSA加解密
一.安装jsencrypt npm i jsencrypt node_modules文件夹中出现jsencrypt 二.引入jsencrypt 在main.js中import: import JsEn ...
- vue - vue-cli脚手架项目中组件的使用
在webpack-simple模板中,包括webpck模板.一个.vue文件就是一个组件. 为什么会这样呢?因为webpack干活了!webpack的将我们所有的资源文件进行打包.同时webpack还 ...
随机推荐
- Spring Cloud使用Zuul网关时报错
当开启了Eureka集群后,每创建一个服务都要往这两个集群中进行注册否则访问时会产生500
- Eclipse中Cannot nest src folder解决方法
错误示例: : Java Model Status [Cannot nest output folder 'xxx/bin/main' inside output folder 'xxx/bin'] ...
- [leetcode] 290. Word Pattern (easy)
原题 思路: 建立两个哈希表,分别保存: 1 模式 :单词 2 单词 :是否出现过 水题 /** * @param {string} pattern * @param {string} str * @ ...
- 设计模式:策略模式,Java集合定制排序的核心思想
前言 前阵子面试的时候,有个面试官问我了解哪些设计模式吗?我说了策略模式.接着他问有哪些场景应用,我又回答他jdk的集合工具类有个排序方法就用到了策略模式,也就是java.util包下的Collect ...
- 第一篇:开始进入 django 之旅
文中所有示例代码的仓库地址:https://github.com/HelloGitHub-Team/HelloDjango-blog-tutorial 开发环境说明 本教程写作时开发环境的系统平台为 ...
- 微信小程序踩坑日记2——实时访问数据库并渲染UI
0. 引言 主要讲讲对于实时访问数据库并渲染UI我的解决方法. 一开始查到了随让小程序是单线程的,但是有一个基本上是封装的worker线程,相当于可以自己自定义(类似于Android开发里的handl ...
- memset函数怎么用嘞↓↓↓
1.我也曾天真的以为 memset(a,0,sizeof(a))中的0可以用任意数替换 实际上这是错误的 memset的功能是将一快内存中的内容以单个字节逐个拷贝的方式放到指定的内存中去. 2.介绍几 ...
- 2048 控制台版(C#)
开篇 2048游戏现在很火啊,很多人应该已经玩过了.在博客园上也看见有人模仿做的GDI+版 2048游戏,鄙人暂且不做那么多动画的东西,毕竟是个小东东,在此奉上一个<控制台版2048>. ...
- 【iOS】no identity found Command /usr/bin/codesign failed with exit code 1
今天遇到了这个问题,详情如下图: 后来发现是自己脑子短路了……只添加了 Provisioning Profiles, 而忘记添加 Certificates, 就是下面的两个:
- angular6组件封装以及发布到npm
一.创建angular项目 ng new myFirstDemo //angular-cli新建项目ng g m testm //新建模块ng g c testm/headertest //新建组件 ...