monaco-editor 简介
monaco-editor是为VS Code提供支持的代码编辑器,支持IE 11,Edge,Chrome,Firefox,Safari和Opera,兼容VS Code的快键键
安装依赖
1 2 3 4 5
| npm install monaco-editor --save npm install monaco-editor-webpack-plugin --save-dev # OR yarn add monaco-editor yarn add monaco-editor-webpack-plugin
|
在vue.config.js文件下配置
1 2 3 4 5 6 7 8 9 10 11 12
| const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");
module.exports = { configureWebpack: { plugins: [ new MonacoWebpackPlugin({ languages: ["json"], output: "./static/js/monaco-editor" }) ] } }
|
定义monaco组件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56
| <template> <div ref="container" class="monaco-editor" :style="`height: ${height}px`" ></div> </template>
<script> import * as monaco from "monaco-editor"; export default { name: "Monaco", props: { monacoOptions: { type: Object, default: () => { return { value: "", theme: "vs-dark", roundedSelection: false, autoIndent: true }; } }, height: { type: Number, default: 300 } }, mounted() { this.init(); }, methods: { init() { this.$refs.container.innerHTML = "";
this.editorOptions = this.monacoOptions; this.monacoEditor = monaco.editor.create( this.$refs.container, this.editorOptions ); this.monacoEditor.onDidChangeModelContent(() => { this.$emit("change", this.monacoEditor.getValue()); this.$emit("input", this.monacoEditor.getValue()); }); }, getVal() { return this.monacoEditor.getValue(); } } }; </script>
|
使用组件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
| <template> <div> <monaco ref="monaco" @change="handleChange" :monacoOptions="monacoOptions" v-model="monacoOptions.value" :height="580" ></monaco> </div> </template> <script> import monaco from "../../Manaco/manaco"; export default { name: "demo", data() { return { monacoOptions: { value: "", readOnly: false, language: "json", theme: "vs-dark" } }; }, components: { monaco }, methods:{ handleChange(val){ console.log(val) } } }; </script>
|