mirror of
https://github.com/microsoft/monaco-editor.git
synced 2025-12-22 22:02:55 +01:00
Fixes #1: Add a test page and simplify REAMDE
This commit is contained in:
Alex Dima
parent
dba0c1f2a0
commit
31f3b79004
3 changed files with 74 additions and 22 deletions
27
README.md
27
README.md
|
|
@ -19,30 +19,13 @@ Please file issues concering `monaco-html` in the [`monaco-editor`-repository](h
|
||||||
|
|
||||||
This npm module is bundled and distributed in the [monaco-editor](https://www.npmjs.com/package/monaco-editor) npm module.
|
This npm module is bundled and distributed in the [monaco-editor](https://www.npmjs.com/package/monaco-editor) npm module.
|
||||||
|
|
||||||
* change to your favorite source folder (`/src/`)
|
|
||||||
* `git clone https://github.com/Microsoft/monaco-editor` (this will create `$/src/monaco-editor`)
|
|
||||||
* in folder `monaco-editor` run `npm install` and run `npm run simpleserver`
|
|
||||||
* open http://localhost:8080/monaco-editor/test/index.html#sample - html
|
|
||||||
|
|
||||||
## Development
|
## Development
|
||||||
|
|
||||||
### Dev: Running monaco-html from source
|
* `git clone https://github.com/Microsoft/monaco-html`
|
||||||
* change to your favorite source folder (`/src/`).
|
* `cd monaco-html`
|
||||||
* if you haven't done so: `git clone https://github.com/Microsoft/monaco-editor` (this will create `$/src/monaco-editor`)
|
* `npm install .`
|
||||||
* `git clone https://github.com/Microsoft/monaco-html` (this will create `$/src/monaco-html`)
|
* `npm run watch`
|
||||||
* Important: both monaco repositories must have the same parent folder.
|
* open `$/monaco-html/test/index.html` in your favorite browser.
|
||||||
* in folder `monaco-html` run `npm install` and run `npm run watch`
|
|
||||||
* in folder `monaco-editor` run `npm install` and run `npm run simpleserver`
|
|
||||||
* open http://localhost:8080/monaco-editor/test/?monaco-html=dev
|
|
||||||
|
|
||||||
### [Optional] Running monaco-editor-core from source
|
|
||||||
|
|
||||||
* this is only needed when you want to make changes also in `monaco-editor-core`.
|
|
||||||
* change to the same favorite source folder (`/src/`) that already contains `monaco-html` and `monaco-editor`
|
|
||||||
* `git clone https://github.com/Microsoft/vscode` (this will create `$/src/vscode/`)
|
|
||||||
* read [here](https://github.com/Microsoft/vscode/wiki/How-to-Contribute#installing-prerequisites) on how to initialize the VS Code source repository.
|
|
||||||
* in folder `vscode` run `gulp watch`
|
|
||||||
* open http://localhost:8080/monaco-editor/test/?monaco-html=dev&editor=dev
|
|
||||||
|
|
||||||
## License
|
## License
|
||||||
[MIT](https://github.com/Microsoft/monaco-html/blob/master/LICENSE.md)
|
[MIT](https://github.com/Microsoft/monaco-html/blob/master/LICENSE.md)
|
||||||
|
|
|
||||||
|
|
@ -26,6 +26,8 @@
|
||||||
"gulp-uglify": "^1.5.3",
|
"gulp-uglify": "^1.5.3",
|
||||||
"merge-stream": "^1.0.0",
|
"merge-stream": "^1.0.0",
|
||||||
"monaco-editor-core": "^0.7.0",
|
"monaco-editor-core": "^0.7.0",
|
||||||
|
"monaco-languages": "^0.6.1",
|
||||||
|
"monaco-typescript": "^2.0.1",
|
||||||
"object-assign": "^4.1.0",
|
"object-assign": "^4.1.0",
|
||||||
"rimraf": "^2.5.2",
|
"rimraf": "^2.5.2",
|
||||||
"typescript": "2.0.3",
|
"typescript": "2.0.3",
|
||||||
|
|
|
||||||
67
test/index.html
Normal file
67
test/index.html
Normal file
|
|
@ -0,0 +1,67 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
||||||
|
<link rel="stylesheet" data-name="vs/editor/editor.main" href="../node_modules/monaco-editor-core/dev/vs/editor/editor.main.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<h2>Monaco Editor HTML test page</h2>
|
||||||
|
<div id="container" style="width:800px;height:600px;border:1px solid grey"></div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Loading basic-languages to get the html language definition
|
||||||
|
// Loading monaco-typescript to get javascript coloring
|
||||||
|
var require = {
|
||||||
|
paths: {
|
||||||
|
'vs/basic-languages': '../node_modules/monaco-languages/release',
|
||||||
|
'vs/language/typescript': '../node_modules/monaco-typescript/release',
|
||||||
|
'vs/language/html': '../release/dev',
|
||||||
|
'vs': '../node_modules/monaco-editor-core/dev/vs'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<script src="../node_modules/monaco-editor-core/dev/vs/loader.js"></script>
|
||||||
|
<script src="../node_modules/monaco-editor-core/dev/vs/editor/editor.main.nls.js"></script>
|
||||||
|
<script src="../node_modules/monaco-editor-core/dev/vs/editor/editor.main.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
require([
|
||||||
|
'vs/basic-languages/src/monaco.contribution',
|
||||||
|
'vs/language/typescript/src/monaco.contribution',
|
||||||
|
'vs/language/html/monaco.contribution'
|
||||||
|
], function() {
|
||||||
|
var editor = monaco.editor.create(document.getElementById('container'), {
|
||||||
|
value: [
|
||||||
|
'<!DOCTYPE HTML>',
|
||||||
|
'<!--',
|
||||||
|
' Comments are overrated',
|
||||||
|
'-->',
|
||||||
|
'<html>',
|
||||||
|
'<head>',
|
||||||
|
' <title>HTML Sample</title>',
|
||||||
|
' <meta http-equiv="X-UA-Compatible" content="IE=edge">',
|
||||||
|
' <style type="text/css">',
|
||||||
|
' h1 {',
|
||||||
|
' color: #CCA3A3;',
|
||||||
|
' }',
|
||||||
|
' </style>',
|
||||||
|
' <script type="text/javascript">',
|
||||||
|
' window.alert("I am a sample...");',
|
||||||
|
' var x = 3;',
|
||||||
|
' </'+'script>',
|
||||||
|
'</head>',
|
||||||
|
'<body>',
|
||||||
|
' <h1>Heading No.1</h1>',
|
||||||
|
' <input disabled type="button" value="Click me" />',
|
||||||
|
'</body>',
|
||||||
|
'</html>'
|
||||||
|
].join('\n'),
|
||||||
|
language: 'html'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue