EditorSDK added.

8 years ago · d2cc27dc3b
2 changed files with 156 additions and 0 deletions
--- a/src/Squidex/wwwroot/scripts/editor-sdk.js
+++ b/src/Squidex/wwwroot/scripts/editor-sdk.js
@ -0,0 +1,100 @@
+
+function SquidexFormField() {
+    var disabledHandler;
+    var disabled;
+    var valueHandler;
+    var value;
+    var timer;
+    var height = document.body.offsetHeight;
+
+    function eventListener(event) {
+        if (event.source !== window) {
+            if (event.data.type === 'disabled') {
+                disabled = event.data.isDisabled;
+
+                if (disabledHandler) {
+                    disabledHandler(disabled);
+                }
+            } else if (event.data.type === 'valueChanged') {
+                var value = event.data.value;
+
+                if (valueHandler) {
+                    valueHandler(value);
+                }
+            }
+        }
+    }
+
+    document.body.style.margin = '0';
+    document.body.style.padding = '0';
+
+    window.addEventListener('message', eventListener, false);
+
+    window.parent.postMessage({ type: 'started' }, '*');
+    window.parent.postMessage({ type: 'resize', height: height }, '*');
+
+    timer = setInterval(function () {
+        var newHeight = document.body.offsetHeight;
+
+        if (height !== newHeight) {
+            height = newHeight;
+
+            window.parent.postMessage({ type: 'resize', height: height }, '*')
+        }
+    }, 500);
+
+    var editor = {
+        /*
+         * Notifies the control container that the editor has been touched.
+         */
+        touched: function () {
+            if (window.parent) {
+                window.parent.postMessage({ type: 'touched' }, '*');
+            }
+        },
+
+        /*
+         * Notifies the control container that the value has been changed.
+         */
+        valueChanged: function (value) {
+            if (window.parent) {
+                window.parent.postMessage({ type: 'valueChanged', value: value }, '*');
+            }
+        },
+
+        /*
+         * Register the disabled handler.
+         */
+        onDisabled: function (callback) {
+            disabledHandler = callback;
+
+            if (callback) {
+                callback(disabled);
+            }
+        },
+
+        /*
+         * Register the disabled handler.
+         */
+        onValueChanged: function (callback) {
+            valueHandler = callback;
+
+            if (callback) {
+                callback(value);
+            }
+        },
+
+        /*
+         * Clean the editor SDK.
+         */
+        clean: function () {
+            if (timer) {
+                window.removeEventListener('message', eventListener);
+
+                timer();
+            }
+        }
+    };
+
+    return editor;
+};
--- a/src/Squidex/wwwroot/scripts/simple-editor.html
+++ b/src/Squidex/wwwroot/scripts/simple-editor.html
@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+
+    <script src="editor-sdk.js"></script>
+    <script src="https://cdn.ckeditor.com/ckeditor5/10.0.0/classic/ckeditor.js"></script>
+
+    <style>
+        .ck-editor__editable {
+            min-height: 250px;
+        }
+    </style>
+</head>
+
+<body>
+    <textarea name="content" id="editor"></textarea>
+
+    <script>
+        var element = document.getElementById('editor');
+
+        ClassicEditor
+            .create(element)
+            .catch(error => {
+                console.error(error);
+            })
+            .then(editor => {
+                var field = new SquidexFormField();
+
+                field.onValueChanged(function (value) {
+                    if (value) {
+                        editor.setData(value);
+                    }
+                });
+
+                field.onDisabled(function (disabled) {
+                    editor.set('isReadOnly', disabled);
+                });
+
+                editor.model.document.on('change', function () {
+                    var data = editor.getData();
+
+                    field.valueChanged(data);
+                });
+
+                editor.ui.focusTracker.on('change:isFocused', function (event, name, isFocused) {
+                    if (!isFocused) {
+                        field.touched();
+                    }
+                });
+            });
+    </script>
+</body>
+
+</html>