monaco-code

基于 monaco-editor Vue 版本编辑器

在线示例

请查看

monaco-code

安装

cnpm i monaco-code

使用方法

<template>
  <MonacoCodeEditor :value="...">
</template>

<script>
  import MonacoCode from "monaco-code"
  Vue.use(MonacoCode)
</script>

or

<template>
  <MonacoCodeEditor :value="...">
</template>

<script>
  import { MonacoCodeEditor } from "monaco-code"
  Vue.component("MonacoCodeEditor", MonacoCodeEditor)
</script>

参数说明

value, language, theme 这些参数优先级更高，会覆盖 options 里相同字段

参数	说明	类型	默认值
value	初始值	string
language	语言	string	javascript | json | html 默认 javascript
height	初始值	string
width	初始值	string
theme	主题	string	vs | vs-dark | hc-black 默认 vs
options	配置项	object	参考下文

options 参数

参数	说明	类型	默认值
theme	主题	string	vs | vs-dark | hc-black 默认 vs
value	默认显示值	string
language	语言	string	javascript | json | html 默认 javascript
fontSize	字体大小	number	14
folding	是否折叠	boolean	true
foldingHighlight	折叠等高线	boolean	true
foldingStrategy	折叠方式	string	auto | indentation 默认 indentation
showFoldingControls	是否一直显示折叠	string	always | mouseover
disableLayerHinting	等宽优化	boolean	true
emptySelectionClipboard	空选择剪切板	boolean	false
selectionClipboard	选择剪切板	boolean	false
automaticLayout	自动布局	boolean	true
autoIndent	自动锁进	boolean	true
codeLens	代码镜头	boolean	false
scrollBeyondLastLine	滚动完最后一行后再滚动一屏幕	boolean	false
colorDecorators	颜色装饰器	boolean	false
accessibilitySupport	辅助功能支持	string	auto | off | on 默认值 off
selectOnLineNumbers	显示行号	boolean	true
lineNumbers	行号	string	on | off | relative | interval | function 默认 on
lineNumbersMinChars	行号最小字符	number	5
enableSplitViewResizing	自动切换视图	boolean	false
readOnly	是否只读	boolean	false

方法说明

可供外部调用的方法

方法	说明	参数	返回值	备注
mounted	编辑器创建完成后	editor:instance	编辑器实例
setValue	设置初始值	value:string		暂不支持
setTheme	设置主题	theme:string	vs | vs-dark | hc-black	暂不支持
getValue	获取编辑器值		value:string	暂不支持
changeOptions	修改编辑器配置	options:object
setLanguage	动态修改编辑器语言	language:string		暂不支持
touchTrigger	主动触发编辑器事件	action:string		暂不支持

Vue 插件配置

需要配置插件monaco-editor-webpack-plugin才可以使用

npm i monaco-editor-webpack-plugin -D

const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin")

module.exports = {
  ...
  configureWebpack: {
    plugins: [
      new MonacoWebpackPlugin({
        languages: ["javascript", "css", "html", "typescript", "json", "xml"]
      })
    ]
  }
  ...
}