monaco-editor

访客4年前黑客文章1172

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'), {
  value: [
    'function x() {',
    '\tconsole.log("Hello world!");',
    '}'
  ].join('\n'),
  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/e *** /vs/editor/editor.worker.js',
    "json.worker": 'monaco-editor/e *** /vs/language/json/json.worker',
    "css.worker": 'monaco-editor/e *** /vs/language/css/css.worker',
    "html.worker": 'monaco-editor/e *** /vs/language/html/html.worker',
    "ts.worker": 'monaco-editor/e *** /vs/language/typescript/ts.worker',
  },
  ...
};
返回列表

上一篇:RemoveBG

下一篇:progress.js

相关文章

微信赌博举报会不会挽回损失

接着ntlmrelayx.py开始执行LDAP攻击,加上-debug选项后可以看到更详细的信息。 6、2019年5月31日do Windows 7 for 32-bit Systems Service...

攻击观察:通过滥用Windows Installer MSI中的自定义操作来运行恶意JS/VBS/PowerShell

Windows Installer运用Microsoft Software Installation (MSI)包文件来装置程序,每个包文件都有一个联系型数据库,其间包括装置或删除程序所需的指令和数据...

养成黑客的基础(成为黑客的基础)

养成黑客的基础(成为黑客的基础)

学生成为黑客的第一步从五本书开始 1、,《Python密码学编程》(第二版) 本书是为对加密、破解或密码算法抱有浓厚兴趣的人士准备。现在已经很少有组织或个人会使用这些密码算法了,通过学习这些算法,读者...

开公司费用是多少(个人开公司的流程与费用)

  在公司注册以前,你也要充足掌握公司注册必须什么花费,其压根花费由哪几个一部分组成呢?   公司注册的基础花费   一、注册资本   自打2014年3月我国颁布了新的现行政策之后,公司注册不用认缴出...

怎么丰胸,推荐最有效的秘方!

怎么丰胸,推荐最有效的秘方!

木瓜是我们常食的一种水果,果皮光滑美观,果肉厚实细致、香气浓郁、汁水丰多、营养丰富,有“百益之果”、“水果之皇”、“万寿瓜”之雅称,是岭南四大名果之一。木瓜富含维生素A和维生素C,对人体有很多益处...

地震是怎么产生的(地球上怎么会有地震?)

地震是怎么产生的(地球上怎么会有地震?)实际上导致地震的要素是有很多种多样的,不一样的地震引起要素是彻底不一样,因而说起清晰怎么会有地震,务必从地震的类型逐渐谈起! 一、地震的种类 1、构造型地震...