GaramX

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
====== About Monaco Editor ======
[[monaco_editor|Microsoft Monaco Editor]]
===== install =====
<code bash>
> npm install css-loader monaco-editor style-loader --save-dev
</code>

=== package.json ===

<file javascript package.json>
{
  "name": "helloworld",
  "dependencies": {},
  "devDependencies": {
    "css-loader": "^1.0.0",
    "monaco-editor": "^0.14.3",
    "style-loader": "^0.23.1",
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.2"
  }
}
</file>
=== webpack.config.js ===
<code javascript webpack.config.js>
const path = require('path');

module.exports = {
	mode: 'development',
	entry: {
		"app": './index.js',
		"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',
	},
	output: {
		globalObject: 'self',
		filename: '[name].bundle.js',
		path: path.resolve(__dirname, 'dist')
	},
	module: {
		rules: [{
			test: /\.css$/,
			use: [ 'style-loader', 'css-loader' ]
		}]
	},
};

</code>

=== index.js ===
<file javascript index.js>
import * as monaco from 'monaco-editor';

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'
});
</file>
=== index.html ===
<file html index.html>
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>

<div id="container" style="width:800px;height:600px;border:1px solid #ccc"></div>

<script src="./app.bundle.js"></script>

</body>
</html>
</file>
GaramX

사용자 도구

사이트 도구

문서 도구
