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>