Vscode: How to embed the Monaco editor with TS service in your own HTML page?

Created on 30 Nov 2015 · 5Comments · Source: microsoft/vscode

Hi,
sorry if this is the wrong place to ask for this.

It is really awesome that VS Code is now open-source. Some time ago I created a issue in the TypeScript repo (https://github.com/Microsoft/TypeScript/issues/5324) asking if it'd be possible to embed the Monaco Editor (as used in the TypeScript Playground) into your own HTML pages.

I'd like to:

Show the Monaco editor in the HTML page using the Typescript Language Service.
Specify the initial TypeScript editor contents and my own .d.ts definition files to be used by the TS Language Service.
Get the displayed TypeScript and the transpiled Javascript when e.g. a button is clicked.
Be able to dispose of the editor when e.g. another button is clicked.

So I'd like to use the editor similar to the Typescript Playground, with the difference that I would specify my own .d.ts files and to not have a JavaScript editor at the right-hand side.
However I don't know how to do this correctly.

I checked out the vscode repository and invoked tsc in the src folder. Then I created a HTML page in that folder using the TS playground as a template:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
<h1>Test Monaco</h1>

<div id="typescriptEditor"></div>

<script type="text/javascript">
        var require = {
            baseUrl: "/"
        };
</script>
<script type="text/javascript" src="vs/loader.js"></script>
<script type="text/javascript" src="vs/editor/editor.main.js"></script>
<script type="text/javascript">

if (!window.console.info) {
    window.console.info = function(){}
}

(function () {
    'use strict';

    var domnode = document.getElementById('typescriptEditor')
    var typescriptMode = null;

    require(['vs/editor/editor.main'], function () {

        Monaco.Editor.getOrCreateMode('text/typescript').then(function (mode) {
            typescriptMode = mode;

            var editor = Monaco.Editor.create(domnode, {
                value: '',
                mode: 'text/plain',
                fontIsMonospace: true,
                suggestOnTriggerCharacters: true,
                showTypeScriptWarnings: false
            });
        });


    });

})();
</script>
</body>
</html>

However, when hosting the directory in IIS Express and opening the HTML file in a browser, I'm getting errors such as

http://localhost:8080/vs/editor/contrib/comment/common/color.css [HTTP/1.1 404 Not Found 16ms]
GET 
http://localhost:8080/vs/editor/contrib/inPlaceReplace/common/gotoError.css [HTTP/1.1 404 Not Found 13ms]
GET 
http://localhost:8080/vs/editor/contrib/referenceSearch/browser/rename.css [HTTP/1.1 404 Not Found 125ms]
TypeError: Browser.isInWebWorker is not a function browserService.js:25:17
TypeError: nls.localize is not a function pluginsRegistry.js:330:30
TypeError: EditorCommon.LineTokensBinaryEncoding is undefined tokenIterator.js:7:9

Can anybody give me some pointers how to embed the editor correctly using the TS service?

Thank you!

Source

T18970237136

Most helpful comment

I got it working! Thanks T18970237136 for the start. This HTML hosts the editor when served from the 'out' directory VSC builds to:

<!DOCTYPE html>
<html>
<head>
<title>VSC Editor</title>
<style>
    html, body { height: 100%; margin: 0; }
    .box { display: flex; flex-flow: column; height: 100%; }
    .box .row { flex: 0 1 auto; }
    .box .row.content { flex: 1 1 auto; }
</style>
</head>
<body>
<div class='box'>
    <div class='row content' id="editor"></div>
</div>
<script type="text/javascript" src="vs/loader.js"></script>
<script type="text/javascript">
'use strict';

(function () {
    require(['vs/editor/editor.main', 'vs/base/browser/ui/aria/aria'], function (main, aria) {
        aria.setARIAContainer(document.body);

        var editor = Monaco.Editor.create(document.getElementById('editor'), {
            value: 'var foo = \'bar\';',
            mode: 'text/typescript'
        });

        window.addEventListener('resize', function () {
            editor.layout();
        });
    });
})();
</script>
</body>
</html>

darrinm on 29 Mar 2016

❤4 👍4

All 5 comments

malekpour on 30 Nov 2015

@T18970237136 @malekpour stay tuned. we plan to do something regarding the editor soon

alexdima on 30 Nov 2015

👍1

Hi,
any news on this before the holidays?
Thanks!

T18970237136 on 15 Dec 2015

@T18970237136, sorry this didn't make it for the December update.

Closing as a duplicate of #446.

egamma on 15 Dec 2015

I got it working! Thanks T18970237136 for the start. This HTML hosts the editor when served from the 'out' directory VSC builds to:

<!DOCTYPE html>
<html>
<head>
<title>VSC Editor</title>
<style>
    html, body { height: 100%; margin: 0; }
    .box { display: flex; flex-flow: column; height: 100%; }
    .box .row { flex: 0 1 auto; }
    .box .row.content { flex: 1 1 auto; }
</style>
</head>
<body>
<div class='box'>
    <div class='row content' id="editor"></div>
</div>
<script type="text/javascript" src="vs/loader.js"></script>
<script type="text/javascript">
'use strict';

(function () {
    require(['vs/editor/editor.main', 'vs/base/browser/ui/aria/aria'], function (main, aria) {
        aria.setARIAContainer(document.body);

        var editor = Monaco.Editor.create(document.getElementById('editor'), {
            value: 'var foo = \'bar\';',
            mode: 'text/typescript'
        });

        window.addEventListener('resize', function () {
            editor.layout();
        });
    });
})();
</script>
</body>
</html>

darrinm on 29 Mar 2016

❤4 👍4

Was this page helpful?

0 / 5 - 0 ratings