[英]Integrate Monaco Editor into LitElement
i try to crete a Code Playground in open-wc and would like to use Monaco Editor.我尝试在 open-wc 中创建一个 Code Playground,并想使用 Monaco Editor。 the problem is, that i can't simply intregrate it.问题是,我不能简单地整合它。 This is how i tried it and it works but the performance is horrible.这就是我尝试过的方法,它可以工作,但性能很糟糕。
updated(changedProperties) {
let container = this.shadowRoot.getElementById('container');
s
function loadScript(filename, callback) {
var fileref = document.createElement('script');
fileref.setAttribute("type", "text/javascript");
fileref.onload = callback;
fileref.setAttribute("src", filename);
if (typeof fileref != "undefined") {
document.getElementsByTagName("head")[0].appendChild(fileref)
}
}
loadScript('../node_modules/monaco-editor/min/vs/loader.js', function () {
require.config({paths: {'vs': '../node_modules/monaco-editor/min/vs'}});
require(['vs/editor/editor.main'], function () {
var editor = monaco.editor.create(container, {
value: [
'function x() {',
'\tconsole.log("Hello world!");',
'}'
].join('\n'),
language: 'javascript'
});
});
});
}
render() {
return html`
<h2> Monaco Editor Sample</h2>
<div id="container" style="width:100%;height:100%;border:1px solid grey"></div>
`;
}
You need to use a Light Dom
to be able to use it.您需要使用Light Dom
才能使用它。
You must add this to all parents您必须将此添加到所有父母
createRenderRoot() {
return this;
}
You must take into account that the styles will stop working and you must replace them with
<style>
insiderender()
您必须考虑到 styles 将停止工作,您必须在render()
中用<style>
替换它们
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.