monaco-editor 介绍
Momonaco-editor是微软提供的 代码 编辑器,vscode即是使用它作为编辑器。它的开发语言是ts，可以嵌入到浏览器中。
安装
npm install monaco-editor复制 代码
引用
本人写vue + webpack 较多，以此为例：
第一种写法： 使用monaco-editor-webpack-plugin
// .vue 对应的 script脚本中
import * as monaco from 'monaco-editor';
monaco.editor.create(document.getElementById('container'),{
value: [
'function x() {',
'tconsole.log(" Hello World! ");',
'}'
].join('n'),
language: 'JavaScript'
});
// 在 webpack.base.conf.js 中
// 需要安装 monaco-editor-webpack-plugin
const MonacowebpackPlugin = require('monaco-editor-webpack-plugin');
const path = require('path');
module.exports = {
...
plugins: [
new MonacowebpackPlugin()
]
};
第二种写法：
// .vue 对应的 script脚本中
import * as monaco from 'monaco-editor';
// Since packaging is done by you,you need
// to instruct the editor how you named the
// bundles that contain the web workers.
self.MonacoEnvironment = {
getWorkerUrl: function (moduleId,label) {
if (label === 'json') {
return './json.worker.bundle.js';
}
if (label === 'css') {
return './css.worker.bundle.js';
}
if (label === 'html') {
return './html.worker.bundle.js';
}
if (label === 'typescript' || label === 'JavaScript') {
return './ts.worker.bundle.js';
}
return './editor.worker.bundle.js';
}
}
monaco.editor.create(document.getElementById('container'),
language: 'JavaScript'
});
// 在 webpack.base.conf.js 中
// 不需要安装任何脚本const path = require('path');
module.exports = {
entry: {
"app": './index.js',
// Package each language's worker and give these filenames in `getWorkerUrl`
"editor.worker": 'monaco-editor/esm/vs/editor/editor.worker.js',
"json.worker": 'monaco-editor/esm/vs/language/json/json.worker',
"css.worker": 'monaco-editor/esm/vs/language/css/css.worker',
"html.worker": 'monaco-editor/esm/vs/language/html/html.worker',
"ts.worker": 'monaco-editor/esm/vs/language/typescript/ts.worker',
},
...
};
网站地址 : https://microsoft.github.io/monaco-editor/
GitHub: https://github.com/microsoft/monaco-editor
网站描述: 一个 基于浏览器的 代码 编辑器
monaco-editor官方网站
官方网站： https://microsoft.github.io/monaco-editor/
如果觉得 网站内容还不错，欢迎将 网站 推荐给程序员好友。