单独封装一个基础组件：CodeEditor.vue
<template>
<div class="the-code-editor-container" ref="container"></div>
</template>
<script>
// 编辑器核心文件，按需引入语言支持文件
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
import 'monaco-editor/esm/vs/basic-languages/shell/shell.contribution'
import 'monaco-editor/esm/vs/basic-languages/sql/sql.contribution'
import 'monaco-editor/esm/vs/basic-languages/python/python.contribution'
import 'monaco-editor/esm/vs/editor/contrib/find/findController.js'
export default {
name: 'codeEditor',
props: {
options: {
type: Object,
default () {
return {
language: 'shell', // shell、sql、python
readOnly: true // 不能编辑
value: {
type: String,
default: ''
data () {
return {
monacoInstance: null,
mounted () {
this.init()
methods: {
init () {
// 初始化编辑器实例
this.monacoInstance = monaco.editor.create(this.$refs['container'], {
value: this.value,
theme: 'vs', // vs, hc-black, or vs-dark
autoIndex: true,
...this.options
// 监听编辑器content变化事件
this.monacoInstance.onDidChangeModelContent(() => {
this.$emit('contentChange', this.monacoInstance.getValue())
</script>
<style lang="less" scope>
.the-code-editor-container {
width: 100%;
height: 100%;
.monaco-editor .scroll-decoration {
box-shadow: none;
</style>
2. 使用CodeEditor组件
<template>
<div class="the-shell-container">
<h3 class="the-title">Shell脚本</h3>
<code-editor :options="options" :value="shell.content" @contentChange="contentChange" style="height: 600px"></code- editor>
</template>
<script>
import CodeEditor from '@/components/CodeEditor'
export default {
name: 'shell',
components: {
CodeEditor
props: ['shell'],
data () {
return {
options: {
language: 'shell',
readOnly: false
methods: {
// 绑定编辑器value值的变化
contentChange (val) {
this.shell.content = val
</script>
<style lang="less">
.the-shell-container {
text-align: left;
</style>
说明：本文主要介绍文本编辑器monaco-editor结合vue的使用单独封装一个基础组件：CodeEditor.vue<template> <div class="the-code-editor-container" ref="container"></div></template><script>// 编...
最近接手了一个新项目，这个项目中有一个需求点就是需要展示json，并且可能还要编辑展示代码，然后我就去调研了关于代码编辑器的有关技术，经过对比决定
使用
monaco-editor
。
提示：以下是本篇文章正文内容，下面案例可供参考
一、
monaco-editor
是什么？
monaco-editor
一款代码编辑器，是微软开源的一个web编辑器，v
cnpm install
monaco-editor
--save
cnpm install
monaco-editor
-webpack-plugin --save-dev
二，
使用
1.webpack.base.conf.js
module.exports = {
plugins: [
new MonacoWebpackPlugin()
2.子组件
<template>
<div class="myEditor">
am-editor，一个基于Web 多人协同富文本编辑器，适用于React、
Vue
（部分插件还没有
vue
版本）框架，与主流的现代浏览器兼容。
:package: 开箱即用，提供几十种丰富的插件
:clipboard: 丰富的多媒体支持，不仅支持图片和音视频，更支持插入嵌入式多媒体内容
:label: 引擎基于原生 JavaScript 开发，插件 UI 支持 React、
Vue
等框架渲染
:satellite_antenna: 内置协同编辑方案，轻量配置即可
使用
@aomao/plugin-alignment 对齐方式
@aomao/plugin-backcolor 背景色
@aomao/plugin-bold 加粗
@aomao/plugin-code 行内代码
@aomao/plugin-codelock 块级代码
@aomao/plugin-fontcolor 前景色
@aomao/plugin-fontsiz
Monaco Editor 是支持VS Code的代码编辑器 。描述代码编辑器功能的好页面在 这里。
它在 MIT 许可下获得许可，并支持 Edge、Chrome、Firefox、Safari 和 Opera。
移动浏览器或移动 Web 框架不支持 Monaco 编辑 器。
microsoft/
monaco-editor
代码仓库
二、
使用
步骤
package.json，
"
monaco-editor
": "^0.21.2",
"
monaco-editor
-webpack-
import 'codemirror/theme/ambiance.css'
import 'codemirror/lib/codemirror.css'
import 'codemirror/addon/hint/show-hint.css'
const ...
mounted() {
// 创建 Monaco Editor 实例
this.editor = monaco.editor.create(this.$refs.editorContainer, {
value: 'Hello,
Vue
!',
language: 'javascript',
beforeUnmount() {
// 销毁 Monaco Editor 实例
this.editor.dispose();
</script>
<style>
/* 可以根据需要设置样式 */
</style>
3. 在你的 Vite 配置文件中，添加对 Monaco Editor 的引用：
```javascript
import { defineConfig } from 'vite';
import
vue
from '@vitejs/plugin-
vue
';
export default defineConfig({
plugins: [
vue
()],
resolve: {
alias: {
// 将
monaco-editor
模块指向真实的路径
'
monaco-editor
': '
monaco-editor
/esm/vs/editor/editor.api.js',
这样，你就可以在
Vue
3 + Vite 中
使用
Monaco Editor 了。记得根据需要调整引入的语言和样式。
