大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
vue-monaco-editor
Monaco Editor Vue Component
Based off React Monaco Editor
Setup
npm install vue-monaco-editor –save
Simple Vue Use
import MonacoEditor from ‘vue-monaco-editor’
// use in component
export default {
components: {
MonacoEditor
}
}
Component Props
| 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 |
| highlighted | Array[Object] | [{ number: 0, class: ''}] |
Lines to highlight with numbers and .classes |
| changeThrottle | Number(ms) | 0 |
throttle codeChange emit |
| srcPath | String | "" |
see Webpack Use below |
| editorOptions | Object | Merged with defaults below | See Monaco Editor Options |
Editor Default Options
defaults: {
selectOnLineNumbers: true,
roundedSelection: false,
readOnly: false,
cursorStyle: ‘line’,
automaticLayout: false,
glyphMargin: true
}
Component Events
These events are available to parent component
| Event | Returns | Description |
|---|---|---|
| mounted | editor[editor instance] |
Emitted when editor has mounted |
| codeChange | editor[editor instance] |
Emitted when code has changed |
Example
Component Implementation
<MonacoEditor
height=”600″
language=”typescript”
:code=”code”
:editorOptions=”options”
@mounted=”onMounted”
@codeChange=”onCodeChange”
>
</MonacoEditor>
Parent
module.exports = {
components: {
Monaco
},
data() {
return {
code: ‘// Type away! \n’,
options: {
selectOnLineNumbers: false
}
};
},
methods: {
onMounted(editor) {
this.editor = editor;
},
onCodeChange(editor) {
console.log(this.editor.getValue());
}
}
};
Webpack Use
By default, monaco-editor is loaded from a cdn asyncronously using require. To use a local copy of monaco-editor with webpack, we need to expose the dependency in our build directory:
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’,
}
])
]
};
Then, specify the build directory path in the srcPath prop. See src/App.vue for an example.
Dev Use
git clone [this repo] .
npm install
npm run dev
Edit src/App.vue
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/170428.html原文链接：https://javaforall.net
