Monaco Editor is the code editor that powers VS Code, now it's available as a Vue3 component
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官网即可。
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
module.exports = {
plugins: [
new MonacoWebpackPlugin()
]
}
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']
}),
)
}
}
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>
);
},
});
Name | Type | Default | Description | remark |
---|---|---|---|---|
v-model | string |
default value of the current model | ||
language | string |
language of the current model | languages supported by monaco-editor view here |
|
theme | string |
vs-dark |
VS code theme | theme of the monaco-editor |
diffEditor | boolean |
false |
theme of the monaco-editor |
|
isShowHeader | boolean |
true |
whether show header | theme of the monaco-editor |
title | string |
`` | title content | theme of the monaco-editor |
isShowToolbox | boolean |
true |
whether show Toolbox | theme of the monaco-editor |
isShowTooltips | boolean |
true |
whether show Toolbox Tooltips | theme of the monaco-editor |
currentLang | string |
Toolbox tooltips defualt lang | theme of the monaco-editor |
|
tooltips | object |
|||
options | object |
{} |
IStandaloneEditorConstructionOptions | |
width | number |
string |
100% |
container width |
height | number |
string |
100% |
container height |
onBeforeMount | (monaco: Monaco, dom:HTMLElement) => void |
execute before the editor instance is created |
Name | Type | Default | Description | remark |
---|---|---|---|---|
onEditorMounted | (editor: monaco.editor.IStandaloneCodeEditor, monaco: Monaco,dom:HTMLElement) => void |
execute after the editor instance has been created | ||
onChange | (value: string) |
execute when the changed value change |
Name | Description |
---|---|
loading | Before Monaco init show |
tools | tools |
title | title |
expose({
isFull,
style,
editor,
domRef,
loading,
clearMistake,
formatContext,
fullScreen,
resize,
});
tools tooltips
props | value |
---|---|
format | Format |
fullScreen | Full Screen |
exitScreen | Exit Full Screen |
adjustFontSize | Adjusting the font size |
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: '调整字号大小',
};
}