Page 1 of 1

I need help to integrate the Monaco Editor

Posted: Sat Mar 17, 2018 5:21 pm
by Peter
Hello,

i need help to integrate the excellent Monaco Editor into SpiderBasic.

Since SpiderBasic uses the internal Dojo require() implementation, my knowledge is not sufficient to load it via require.

Loading the Editor via a WebGadget would not be a solution.

Who can help?

Thanks in advance & Greetings ... Peter

Re: I need help to integrate the Monaco Editor

Posted: Mon Dec 30, 2019 1:50 pm
by Peter
*Bump*

The topic is still relevant for me

I still want to use the Monaco Editor [1] in SpiderBasic.

However, this does not work as planned, because Monaco Editor uses its own loader (require), which collides with SpiderBasic - require.

Here [2] it is recommended to save the existing SB-require, load the Loader.js and then restore the SB-require.

But no matter what I tried so far: it does not work.

Maybe one of you has an idea?

[1]: https://microsoft.github.io/monaco-editor/
[2]: https://github.com/microsoft/monaco-edi ... index.html

Thanks in advance & Greetings ... Peter

Re: I need help to integrate the Monaco Editor

Posted: Mon Jan 06, 2020 6:45 pm
by DanLJr
According to this...

Code: Select all

<script>
		// Monaco uses a custom amd loader that over-rides node's require.
		// Keep a reference to node's require so we can restore it after executing the amd loader file.
		var nodeRequire = require;
	</script>
	<script src="node_modules/monaco-editor/min/vs/loader.js"></script>
	<script>
		// Save Monaco's amd require and restore Node's require
		var amdRequire = require;
		require = nodeRequire;
		require.nodeRequire = require;
	</script>
...found within...

https://github.com/microsoft/monaco-edi ... index.html

...your reasoning is sound, but obviously I can't see your implementation to comment on any particular logic errors.

Looking at the older/other referenced thread, could it be a path problem?

viewtopic.php?p=3701#p3708

Though, within...

Code: Select all

<script>
		amdRequire.config({
			baseUrl: 'node_modules/monaco-editor/min'
		});
		// workaround monaco-css not understanding the environment
		self.module = undefined;
		// workaround monaco-typescript not understanding the environment
		self.process.browser = true;
		amdRequire(['vs/editor/editor.main'], function() {
			var editor = monaco.editor.create(document.getElementById('container'), {
				value: [
					'function x() {',
					'\tconsole.log("Hello world!");',
					'}'
				].join('\n'),
				language: 'javascript'
			});
		});
	</script>
...you should be able to set the path, unless you CAN'T here for SB for some other reason and need to go about it differently? Some behind-the-scenes magic?

According to the samples, this should demonstrate setting the path, and does seem to match what Fred was referring to in the other thread:

Don't know if you've been fully down this road already.

Re: I need help to integrate the Monaco Editor

Posted: Mon Jan 06, 2020 9:32 pm
by Peter
The problem has now been solved for me. I use an iFrame now to load the editor after all.

Greeting ... Peter