Скачать monaco vue - Скачать исходный код monaco vue

Монако-ву

Используйте monaco-editor , загруженный из CDN в Vue 2 & 3, не нужно связывать.

Английский | 简体中文

Почему

monaco-editor не очень хорошо поддерживает ESM, что приводит к большим файлам, когда код связан.

Но официальная команда написала загрузчик в ленивые файлы загрузки редактора удаленно, поэтому мы можем загрузить файлы из CDN, чтобы использовать его.

Если вы все еще хотите импортировать файлы monaco-editor из node_modules и объединить их в свой код (без использования удаленной загрузки), вам нужно будет использовать инструмент для объединения. Смотрите здесь.

Установка

npm i @guolao/vue-monaco-editor

Vue <= 2.6.14 требует установки @vue/composition-api.

npm i @guolao/vue-monaco-editor @vue/composition-api

Не забудьте зарегистрировать плагин @vue/composition-api !

 import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'

Vue . use ( VueCompositionAPI )

Конечно, вы также можете использовать UNPKG.

Использование

Глобальная регистрация

 import { createApp } from 'vue'
import { install as VueMonacoEditorPlugin } from '@guolao/vue-monaco-editor'

const app = createApp ( App )
app . use ( VueMonacoEditorPlugin , {
  paths : {
    // You can change the CDN config to load other versions
    vs : 'https://cdn.jsdelivr.net/npm/[email protected]/min/vs'
  } ,
} )

Местная регистрация

 // main.ts
import { loader } from '@guolao/vue-monaco-editor'
loader . config ( {
  paths : {
    vs : 'https://cdn.jsdelivr.net/npm/[email protected]/min/vs' ,
  } ,
} )

// editor.vue
import { VueMonacoEditor } from '@guolao/vue-monaco-editor'
export default {
  components : { VueMonacoEditor } ,
}

А потом используйте его.

Редактор

< template >
  < vue-monaco-editor
    v-model:value = " code "
    theme = " vs-dark "
    :options = " MONACO_EDITOR_OPTIONS "
    @mount = " handleMount "
  />
</ template >

< 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 editor = shallowRef ()
const handleMount = editorInstance => ( editor . value = editorInstance )

// your action
function formatCode() {
  editor . value ?. getAction ( ' editor.action.formatDocument ' ). run ()
}
</ script >

Редактор DIFF

< template >
  < vue-monaco-diff-editor
    theme = " vs-dark "
    original = " // the original code "
    modified = " // the modified code "
    language = " javascript "
    :options = " OPTIONS "
    @mount = " handleMount "
  />
</ template >

< script lang="ts" setup>
import { ref , shallowRef } from ' vue '

const OPTIONS = {
  automaticLayout: true ,
  formatOnType: true ,
  formatOnPaste: true ,
  readOnly: true ,
}

const diffEditor = shallowRef ()
const handleMount = diffEditorInstance => ( diffEditor . value = diffEditorInstance )

// get the original value
function getOriginalValue() {
  return diffEditor . value . getOriginalEditor (). getValue ()
}

// get the modified value
function getModifiedValue() {
  return diffEditor . value . getModifiedEditor (). getValue ()
}
</ script >

Реквизит и события и слоты

Редактор

Имя	Тип	По умолчанию	Описание	примечание
ценить	`string`		Значение текущей модели может использовать `v-model:value`	`v-model:value`
язык	`string`		весь язык текущей модели	Языки, поддерживаемые `monaco-editor` , просмотреть здесь
путь	`string`		Путь к текущей модели
DefaultValue	`string`		Значение по умолчанию текущей модели
defaultlanguage	`string`		Язык по умолчанию текущей модели	Языки, поддерживаемые `monaco-editor` View здесь
Defaultpath	`string`		Путь по умолчанию текущей модели	`monaco.editor.createModel(..., ..., monaco.Uri.parse(defaultPath))`
тема	`vs` \| `vs-dark`	`vs`	Тема для редактора Monaco.
линия	`number`		количество линий, чтобы прыгнуть
параметры	`object`	`{}`	IstandaloneeditorConstructionoptions
переопределение	`object`	`{}`	IeditorOverrideservices
SaveViewState	`boolean`	`true`	Сохраните состояние представления модели (положение прокрутки и т. Д.) После изменений модели	Уникальный `path` должен быть настроен для каждой модели
ширина	`number` \| `string`	`100%`	Ширина контейнера
высота	`number` \| `string`	`100%`	высота контейнера
классное имя	`string`		Имя класса внутренних контейнеров
@beforemount	`(monaco: Monaco) => void`		Выполнить до создания экземпляра редактора (не используйте `@before-mount` в Vue2, Detail)
@устанавливать	`(editor: monaco.editor.IStandaloneCodeEditor, monaco: Monaco) => void`		Выполнить после создания экземпляра редактора
@изменять	`(value: string \| undefined, event: monaco.editor.IModelContentChangedEvent) => void`		выполнить при изменении изменения значения
@validate	`(markers: monaco.editor.IMarker[]) => void`		Выполнить, когда возникает синтаксическая ошибка	`monaco-editor` поддерживает просмотр синтаксических языков здесь
`#default`	`slot`	`'loading...'`	Статус загрузки	При загрузке файлов из CDN отображение состояния загрузки будет более дружественным
`#failure`	`slot`	`'load failed'`	Статус неудачи	Пример: ошибка сети CDN

Редактор DIFF

Имя	Тип	По умолчанию	Описание
оригинал	`string`		Исходное исходное значение (левый редактор)
модифицированный	`string`		Измененное значение исходного значения (правый редактор)
язык	`string`		Язык для обеих моделей - оригинал и модифицирован (все языки, которые поддерживаются Monaco -Editor)
Originallanguage	`string`		Эта опора дает вам возможность указать язык исходного источника отдельно, в противном случае он получит ценность языкового свойства.
ModifiedLanguage	`string`		Эта опора дает вам возможность указать язык модифицированного источника отдельно, в противном случае он получит ценность языкового свойства.
OriginalModelPath	`string`		Путь для «оригинальной» модели. Будет передаваться в качестве третьего аргумента методу `.createModel` - `monaco.editor.createModel(..., ..., monaco.Uri.parse(originalModelPath))`
ModifiedModelPath	`string`		Путь для «модифицированной» модели. Будет передаваться в качестве третьего аргумента методу `.createModel` - `monaco.editor.createModel(..., ..., monaco.Uri.parse(modifiedModelPath))`
тема	`vs` \| `vs-dark` \| `string`	`vs` (тему `vs` темы - `light` тема)	Тема для редактора Monaco. Определите новые темы `monaco.editor.defineTheme` .
параметры	`object`	`{}`	ISTANDALONEIFFEDITORCORNSTRUCTIONPTIONS
ширина	`number` \| `string`	`100%`	Ширина контейнера
высота	`number` \| `string`	`100%`	Высота контейнера
классное имя	`string`		Имя класса внутренних контейнеров
@beforemount	`(monaco: Monaco) => void`		Выполнить до создания экземпляра редактора (не используйте `@before-mount` в Vue2, Detail)
@устанавливать	`(editor: monaco.editor.IStandaloneDiffEditor, monaco: Monaco) => void`		Выполнить после создания экземпляра редактора
`#default`	`slot`	`'loading...'`	Статус загрузки
`#failure`	`slot`	`'load failed'`	Статус неудачи

Крючки

useMonaco Используйте @MONACO-EDITOR/LOADER для загрузки monaco-editor из CDN.

< template >
  < div ref = " containerRef " ></ div >
</ template >

< script lang="ts" setup>
import { ref , onUnmounted , watchEffect , nextTick } from ' vue '
import { useMonaco } from ' @guolao/vue-monaco-editor '

const containerRef = ref ()
const { monacoRef, unload } = useMonaco ()

// watch once
const stop = watchEffect (() => {
  if ( monacoRef . value && containerRef . value ) {
    nextTick (() => stop ())
    monacoRef . value . editor . create ( containerRef . value , { ... })
  }
})

/*
  When the component will be unmount,
  If the monaco instance is not successfully loaded,
  You need to manually unload.
*/
onUnmounted (() => ! monacoRef . value && unload ())
</ script >

CDN

vue-monaco-editor Используйте @MONACO-EDITOR/LOADER для загрузки monaco-editor из CDN (процесс загрузки loader является асинхронным).

Конфигурация loader является глобальной, только для того, чтобы быть настроенной один раз.

 import { createApp } from 'vue'
import { install as VueMonacoEditorPlugin } from '@guolao/vue-monaco-editor'

const app = createApp ( App )
app . use ( VueMonacoEditorPlugin , {
  paths : {
    // You can change the CDN config to load other versions
    vs : 'https://cdn.jsdelivr.net/npm/[email protected]/min/vs'
  } ,
} )

 import { loader } from "@guolao/vue-monaco-editor"

// loaded from CDN
loader . config ( {
  paths : {
    vs : 'https://cdn.jsdelivr.net/npm/[email protected]/min/vs'
  } ,
} )

// configurable for different languages
loader . config ( { "vs/nls" : { availableLanguages : { "*" : "de" } } } )

// or
loader . config ( {
  paths : {
    vs : "..." ,
  } ,
  "vs/nls" : {
    availableLanguages : {
      "*" : "de" ,
    } ,
  } ,
} )

Пакет NPM

 import * as monaco from "monaco-editor"
import { loader } from "@guolao/vue-monaco-editor"

// loaded monaco-editor from `node_modules`
loader . config ( { monaco } )

Просие

Если вы используете vite , вам нужно сделать это (для получения подробной информации см. 1791 (комментарий)).

 import { loader } from "@guolao/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 } )

Обрушение

Если вы используете Rollup , вы можете использовать сообщество, предоставленное плагином, плагин-плугин-монако-редактор.

Webpack

Если вы используете webpack , monaco-editor официально предоставляет плагин webpack под названием Monaco-Editor-Webpack-Plugin, который вы можете установить и использовать.