安装1: 建议使用最新的版本

​

npm install monaco-editor --save

安装2: 建议使用最新的版本

npm install monaco-editor-webpack-plugin --save   //必须局部安装,不能全局安装否则会导致代码不高亮,不补全

​ 配置 , 网上找的配置基本都是报错,原因在引入的位置相关 , 根据摸爬滚打后,需要在2个文件分别引入

​ 我用的是vue的 ant design vue pro 框架 3.0.0

配置① vue.config.js

​ 注意 , 这个配置 文件本身 框架就有的了, 我只添加了 new MonacoWebpackPlugin()

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
// vue.config.js
const vueConfig = {
  configureWebpack: {
    // webpack plugins
    plugins: [
      // Ignore all locale files of moment.js
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
      new webpack.DefinePlugin({
        APP_VERSION: `"${require('./package.json').version}"`,
        GIT_HASH: JSON.stringify(getGitHash()),
        BUILD_DATE: buildDate
      }),
      new MonacoWebpackPlugin()
    ],
    // if prod, add externals
    externals: isProd ? assetsCDN.externals : {}
  },

配置② webstorm.config.js

​ webstorm.config.js 根目录文件 引入 ,在这里我贴原始文件

'use strict'
const webpackConfig = require('@vue/cli-service/webpack.config.js')
const MonacoWebpackPlugin = require('monaco-editor-esm-webpack-plugin');
module.exports = {
    plugins: [
        new MonacoWebpackPlugin({
            languages: ['javascript', 'json'],
            features: ['coreCommands', 'find']
        })
    ]
}
module.exports = webpackConfig

// module.exports = {
//   plugins: [
//     new MonacoWebpackPlugin({
//       languages: ['javascript', 'css', 'html', 'typescript', 'json']
//     })
//   ]
// }

代码结构

父组件

​ 部分,不需要的可以自行删除

<template>
  <div>
    <!--调用子组件-->
    <monaco ref="monaco" :opts="opts" @change="changeValue"></monaco>
    <div>
      <el-button type="primary" size="mini" @click="getValue">获取内容</el-button>
    </div>
  </div>
</template>
<script>
import monaco from './components/monaco.vue'
import { Select, Option, Button } from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
export default {
  components: {
    monaco,
    elButton: Button,
    elSelect: Select,
    elOption: Option
  },
  data () {
    return {
      sets: {
        language: { 
          javascript: 'javascript',
          json: 'json'
        },
        theme: {
          vs: 'vs',
          'vs-dark': 'vs-dark',
          'hc-black': 'hc-black'
        }
      },
      opts: {
        value: '',
        readOnly: false, // 是否可编辑 // 是否为只读模式
        language: 'javascript', // 语言类型
        theme: 'vs-dark', // 编辑器主题
        acceptSuggestionOnCommitCharacter: true, // 接受关于提交字符的建议
        acceptSuggestionOnEnter: 'on', // 接受输入建议 "on" | "off" | "smart" //-如果设置off 编辑器上的代码补全显示了,但却不补上
        accessibilityPageSize: 10, // 辅助功能页面大小 Number 说明：控制编辑器中可由屏幕阅读器读出的行数。警告：这对大于默认值的数字具有性能含义。
        accessibilitySupport: 'off', // 辅助功能支持 控制编辑器是否应在为屏幕阅读器优化的模式下运行。
        autoClosingBrackets: 'always', // 是否自动添加结束括号(包括中括号) "always" | "languageDefined" | "beforeWhitespace" | "never"
        autoClosingDelete: 'always', // 是否自动删除结束括号(包括中括号) "always" | "never" | "auto"
        autoClosingOvertype: 'always', // 是否关闭改写 即使用insert模式时是覆盖后面的文字还是不覆盖后面的文字 "always" | "never" | "auto"
        autoClosingQuotes: 'always', // 是否自动添加结束的单引号 双引号 "always" | "languageDefined" | "beforeWhitespace" | "never"
        autoIndent: 'None', // 控制编辑器在用户键入、粘贴、移动或缩进行时是否应自动调整缩进
        automaticLayout: true, // 自动布局
        foldingStrategy: 'indentation', // 折叠方式  auto | indentation
        codeLens: false, // 是否显示codeLens 通过 CodeLens，你可以在专注于工作的同时了解代码所发生的情况 – 而无需离开编辑器。 可以查找代码引用、代码更改、关联的 Bug、工作项、代码评审和单元测试。
        codeLensFontFamily: '', // codeLens的字体样式
        codeLensFontSize: 14, // codeLens的字体大小
        colorDecorators: false, // 呈现内联色彩装饰器和颜色选择器
        comments: {
          ignoreEmptyLines: true, // 插入行注释时忽略空行。默认为真。
          insertSpace: true // 在行注释标记之后和块注释标记内插入一个空格。默认为真。
        }, // 注释配置
        contextmenu: true, // 启用上下文菜单
        columnSelection: false, // 启用列编辑 按下shift键位然后按↑↓键位可以实现列选择 然后实现列编辑
        autoSurround: 'never', // 是否应自动环绕选择
        copyWithSyntaxHighlighting: true, // 是否应将语法突出显示复制到剪贴板中 即 当你复制到word中是否保持文字高亮颜色
        cursorBlinking: 'Solid', // 光标动画样式
        cursorSmoothCaretAnimation: true, // 是否启用光标平滑插入动画  当你在快速输入文字的时候 光标是直接平滑的移动还是直接"闪现"到当前文字所处位置
        cursorStyle: 'UnderlineThin', // "Block"|"BlockOutline"|"Line"|"LineThin"|"Underline"|"UnderlineThin" 光标样式
        cursorSurroundingLines: 0, // 光标环绕行数 当文字输入超过屏幕时 可以看见右侧滚动条中光标所处位置是在滚动条中间还是顶部还是底部 即光标环绕行数 环绕行数越大 光标在滚动条中位置越居中
        cursorSurroundingLinesStyle: 'all', // "default" | "all" 光标环绕样式
        cursorWidth: 2, // <=25 光标宽度
        minimap: {
          enabled: true // 是否启用预览图
        }, // 预览图设置
        folding: true, // 是否启用代码折叠
        links: true, // 是否点击链接
        overviewRulerBorder: false, // 是否应围绕概览标尺绘制边框
        renderLineHighlight: 'gutter', // 当前行突出显示方式
        roundedSelection: false, // 选区是否有圆角
        scrollBeyondLastLine: false // 设置编辑器是否可以滚动到最后一行之后
        // theme: 'vs'// vs, hc-black, or vs-dark
      }
    }
  },
  methods: {
    // 手动获取值
    getValue () {
      this.$message.info(this.$refs.monaco.getVal())
    },
    // 内容改变自动获取值
    changeValue (val) {
      console.log(val)
    }
  }
}
</script>

子组件

还可以配置很多的具体地址

https://microsoft.github.io/monaco-editor/api/modules/monaco.editor.html

<template>
  <div ref="container" class="monaco-editor" :style="`height: ${height}px`"></div>
</template>

<script>
// import * as monaco from 'monaco-editor'
// import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js'
// import '@/components/monaco-editor/basic-languages/javascript/javascript.js'
// import '@/components/monaco-editor/basic-languages/javascript'
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js'
import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution' // 代码高亮
import 'monaco-editor/esm/vs/editor/contrib/find/findController.js' // 引入查找控件
export default {
  name: 'AcMonaco',
  props: {
    opts: {
      type: Object,
      default () {
        return {}
      }
    },
    height: {
      type: Number,
      default: 300
    }
  },
  data () {
    return {
      // 主要配置 这里的配置只是 默认基础配置 , 一般在父组件的 data 里配置就可以了  ,子组件这里不配置都可以
      defaultOpts: {
      folding: true, // 是否启用代码折叠
      links: true, // 是否点击链接
      overviewRulerBorder: false, // 是否应围绕概览标尺绘制边框
      renderLineHighlight: 'gutter', // 当前行突出显示方式
      roundedSelection: false, // 选区是否有圆角
      scrollBeyondLastLine: false, // 设置编辑器是否可以滚动到最后一行之后
      readOnly: false, // 是否为只读模式
      theme: 'vs'// vs, hc-black, or vs-dark
      }
    }
  },
  watch: {
    opts: {
      handler (n) {
        this.init()
      },
      deep: true
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      // 初始化container的内容，销毁之前生成的编辑器
      this.$refs.container.innerHTML = ''

      this.editorOptions = Object.assign(this.defaultOpts, this.opts)
      // 生成编辑器对象 this.$refs.container
      this.monacoEditor = monaco.editor.create(this.$refs.container, this.editorOptions)
      // 编辑器内容发生改变时触发
      this.monacoEditor.onDidChangeModelContent(() => {
        this.$emit('change', this.monacoEditor.getValue())
      })
    },
    // 供父组件调用手动获取值
    getVal () {
      return this.monacoEditor.getValue()
    }
  }
}
</script>

报错 Error: Unexpected usage

​ 根本原因在于 vue 文件中默认引入的 monaco-editor 问题

import * as monaco from 'monaco-editor' //引入这个后面会有很多意想不到的报错

​ 解决方法,是引入 editor.api.js文件

import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js'

​ 错误的复现

ncaught (in promise) Error: Unexpected usage
at EditorSimpleWorker.loadForeignModule (editorSimpleWorker.js?ccf6:459)
at eval (webWorker.js?af50:38)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cOMNLr4z-1632470632715)(C:\Users\chentao\AppData\Roaming\Typora\typora-user-images\image-20210924110208934.png)]

代码 语法不高亮

​ 直接引入 高亮语法文件即可 (我的是在子组件引入的)

import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution' // 代码高亮

编辑器拥有查找控件

​ 直接引入 控件文件即可

import 'monaco-editor/esm/vs/editor/contrib/find/findController.js' // 引入查找控件

]

代码 语法不高亮

​ 直接引入 高亮语法文件即可 (我的是在子组件引入的)

import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution' // 代码高亮

编辑器拥有查找控件

​ 直接引入 控件文件即可

import 'monaco-editor/esm/vs/editor/contrib/find/findController.js' // 引入查找控件
# vue.js # javascript # node.js
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue