0.0.6 • Published 4 months ago
@vue-monaco/editor v0.0.6
@vue-monaco/editor
不需要给 webpack
(or rollup
, vite
) 等打包工具配置插件,就可以在 Vue 2&3 中使用 monaco-editor
简体中文 | English
安装
npm i @vue-monaco/editor
Vue <= 2.6.14
需要安装 @vue/composition-api.
npm i @vue-monaco/editor @vue/composition-api
Usage
Editor
<script lang="ts" setup>
import { ref, shallowRef } from 'vue'
const MONACO_EDITOR_OPTIONS = {
automaticLayout: true,
formatOnType: true,
formatOnPaste: true,
}
const code = ref('// some code...')
const editorRef = shallowRef()
const handleMount = editor => (editorRef.value = editor)
// your action
function formatCode() {
editorRef.value?.getAction('editor.action.formatDocument').run()
}
</script>
<template>
<monaco-editor
v-model:value="code"
theme="vs-dark"
:options="MONACO_EDITOR_OPTIONS"
@mount="handleMount"
/>
</template>
Diff Editor
<script lang="ts" setup>
import { ref, shallowRef } from 'vue'
const OPTIONS = {
automaticLayout: true,
formatOnType: true,
formatOnPaste: true,
readOnly: true,
}
const diffEditorRef = shallowRef()
const handleMount = diffEditor => (diffEditorRef.value = diffEditor)
// get the original value
function getOriginalValue() {
return diffEditorRef.value.getOriginalEditor().getValue()
}
// get the modified value
function getOriginalValue() {
return diffEditorRef.value.getModifiedEditor().getValue()
}
</script>
<template>
<monaco-diff-editor
theme="vs-dark"
original="// the original code"
modified="// the modified code"
language="javascript"
:options="OPTIONS"
@mount="handleMount"
/>
</template>
Props & Events & slots
Editor
Name | Type | Default | Description | remark |
---|---|---|---|---|
value | string | 当前编辑器的值,可以使用 v-model:value | v-model:value | |
language | string | 当前编辑器的语言 | monaco-editor 支持的语言查看此处 | |
path | string | 当前编辑器的路径 | ||
defaultValue | string | 当前编辑器的默认值 | ||
defaultLanguage | string | 当前编辑器的默认语言 | monaco-editor 支持的语言查看此处 | |
defaultPath | string | 当前编辑器的默认路径 | monaco.editor.createModel(..., ..., monaco.Uri.parse(defaultPath)) | |
theme | vs | vs-dark | vs | 主题 | |
line | number | 可以设置要跳到行数 | ||
options | object | {} | IStandaloneEditorConstructionOptions | |
overrideServices | object | {} | IEditorOverrideServices | |
saveViewState | boolean | true | 编辑器 model 变更后,保存 model 的视图状态(滚动位置等) | 需要给每个 model 配置唯一 path |
width | number | string | 100% | 容器宽度 | |
height | number | string | 100% | 容器高度 | |
className | string | 内层容器 class | ||
onBeforeMount | (monaco: Monaco) => void | 编辑器实例创建前执行 | ||
onMount | (editor: monaco.editor.IStandaloneCodeEditor, monaco: Monaco) => void | 编辑器实例创建后执行 | ||
onChange | (value: string \| undefined, monaco.editor.IModelContentChangedEvent) => void) => void | 编辑改变值后执行 | ||
onValidate | (markers: monaco.editor.IMarker[]) => void | 当语法发生错误时执行 | monaco-editor 支持语法校验的语言查看此处 | |
#loading | slot | 'loading...' | 加载状态 | |
#failure | slot | 'load failed' | 加载失败状态 |
Diff Editor
Name | Type | Default | Description |
---|---|---|---|
original | string | 原始值 (左边编辑器) | |
modified | string | 修改值 (右边编辑器) | |
language | string | 左右两个编辑器的语言 (monaco-editor 支持的所有语言, 点击这里查看) | |
originalLanguage | string | 此属性可以让你单独指定原始值的语言(优先级高于 language ) | |
modifiedLanguage | string | 此属性可以让你单独指定修改值的语言(优先级高于 language ) | |
originalModelPath | string | 原始值 model 的路径。作为第三个参数传递给 .createModel 方法 -- monaco.editor.createModel(..., ..., monaco.Uri.parse(originalModelPath)) | |
modifiedModelPath | string | 修改值 model 的路径。作为第三个参数传递给 .createModel 方法 -- monaco.editor.createModel(..., ..., monaco.Uri.parse(modifiedModelPath)) | |
theme | vs | vs-dark | string | vs (vs 主题就是 light 主题) | 主题 |
options | object | {} | IStandaloneDiffEditorConstructionOptions |
width | number | string | 100% | 容器宽度 |
height | number | string | 100% | 容器高度 |
className | string | 内层容器 class | |
onBeforeMount | (monaco: Monaco) => void | 编辑器实例创建前执行 | |
onMount | (editor: monaco.editor.IStandaloneDiffEditor, monaco: Monaco) => void | 编辑器实例创建后执行 | |
#loading | slot | 'loading...' | 加载状态 |
#failure | slot | 'load failed' | 加载失败状态 |
Vite
如果使用 vite
,你需要这样做(具体可查看 #1791 (comment)):
import { loader } from '@vue-monaco/editor'
import * as monaco from 'monaco-editor'
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
self.MonacoEnvironment = {
getWorker(_, label) {
if (label === 'json')
return new jsonWorker()
if (label === 'css' || label === 'scss' || label === 'less')
return new cssWorker()
if (label === 'html' || label === 'handlebars' || label === 'razor')
return new htmlWorker()
if (label === 'typescript' || label === 'javascript')
return new tsWorker()
return new editorWorker()
}
}
loader.config({ monaco })
Inspiration
源自于以下项目: