Monaco sample.

4 years ago · 87ce806216
2 changed files with 77 additions and 2 deletions
--- a/backend/src/Squidex/wwwroot/scripts/editor-editorjs.html
+++ b/backend/src/Squidex/wwwroot/scripts/editor-editorjs.html
@ -59,8 +59,6 @@
                editor.save().then(function (data) {
                    // Notify the UI that the value has been changed. Will be used to trigger validation.
                    field.valueChanged(data);
                    console.log(JSON.stringify(data, null, 2));
                });
            }
        });
--- a/backend/src/Squidex/wwwroot/scripts/editor-monaco.html
+++ b/backend/src/Squidex/wwwroot/scripts/editor-monaco.html
@ -0,0 +1,77 @@
 <!DOCTYPE html>
 <html>
 <head>
    <meta charset="utf-8">
    <!-- Load the editor sdk from the local folder or https://cloud.squidex.io/scripts/editor-sdk.js -->
    <script src="editor-sdk.js"></script>
    <script type="text/javascript" src="https://unpkg.com/monaco-editor@latest/min/vs/loader.js"></script>
    <style>
        .editor {
            border: 1px solid #eee;
            border-radius: 4px;
            height: 500px;
        }
    </style>
 </head>
 <body>
    <div class="editor" id="editor"></div>
    <script>
        require.config({ paths: { 'vs': 'https://unpkg.com/monaco-editor@latest/min/vs' }});
        // When the field is instantiated it notifies the UI that it has been loaded.
        // 
        // Furthermore it sends the current size to the parent.
        var field = new SquidexFormField();
        // Before loading vs/editor/editor.main, define a global MonacoEnvironment that overwrites
        // the default worker url location (used when creating WebWorkers). The problem here is that
        // HTML5 does not allow cross-domain web workers, so we need to proxy the instantiation of
        // a web worker through a same-domain script
        window.MonacoEnvironment = {
            getWorkerUrl: function(workerId, label) {
                return `data:text/javascript;charset=utf-8,${encodeURIComponent(`
                    self.MonacoEnvironment = {
                        baseUrl: 'https://unpkg.com/monaco-editor@latest/min/'
                    };
                    importScripts('https://unpkg.com/monaco-editor@latest/min/vs/base/worker/workerMain.js');`
                )}`;
            }
        };
        require(["vs/editor/editor.main"], function () {
            var editor = monaco.editor.create(document.getElementById('editor'), {
                value: `function x() {
                    console.log("Hello world!");
                    }`,
                language: 'html',
                theme: 'vs-dark',
            });
            field.onValueChanged(function (value) {
                editor.setValue(value || '');
            });
            field.onDisabled(function (disabled) {
                editor.updateOptions({ readOnly: disabled });
            });
            editor.getModel().onDidChangeContent((event) => {
                var data = editor.getValue();
                // Notify the UI that the value has been changed. Will be used to trigger validation.
                field.valueChanged(data);
            });
            window.addEventListener('resize', function () {
                editor.layout();
            });
        });
    </script>
 </body>
 </html>