项目中本来使用的是codemirror,但是index.html中需要引入很多js和css,使用起来感觉不太方便(可能是水平有限,用的不对)
1,安装monaco-editor和monaco-editor-webpack-plugin
npm install monaco-editor monaco-editor-webpack-plugin
2,引入项目
参照官网GitHub(https://github.com/Microsoft/monaco-editor/blob/master/docs/integrate-esm.md),
采用的是如下配置
1》webpack.config.js
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin'); const path = require('path');
module.exports = { entry: './index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'app.js' }, module: { rules: [{ test: /\.css$/, use: ['style-loader', 'css-loader'] }] }, plugins: [ new MonacoWebpackPlugin({ output:'./static/js/monaco-editor', languages:['javascript','css'] }) ] };
具体配置见http://npm.taobao.org/package/monaco-editor-webpack-plugin
2》
import * as monaco from 'monaco-editor'; this.editor = monaco.editor.create(document.getElementById('container'), { value: '', language: 'javascript' theme: 'vs-dark', formatOnPaste: true, scrollbar:{ verticalScrollbarSize: 5 } });
通过this.editor.setValue(value)设置内容
this.editor.getValue()获取内容
通过monaco.editor.setTheme()来设置主题,官方提供有3种,‘vs’(默认), 'vs-dark', 'hc-dark'。 也可以通过monaco.editor.defineTheme(themeName, themeData)来自定义主题,详见API文档: https://microsoft.github.io/monaco-editor/api/index.html