燕子web代码编辑器
这是基于微软的monaco和vue封装的一个代码编辑器,浏览器可运行。主要功能有:html、javascript、css代码编辑,高亮显示,语法错误提示等,可以帮您很快的拥有一个web的代码编辑器
使用方法
使用方法
下载
npm i yanzi-monaco-editor
npm install --save monaco-editor-webpack-plugin@3.0.1
npm install --save copy-webpack-plugin@4.0.1
配置 vue.config.js
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports = {
configureWebpack:{
plugins: [
new MonacoWebpackPlugin(),
new CopyWebpackPlugin([
{
from: 'node_modules/yanzi-monaco-editor/lib/editor.worker.js',
to: 'static/js/editor.worker.js',
toType: 'file'
},
{
from: 'node_modules/yanzi-monaco-editor/lib/html.worker.js',
to: 'static/js/html.worker.js',
toType: 'file'
},
{
from: 'node_modules/yanzi-monaco-editor/lib/css.worker.js',
to: 'static/js/css.worker.js',
toType: 'file'
},
{
from: 'node_modules/yanzi-monaco-editor/lib/ts.worker.js',
to: 'static/js/ts.worker.js',
toType: 'file'
},
{
from: 'node_modules/yanzi-monaco-editor/lib/json.worker.js',
to: 'static/js/json.worker.js',
toType: 'file'
},
{
context: 'node_modules/yanzi-monaco-editor/lib/',
from: '*.umd.min.*.js',
to: 'static/js/',
toType: 'dir'
},
{
context: 'node_modules/yanzi-monaco-editor/lib/static/',
from: 'fonts',
to: 'static/js/fonts',
toType: 'dir'
}
])
]
}
}
<template>
<div id="app">
<!-- 使用示例 -->
<yanziMonacoEditor></yanziMonacoEditor>
</div>
</template>
<script>
import 'yanzi-monaco-editor/lib/yanziMonacoEditor.css' // 引入基本样式
import yanziMonacoEditor from "yanzi-monaco-editor";// 引入核心文件
export default {
name: "App",
components: {
yanziMonacoEditor //注册组件
}
};
</script>
具体使用
<yanziMonacoEditor ref="editor" :settings="settings"></yanziMonacoEditor>
属性
属性名称 | 说明 | 类型 | 必填 | 默认值 |
---|---|---|---|---|
settings | 配置 | Object | false | - |
配置列表
配置名称 | 说明 | 类型 | 必填 |
---|---|---|---|
theme | 编辑器主题 | String | false |
className | 自定义类名 | String | false |
style | 样式,包括 width 、 height | Object | false |
方法
方法名 | 说明 | 参数 |
---|---|---|
getValue | 获取编辑器最新内容 | - |
run | 执行编辑器内的代码(仅html和js可运行) | - |
完整使用示例
<template>
<div id="app">
<yanziMonacoEditor ref="editor" :settings="settings"></yanziMonacoEditor>
</div>
</template>
<script>
import 'yanzi-monaco-editor/lib/yanziMonacoEditor.css'
import yanziMonacoEditor from 'yanzi-monaco-editor'
export default {
name: 'App',
components: { yanziMonacoEditor },
data() {
return {
settings: {
theme: 'vs-dark', // vs | vs-dark | hc-black
className: '', // 自定义类名
style: {
width: '100%',
height: '100%',
},
},
}
},
methods: {
getValue() {
// 获取编辑器最新内容
let value = this.$refs.editor.getValue()
console.log(value)
},
run() {
// 运行编辑器中的代码,仅html 、javascript 可运行
this.$refs.editor.showView()
},
save() {
// 可自定义的保存操作
let value = this.$refs.editor.getValue()
console.log(value)
},
keydown() {
// 可绑定键盘事件
let that = this
document.onkeydown = function (e) {
var keyCode = e.keyCode || e.which || e.charCode
var ctrlKey = e.ctrlKey || e.metaKey
if (ctrlKey) {
switch (keyCode) {
case 82: // -- ctrl + R 运行
that.run()
e.preventDefault()
return false
case 83: // -- ctrl + S 保存
that.save()
e.preventDefault()
return false
}
}
}
},
},
mounted() {
this.keydown()
},
}
</script>
<style>
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
}
#app {
width: 100%;
height: 100%;
}
#monaco {
height: 100%;
}
</style>