大家好，又见面了，我是你们的朋友全栈君。

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

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

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.cn/170428.html原文链接：https://javaforall.cn