Monaco Editor 自定义语言的实现

废话不多说

The Monaco Editor is the code editor that powers VS Code.

It is licensed under the MIT License and supports IE 9/10/11, Edge, Chrome, Firefox, Safari and Opera.

安装

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'), {
  value: [
    'function x() {',
    '\tconsole.log("Hello world!");',
    '}'
  ].join('\n'),
  language: