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/
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。