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

Rename to /samples/

Browse source
This commit is contained in:
Alex Dima 2021-11-16 22:01:05 +01:00
parent c9081ee4f3
commit 091f871e65
No known key found for this signature in database
GPG key ID: 39563C1504FDD0C9
85 changed files with 12 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

70
samples/browser-amd-iframe/index.html Normal file
View file

@ -0,0 +1,70 @@
<!DOCTYPE html>
<html>
<head>
<title>Editor in tiny iframe</title>
<style>
#myIframe1 {
border: 1px solid blue;
width: 0;
height: 0;
}
#myIframe2 {
border: 1px solid red;
display: none;
}
#myIframe3 {
border: 1px solid green;
visibility: hidden;
}
#programmaticIframe {
border: 1px solid yellow;
}
</style>
</head>
<body>
<h2>Monaco Editor inside iframes sample</h2>
<br />
<br />
0x0:
<br />
<iframe id="myIframe1" src="inner.html"></iframe>
display:none:
<br />
<iframe id="myIframe2" src="inner.html"></iframe>
visibility:hidden:
<br />
<iframe id="myIframe3" src="inner.html"></iframe>
taken off-dom while loading:
<br />
<script>
var myIframe1 = document.getElementById('myIframe1');
var myIframe2 = document.getElementById('myIframe2');
var myIframe3 = document.getElementById('myIframe3');
var programmaticIframe = document.createElement('iframe');
programmaticIframe.id = 'programmaticIframe';
programmaticIframe.src = 'inner.html';
// trigger its loading & take it off dom
document.body.appendChild(programmaticIframe);
setTimeout(function () {
document.body.removeChild(programmaticIframe);
}, 10);
setTimeout(function () {
document.body.appendChild(programmaticIframe);
[myIframe1, myIframe2, myIframe3, programmaticIframe].forEach(reveal);
}, 3000);
function reveal(iframe) {
iframe.style.width = '400px';
iframe.style.height = '100px';
iframe.style.display = 'block';
iframe.style.visibility = 'visible';
}
</script>
</body>
</html>

34
samples/browser-amd-iframe/inner.html Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="container" style="width: 100%; height: 100%"></div>
<script src="../node_modules/monaco-editor/min/vs/loader.js"></script>
<script>
require.config({ paths: { vs: '../node_modules/monaco-editor/min/vs' } });
require(['vs/editor/editor.main'], function () {
var editor = monaco.editor.create(document.getElementById('container'), {
value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
language: 'javascript'
});
window.onresize = function () {
editor.layout();
};
});
</script>
</body>
</html>