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: '/',
});