SystemSh0cker/monaco-editor
1
0
Fork 0
mirror of https://github.com/microsoft/monaco-editor.git synced 2025-12-22 15:05:39 +01:00
Code Issues Projects Releases Packages Activity

Move into monaco-editor-samples folder

Browse source
This commit is contained in:
Alex Dima 2021-11-05 12:12:35 +01:00
parent b9969d41cb
commit a9ab892f7a
No known key found for this signature in database
GPG key ID: 39563C1504FDD0C9
86 changed files with 0 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

50
monaco-editor-samples/browser-amd-shadow-dom/index.html Normal file
View file

@ -0,0 +1,50 @@
<!DOCTYPE html>
<html>
<head>
<title>browser-amd-editor</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style>
/* We must define the font face outside the shadowroot */
@font-face {
font-family: 'codicon';
src: url('../node_modules/monaco-editor/min/vs/base/browser/ui/codicons/codicon/codicon.ttf')
format('truetype');
}
</style>
</head>
<body>
<h2>Monaco Editor Sample</h2>
<div id="container" style="width: 800px; height: 600px; border: 1px solid grey"></div>
<!-- OR ANY OTHER AMD LOADER HERE INSTEAD OF loader.js -->
<script src="../node_modules/monaco-editor/min/vs/loader.js"></script>
<script>
require.config({
paths: { vs: '../node_modules/monaco-editor/min/vs' },
'vs/css': { disabled: true }
});
const container = document.getElementById('container');
const shadowRoot = container.attachShadow({
mode: 'closed'
});
const innerContainer = document.createElement('div');
shadowRoot.appendChild(innerContainer);
innerContainer.style.width = '800px';
innerContainer.style.height = '600px';
const innerStyle = document.createElement('style');
innerStyle.innerText =
'@import "../node_modules/monaco-editor/min/vs/editor/editor.main.css";';
shadowRoot.appendChild(innerStyle);
require(['vs/editor/editor.main'], function () {
const editor = monaco.editor.create(innerContainer, {
value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
language: 'javascript'
});
});
</script>
</body>
</html>