# vue-monaco-editor-pro > vue-monaco-editor-pro 是基于 Monaco editor 开发的简易版 web 端代码编辑器 Vue 组件。 Latest version **0.1.6** (published 2021-07-24) · ISC license · 0 weekly downloads ## Install ```sh npm install vue-monaco-editor-pro pnpm add vue-monaco-editor-pro yarn add vue-monaco-editor-pro bun add vue-monaco-editor-pro ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.1.6 | | Published | 2021-07-24 | | First published | 2021-06-12 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 5 | | Unpacked size | 79.9 KB | | Known vulnerabilities | 0 (+1 in 1 direct dependencies) | | Install scripts | no | | GitHub stars | 4 | | Author | zlluGitHub | | Maintainers | zllunpm | | Keywords | editor, vue, vuejs, monaco-editor, code | ## Links - npm: https://www.npmjs.com/package/vue-monaco-editor-pro - Repository: https://github.com/zlluGitHub/vue-monaco-editor-pro - Homepage: https://github.com/zlluGitHub/vue-monaco-editor-pro#readme - Issues: https://github.com/zlluGitHub/vue-monaco-editor-pro/issues - npm.io page: https://npm.io/package/vue-monaco-editor-pro ## Dependencies (5) - [vue](https://npm.io/package/vue.md) ^2.6.11 - [core-js](https://npm.io/package/core-js.md) ^3.6.5 - [font-awesome](https://npm.io/package/font-awesome.md) ^4.7.0 - [monaco-editor](https://npm.io/package/monaco-editor.md) ^0.24.0 - [monaco-editor-webpack-plugin](https://npm.io/package/monaco-editor-webpack-plugin.md) ^3.1.0 ## Alternatives - [flatbuffers](https://npm.io/package/flatbuffers.md) — 6.0M weekly downloads - [jwt-simple](https://npm.io/package/jwt-simple.md) — 259.5K weekly downloads - [@exodus/patch-broken-hermes-typed-arrays](https://npm.io/package/@exodus/patch-broken-hermes-typed-arrays.md) — 28.5K weekly downloads - [@native-to-anchor/buffer-layout](https://npm.io/package/@native-to-anchor/buffer-layout.md) — 12.2K weekly downloads - [binary-parser-encoder](https://npm.io/package/binary-parser-encoder.md) — 5.3K weekly downloads ## Recent versions - 0.1.6 (latest) — 2021-07-24 - 0.1.5 — 2021-06-15 - 0.1.3 — 2021-06-15 - 0.1.2 — 2021-06-13 - 0.1.1 — 2021-06-13 - 0.0.4 — 2021-06-12 - 0.0.3 — 2021-06-12 - 0.0.2 — 2021-06-12 - 0.0.1 — 2021-06-12 ## README # vue-monaco-editor-pro `vue-monaco-editor-pro` 是基于 `Monaco editor` 开发的简易版 `web` 端代码编辑器 `Vue` 组件。如在使用中若遇到问题可以提交 issues 。 ## 预览图 ![预览图](./demo.png) ## 安装 ```bash npm install vue-monaco-editor-pro --save ``` ## 快速使用 ```html ``` ## 编辑器配置 在 `vue.config.js` 中添加如下代码，若没有则新建。（vue-cli3.0） ```js const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin') module.exports = { chainWebpack: config => { config.plugin('monaco-editor').use(MonacoWebpackPlugin, [ { languages: ['json', 'go', 'css', 'html', 'java', 'javascript', 'less', 'markdown', 'mysql', 'php', 'python', 'scss', 'shell', 'redis', 'sql', 'typescript', 'xml'], // 以下为全部支持的代码语言，可根据需求添加 // ['abap', 'apex', 'azcli', 'bat', 'cameligo', 'clojure', 'coffee', 'cpp', 'csharp', 'csp', 'css', 'dart', 'dockerfile', 'ecl', 'fsharp', 'go', 'graphql', 'handlebars', 'hcl', 'html', 'ini', 'java', 'javascript', 'json', 'julia', 'kotlin', 'less', 'lexon', 'lua', 'm3', 'markdown', 'mips', 'msdax', 'mysql', 'objective-c', 'pascal', 'pascaligo', 'perl', 'pgsql', 'php', 'postiats', 'powerquery', 'powershell', 'pug', 'python', 'r', 'razor', 'redis', 'redshift', 'restructuredtext', 'ruby', 'rust', 'sb', 'scala', 'scheme', 'scss', 'shell', 'solidity', 'sophia', 'sql', 'st', 'swift', 'systemverilog', 'tcl', 'twig', 'typescript', 'vb', 'xml', 'yaml'], features: ['format', 'find', 'contextmenu', 'gotoError', 'gotoLine', 'gotoSymbol', 'hover' , 'documentSymbols'] // 以下为全部功能模块，可根据需求添加 // ['accessibilityHelp', 'anchorSelect', 'bracketMatching', 'caretOperations', 'clipboard', 'codeAction', 'codelens', 'colorPicker', 'comment', 'contextmenu', 'coreCommands', 'cursorUndo', 'dnd', 'documentSymbols', 'find', 'folding', 'fontZoom', 'format', 'gotoError', 'gotoLine', 'gotoSymbol', 'hover', 'iPadShowKeyboard', 'inPlaceReplace', 'indentation', 'inlineHints', 'inspectTokens', 'linesOperations', 'linkedEditing', 'links', 'multicursor', 'parameterHints', 'quickCommand', 'quickHelp', 'quickOutline', 'referenceSearch', 'rename', 'smartSelect', 'snippets', 'suggest', 'toggleHighContrast', 'toggleTabFocusMode', 'transpose', 'unusualLineTerminators', 'viewportSemanticTokens', 'wordHighlighter', 'wordOperations', 'wordPartOperations'] } ]) } } ``` ## Props属性 | 属性值 | 类型 | 默认值 | 描述 | |:--------------|:--------------|:--------------------------------------------------------------------------------------------------------------------------------------------------------|:----------------------------------------------------------------------------------------------------------------------------------------| | languageModal | Array | ['json', 'go', 'css', 'html', 'java', 'javascript', 'less', 'markdown', 'mysql', 'php', 'python', 'scss', 'shell', 'redis', 'sql', 'typescript', 'xml'] | 代码语言模块 | | language | String | `javascript` | 代码语言 | | height | Number/String | `100%` | 编辑器高度 | | width | Number/String | `100%` | 编辑器宽度 | | diffEditor | Boolean | false | 是否开启 diff 模式 | | original | String | null | diff 内容（只有在diff模式下有效） | | content | String | null | 内容 | | theme | String | `vs-dark` | 主题（hc-black、vs-dark、vs-light） | | options | Object | {} | 可查看：[Monaco Editor Options](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.ieditorconstructionoptions.html) | ## 方法属性 | 属性值 | 返回值 | 描述 | |:----------------|:---------------|:-------------------| | on-before-mount | monaco | 编辑器挂载之前 | | on-mounted | editor, monaco | 编辑器挂载之后 | | on-change | value, event | 内容改变后触发 | | on-input | value | 内容改变后触发 | | on-save | value | 保存点击按钮时触发（ ctrl + s ） | --- _Source: https://npm.io/package/vue-monaco-editor-pro · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._