Just starting out? Need help? Post your questions and find answers here.
User avatar
Peter
 
Posts: 691
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080

I need help to integrate the Monaco Editor

by Peter Sat Mar 17, 2018 5:21 pm

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
User avatar
Peter
 
Posts: 691
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080

Re: I need help to integrate the Monaco Editor

by Peter Mon Dec 30, 2019 1:50 pm

*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-editor-samples/blob/master/nwjs-amd/index.html

Thanks in advance & Greetings ... Peter
User avatar
DanLJr
 
Posts: 56
Joined: Wed Jul 04, 2018 4:24 am
Location: USA

Re: I need help to integrate the Monaco Editor

by DanLJr Mon Jan 06, 2020 6:45 pm

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-editor-samples/blob/master/nwjs-amd/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.
-Dan L.
:: falling on my face a lot lately; learning even more because of it! ::
User avatar
Peter
 
Posts: 691
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080

Re: I need help to integrate the Monaco Editor

by Peter Mon Jan 06, 2020 9:32 pm

The problem has now been solved for me. I use an iFrame now to load the editor after all.

Greeting ... Peter
Return to Coding Questions

Who is online

Users browsing this forum: No registered users and 4 guests