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>

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('提示格式错误');
}

本文地址：https://blog.csdn.net/qq_36736475/article/details/112562226

黄山市民网：https://www.huangshanshimin.com/