monaco编辑器使用方法
monaco
微软之前有个项目叫做Monaco Workbench，后来这个项目变成了VSCode，而Monaco Editor就是从这个项目中成长出来的一个web编辑器，他们很大一部分的代码（monaco-editor-core）都是共用的，所以monaco和VSCode在编辑代码，交互以及UI上几乎是一摸一样的，有点不同的是，两者的平台不一样，monaco基于浏览器，而VSCode基于electron，所以功能上VSCode更加健全，并且性能比较强大。,[Monaco Editor GitHub地址](https://github.com/Microsoft/monaco-editor)1.安装monaco
npm install monaco-editor -S
npm install monaco-editor-webpack-plugin -S
再vue.config.js中引入monaco-editor-webpack-plugin (monaco是基于本地工作的,即:file://,所以在web端需要替换为http://,引入monaco-editor-plugin即可达到这个效果)
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
// 自定义webpack配置
configureWebpack: {
output: {
library: `${
name}`,
libraryTarget: 'umd',// 把子应用打包成 umd 库格式
jsonpFunction: `webpackJsonp_${
name}`,
},
plugins: [
new MonacoWebpackPlugin()
]
},
2.引入并使用monaco
html
<div ref="container">
</div>
js
import * as monaco from 'monaco-editor';
//create [options参数官网地址](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.istandaloneeditorconstructionoptions.html)
this.monacoEditor=monaco.editor.create(this.$refs.container,{
value:`console.log("hello,world")`,
language:"javascript",
theme: 'vs-dark', // 编辑器主题：vs, hc-black, or vs-dark，更多选择详见官网
editorOptions: {
automaticLayout: true, // 自动布局,
autoIndent:true//自动缩进
} // 同codes
})
3.监听事件
监听内容被修改：onDidChangeModelContent
this.monacoEditor.onDidChangeModelContent((e) => {
console.log(e)
});
监听blur事件
this.monacoEditor.onDidBlurEditor((e) => {
console.log(e);
});
监听resize
//编辑器随窗口自适应
window.addEventListener('resize',function(){
initEditor();//重新初始化monacoEditor对象
})
4. 部分api
- 获取输入内容
this.xxx = this.monacoEditor.getValue() - 切换格式动态修改 language方法 :
this.monacoEditor.setModelLanguage(this.monacoEditor.getModel(), language); - 动态设置主题颜色
this.monacoEditor.setTheme('xxxxxx')
5.代码格式校验
比如:{name:"zzz"} text 不会提示无法错误,而json提示语法有误(正确应为{"name":"zzz"})引入nacos的校验文件,代码如下:
nacos GitHub地址
/*
* Copyright 1999-2018 Alibaba Group Holding Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import * as yamljs from 'yamljs';
/**
* 校验一个配置项
*/
function validateProperty(property) {
const {
length } = property;
let keyLen = 0;
let valueStart = length;
let hasSep = false;
let precedingBackslash = false;
let c;
// 解析 key
while (keyLen < length) {
c = property[keyLen];
if ((c === '=' || c === ':') && !precedingBackslash) {
valueStart = keyLen + 1;
hasSep = true;
break;
}
if ((c === ' ' || c === '\t' || c === '\f') && !precedingBackslash) {
valueStart = keyLen + 1;
break;
}
if (c === '\\') {
precedingBackslash = !precedingBackslash;
} else {
precedingBackslash = false;
}
keyLen++;
}
// 解析 value
while (valueStart < length) {
c = property[valueStart];
if (c !== ' ' && c !== '\t' && c !== '\f') {
if (!hasSep && (c === '=' || c === ':')) {
hasSep = true;
} else {
break;
}
}
valueStart++;
}
return (
validateKeyOrValueForProperty(property, 0, keyLen) &&
validateKeyOrValueForProperty(property, valueStart, length)
);
}
function validateKeyOrValueForProperty(property, start, end) {
// check null
if (start >= end) {
return false;
}
let index = 0;
let c;
while (index < property.length) {
c = property[index++];
if (c !== '\\') {
continue;
}
c = property[index++];
// check backslash
if (!isPropertyEscape(c)) {
return false;
}
// check Unicode
if (c === 'u') {
const unicode = property.slice(index, index + 4).join('');
if (unicode.match(/^[a-f0-9]{4}$/i) === null) {
return false;
}
index += 4;
}
}
return true;
}
function isPropertyEscape(c = '') {
return 'abfnrt\\"\'0! #:=u'.includes(c);
}
export default {
/**
* 检测json是否合法
*/
validateJson(str) {
try {
return !!JSON.parse(str);
} catch (e) {
return false;
}
},
/**
* 检测xml和html是否合法
*/
validateXml(str) {
try {
if (typeof DOMParser !== 'undefined') {
const parserObj =
new window.DOMParser()
.parseFromString(str, 'application/xml')
.getElementsByTagName('parsererror') || {
};
return parserObj.length === 0;
} else if (typeof window.ActiveXObject !== 'undefined') {
const xml = new window.ActiveXObject('Microsoft.XMLDOM');
xml.async = 'false';
xml.loadXML(str);
return xml;
}
} catch (e) {
return false;
}
},
/**
* 检测yaml是否合法
*/
validateYaml(str) {
try {
return yamljs.parse(str);
} catch (e) {
return false;
}
},
/**
* 检测属性是否正确
*/
validateProperties(str = '') {
let isNewLine = true;
let isCommentLine = false;
let isSkipWhiteSpace = true;
let precedingBackslash = false;
let appendedLineBegin = false;
let skipLF = false;
let hasProperty = false;
let property = [];
for (let i = 0; i < str.length; i++) {
const c = str[i];
if (skipLF) {
skipLF = false;
if (c === '\n') {
continue;
}
}
// 跳过行首空白字符
if (isSkipWhiteSpace) {
if (c === ' ' || c === '\t' || c === '\f') {
continue;
}
if (!appendedLineBegin && (c === '\r' || c === '\n')) {
continue;
}
appendedLineBegin = false;
isSkipWhiteSpace = false;
}
// 判断注释行
if (isNewLine) {
isNewLine = false;
if (c === '#' || c === '!') {
isCommentLine = true;
continue;
}
}
if (c !== '\n' && c !== '\r') {
property.push(c);
if (c === '\\') {
precedingBackslash = !precedingBackslash;
} else {
precedingBackslash = false;
}
continue;
}
// 跳过注释行
if (isCommentLine || property.length === 0) {
isNewLine = true;
isCommentLine = false;
isSkipWhiteSpace = true;
property = [];
continue;
}
// 处理转移字符
if (precedingBackslash) {
property.pop();
precedingBackslash = false;
isSkipWhiteSpace = true;
appendedLineBegin = true;
if (c === '\r') {
skipLF = true;
}
continue;
}
// 解析出配置项
// 进行校验
if (!validateProperty(property)) {
return false;
}
hasProperty = true;
property = [];
isNewLine = true;
isSkipWhiteSpace = true;
}
// 校验最后一行
if (property.length > 0 && !isCommentLine) {
return validateProperty(property);
}
return hasProperty;
},
/**
* 根据类型验证类型
*/
validate({
content, type }) {
const validateObj = {
json: this.validateJson,
xml: this.validateXml,
'text/html': this.validateXml,
html: this.validateXml,
properties: this.validateProperties,
yaml: this.validateYaml
};
if (!validateObj[type]) {
return true;
}
return validateObj[type](content);
}
};
创建validateContent.js后,在代码内引入
import validateContent from '@/utils/validateContent';
if (validateContent.validate({
content: this.queryFormData.content, type: xxxx })) {
//type xml text json 等
console.log('格式没问题逻辑');
} else {
console.log('提示格式错误');
}