diff --git a/backend/src/Squidex/wwwroot/scripts/editor-sdk.js b/backend/src/Squidex/wwwroot/scripts/editor-sdk.js
index cebeebedd..baa25ec4e 100644
--- a/backend/src/Squidex/wwwroot/scripts/editor-sdk.js
+++ b/backend/src/Squidex/wwwroot/scripts/editor-sdk.js
@@ -124,6 +124,8 @@ function SquidexFormField() {
var initCalled = false;
var disabledHandler;
var disabled = false;
+ var fullscreen = false;
+ var fullscreenHandler = false;
var valueHandler;
var value;
var formValueHandler;
@@ -149,6 +151,12 @@ function SquidexFormField() {
}
}
+ function raiseFullscreen() {
+ if (fullscreenHandler) {
+ fullscreenHandler(fullscreen);
+ }
+ }
+
function raiseInit() {
if (initHandler && !initCalled && context) {
initHandler(context);
@@ -174,6 +182,10 @@ function SquidexFormField() {
formValue = event.data.formValue;
raiseFormValueChanged();
+ } else if (type === 'fullscreenChanged') {
+ fullscreen = event.data.fullscreen;
+
+ raiseFullscreen();
} else if (type === 'init') {
context = event.data.context;
@@ -233,9 +245,9 @@ function SquidexFormField() {
*
* @params mode: boolean: The fullscreen mode.
*/
- fullscreen: function (mode) {
+ toggleFullscreen: function () {
if (window.parent) {
- window.parent.postMessage({ type: 'fullscreen', mode: mode }, '*');
+ window.parent.postMessage({ type: 'fullscreen', mode: !fullscreen }, '*');
}
},
@@ -287,6 +299,15 @@ function SquidexFormField() {
raiseFormValueChanged();
},
+
+ /**
+ * Register the fullscreen changed handler.
+ */
+ onFullscreen: function (callback) {
+ fullscreenHandler = callback;
+
+ raiseFullscreen();
+ },
/**
* Clean the editor SDK.
diff --git a/backend/src/Squidex/wwwroot/scripts/editor-simple.html b/backend/src/Squidex/wwwroot/scripts/editor-simple.html
index 00ee5778c..a63869b46 100644
--- a/backend/src/Squidex/wwwroot/scripts/editor-simple.html
+++ b/backend/src/Squidex/wwwroot/scripts/editor-simple.html
@@ -13,6 +13,24 @@
min-height: 250px;
}
+ .fullscreen {
+ height: 100vh;
+ }
+
+ .fullscreen .ck-editor {
+ position: fixed !important;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 1000;
+ }
+
+ .fullscreen .ck-editor .ck-editor__editable.ck-rounded-corners.ck-editor__editable_inline,
+ .fullscreen .ck-editor .ck.ck-editor__main {
+ height: 100%;
+ }
+
#fullscreenButton {
position: absolute;
z-index: 10000;
@@ -28,8 +46,6 @@
diff --git a/frontend/app/framework/angular/forms/editors/iframe-editor.component.ts b/frontend/app/framework/angular/forms/editors/iframe-editor.component.ts
index 0e3b696d5..b3fa7063a 100644
--- a/frontend/app/framework/angular/forms/editors/iframe-editor.component.ts
+++ b/frontend/app/framework/angular/forms/editors/iframe-editor.component.ts
@@ -94,6 +94,7 @@ export class IFrameEditorComponent extends StatefulControlComponent
this.isInitialized = true;
this.sendInit();
+ this.sendFullscreen();
this.sendFormValue();
this.sendDisabled();
this.sendValue();
@@ -148,6 +149,10 @@ export class IFrameEditorComponent extends StatefulControlComponent
this.sendMessage('valueChanged', { value: this.value });
}
+ private sendFullscreen() {
+ this.sendMessage('fullscreenChanged', { fullscreen: this.snapshot.isFullscreen });
+ }
+
private sendDisabled() {
this.sendMessage('disabled', { isDisabled: this.isDisabled });
}
@@ -157,6 +162,8 @@ export class IFrameEditorComponent extends StatefulControlComponent
}
private toggleFullscreen(isFullscreen: boolean) {
+ this.next(s => ({ ...s, isFullscreen }));
+
let target = this.container.nativeElement;
if (isFullscreen) {
@@ -165,7 +172,7 @@ export class IFrameEditorComponent extends StatefulControlComponent
this.renderer.appendChild(target, this.inner.nativeElement);
- this.next(s => ({ ...s, isFullscreen }));
+ this.sendFullscreen();
}
private sendMessage(type: string, payload: any) {