vue中使用monaco-editor(代码编辑器)

原创已于 2023-11-14 11:31:33 修改 · 1.8k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #编辑器 #前端

于 2023-11-14 11:26:58 首次发布

本文详细介绍了如何在Vue项目中安装和配置MonacoEditor，包括使用npm安装插件、在webpack和Vite项目中集成，以及如何在组件中设置和操作编辑器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、安装

npm i monaco-editor

2、webpack项目配置

借助monaco-editor-webpack-plugin插件，它会帮我们做这么⼏件事

⾃动注⼊getWorkerUrl全局变量
处理worker的编译配置
⾃动引⼊控件和语⾔包

安装依赖

npm install monaco-editor-webpack-plugin -S

修改vue.config.ts

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

module.exports = {
  // other configurations
  configureWebpack: {
    plugins: [
      new MonacoWebpackPlugin({
        languages: ['javascript', 'css', 'html', 'typescript', 'json'] // available options are documented at https://github.com/Microsoft/monaco-editor-webpack-plugin#options
        // features:["coreCommands","find"]
      })
    ]
  }
}

3、使用

<div ref="monacoRef" style="width: 100%; height: 300px"></div>

<script setup>
import { onMounted, reactive, ref, watch, nextTick, toRaw } from 'vue';
import * as monaco from 'monaco-editor';


const monacoEditor = ref();
const monacoRef = ref();
const monacoParams = {
  theme: 'vs-dark', // 主题
  value: '', // 默认显示的值
  language: 'json',
  folding: true, // 是否折叠
  foldingHighlight: true, // 折叠等高线
  foldingStrategy: 'indentation', // 折叠方式  auto | indentation
  showFoldingControls: 'always', // 是否一直显示折叠 always | mouseover
  disableLayerHinting: true, // 等宽优化
  emptySelectionClipboard: false, // 空选择剪切板
  selectionClipboard: false, // 选择剪切板
  automaticLayout: true, // 自动布局
  codeLens: false, // 代码镜头
  scrollBeyondLastLine: false, // 滚动完最后一行后再滚动一屏幕
  colorDecorators: true, // 颜色装饰器
  accessibilitySupport: 'off', // 辅助功能支持  "auto" | "off" | "on"
  lineNumbers: 'on', // 行号 取值： "on" | "off" | "relative" | "interval" | function
  lineNumbersMinChars: 5, // 行号最小字符   number
  enableSplitViewResizing: false,
  readOnly: true, //是否只读  取值 true | false
  wordWrap: 'on', //启用自动换行
};

const initMonaco = () => {
  monacoEditor.value = monaco.editor.create(monacoRef.value, monacoParams);
};
onMounted(() => {
  nextTick(initMonaco());
});
</script>

内置方法

获取编辑器内容

toRaw(monacoEditor.value).getValue();

设置编辑器内容

const resultData = `111`
toRaw(monacoEditor.value).setValue(resultData);

如果是vite项目第二步则改为下

安装vite-plugin-monaco-editor

npm i vite-plugin-monaco-editor -save

修改vite.config.ts

import { defineConfig } from 'vite';
import { fileURLToPath, URL } from 'node:url';
import path from 'path';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
console.log([path.resolve(process.cwd(), './node_modules/@tencent/yui-plus/src/assets/svg/icons')]);
import monacoEditorPlugin from 'vite-plugin-monaco-editor';
// https://vitejs.dev/config/
export default defineConfig({
  server: {
    fs: {
      // Allow serving files from one level up to the project root
      allow: ['../../'],
    },
  },
  plugins: [
    vue(),
    vueJsx(),
    createSvgIconsPlugin({
      // 指定需要缓存的图标文件夹
      iconDirs: [path.resolve(process.cwd(), './node_modules/@tencent/yui-plus/src/assets/svg/icons'),
        path.resolve(process.cwd(), './src/assets/svg/icons')],
      // 指定symbolId格式
      symbolId: 'icon-[name]',
    }),
    monacoEditorPlugin({ languages: ['javascript', 'typescript', 'html', 'css', 'json'] }),
    // new MonacoWebpackPlugin({ languages: ['javascript', 'typescript', 'html', 'css', 'json'] }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      vuedraggable: fileURLToPath(new URL('./node_modules/vuedraggable', import.meta.url)),
    },
  },
  css: {
    preprocessorOptions: {
      // scss: {
      //   additionalData: `$injectedColor: orange;`,
      // },
      less: {
        javascriptEnabled: true,
      },
    },
  },
  base: '/',
});