monaco-vue3-editor

Monaco Editor Vue3

Monaco Editor is the code editor that powers VS Code, now it's available as a Vue3 component

Install

monaco-vue3-editor 依赖

{
  "peerDependencies": {
    "bkui-vue": "^0.0.2-beta.25",
    "monaco-editor": "^0.41.0",
    "vue": "^3.2.37"
  }
}

monaco-promql 根据项目情况添加

npm i monaco-vue3-editor monaco-editor

开启辅助功能

安装monaco-editor-webpack-plugin这个模块。

npm install monaco-editor-webpack-plugin

在webpack.config.js中进行配置，MonacoWebpackPlugin可以接受language和features来配置辅助功能，具体配置参数可以查看npm官网即可。

webpack

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

module.exports = {
    plugins: [
        new MonacoWebpackPlugin()
    ]
}

vue-cli bkui-cli

module.exports = {
    configureWebpack(_webpackConfig) {
        webpackConfig = _webpackConfig;
        webpackConfig.plugins.push(
            new MonacoWebpackPlugin({
                // available options are documented at https://github.com/Microsoft/monaco-editor-webpack-plugin#options
                languages: ['json', 'sql']
            }),
        )
    }
}

Usage

import { defineComponent, ref } from 'vue';
import MonacoEditor from 'monaco-vue3-editor';

export default defineComponent({
  name: 'Demo',
  setup() {
    const formData = ref({
      query_text: 'select * from andy',
    });
    return {
      formData,
    };
  },
  render() {
    return (
            <div class='full-page'>
                <div>title</div>
                <div style='height:400px;'>
                    <MonacoEditor
                        theme='vs-dark'
                        language='sql'
                        v-model={this.formData.query_text}
                    />
                </div>
            </div>
    );
  },

});

Props

Event

slots

expose

 expose({
  isFull,
  style,
  editor,
  domRef,
  loading,
  clearMistake,
  formatContext,
  fullScreen,
  resize,
});

tooltips

tools tooltips

function getTooltips() {
      if (props?.tooltips) {
        return props.tooltips;
      }
      const currentLang = props?.currentLang ?? localStorage.getItem('blueking_language');

      if (currentLang === 'en') {
        return {
          format: 'Format',
          fullScreen: 'Full Screen',
          exitScreen: 'Exit Full Screen',
          adjustFontSize: 'Adjusting the font size',
        };
      }
      return {
        format: '格式化',
        fullScreen: '全屏',
        exitScreen: '退出全屏',
        adjustFontSize: '调整字号大小',
      };
    }