vue-monaco-webpack
v1.0.1
Published
vue版的monaco编辑器,可以利用jsonSchema进行校验
Downloads
7
Maintainers
Readme
vue-monaco-webpack
Based of vue-monaco-editor
简介
基于monaco-editor改造成支持vue版本,并且使用webpack通用打包工具,最重要是如果编辑的是json, 支持json-schema的校验。
安装
npm install vue-monaco-webpack --save
基础用法
import MonacoEditor from 'vue-monaco-webpack'
// use in component
export default {
components: {
MonacoEditor
}
}
组件支持传递的属性
| Option | Type | Default | Description
|:-------------|:-------------|:-------|:-------|
| language | String | javascript
| |
| height | Number/String | 100%
||
| width | Number/String | 100%
||
| code | String | // code \n
| Initial code to show |
| theme | String | vs-dark
| vs, hc-black, or vs-dark |
| jsonSchemas | Array[Object] | schema的格式见代码实例 | json-schemas|
|srcPath|String|/dist|monoca-editor最终被打包到的文件夹
| changeThrottle | Number(ms) | 0
| throttle codeChange
emit |
| editorOptions | Object | Merged with defaults below | See Monaco Editor Options |
编辑器默认选项
defaults: {
selectOnLineNumbers: true,
roundedSelection: false,
readOnly: false,
cursorStyle: 'line',
automaticLayout: false,
glyphMargin: true
}
组件支持的事件
| Event | Returns | Description
|:-------------|:-------------|:-------|
|mounted|editor
[editor instance]|Emitted when editor has mounted|
|codeChange|editor
[editor instance]|Emitted when code has changed|
使用实例
Component Implementation
<MonacoEditor
height="600"
language="typescript"
:code="code"
:editorOptions="options"
:jsonSchemas="jsonSchemas"
@mounted="onMounted"
@codeChange="onCodeChange"
>
</MonacoEditor>
Parent
//如果需要json-schemas来校验,需要引入json-schema,json-schema中必须有$id属性
const jsonSchemas=[require('test1.json'),require('test2.json')]
module.exports = {
components: {
Monaco
},
data() {
return {
code: '// Type away! \n',
options: {
},
jsonSchemas//不是必传,用于json校验
};
},
methods: {
onMounted(editor) {
this.editor = editor;
},
onCodeChange(editor) {
console.log(editor.getValue());
}
}
};
Webpack使用
默认情况下,monaco-editor通过cdn的方式require,如果使用webpack的话,我们需要把依赖的monaco-editor拷贝到最终打包的目录,保证能正确引用到。
npm install copy-webpack-plugin --save-dev
Add this to your webpack.config.js:
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
plugins: [
new CopyWebpackPlugin([
{
from: 'node_modules/monaco-editor/min/vs',
to: 'vs',
}
])
]
};
srcPath
注意填上最终打包后的文件夹名称
开发方式
git clone [this repo] .
npm install
npm run dev
Edit src/App.vue
说明
使用方法,可参见src/Monaco.vue 中使用方式
特色
支持可通过配置jsonSchemas,对编辑的json进行校验