Custom editor not shown in content (json definition)

Giyu · April 18, 2022, 11:27am

I have an issue when I’m trying to use a custom editor (https://surveyjs.io/create-survey). I’ve tried the older versions (less than 3 I forget the exact version) it works fine, but I need also new features so I’m using version 6.

I’m submitting a…

[X ] Regression (a behavior that stopped working in a new release)
[ ] Bug report
[ ] Performance issue
[ ] Documentation issue or request

Current behavior

I set the editor url
then on my content page it’s not shown because the ifame element has height: 0

Expected behavior

The editor page is correctly shown on the content page

Environment

App Name:

[x] Self hosted with docker
[ ] Self hosted with IIS
[ ] Self hosted with other version
[ ] Cloud version

Version: locally with image (image: “squidex/squidex:6”)

Browser:

[X] Chrome (desktop)
[ ] Chrome (Android)
[ ] Chrome (iOS)
[ ] Firefox
[ ] Safari (desktop)
[ ] Safari (iOS)
[ ] IE
[ ] Edge

Sebastian · April 18, 2022, 3:28pm

Hi. You have to define the height inside your iframe and you have to use the editor SDK, because the SDK has to send the height to the parent frame.

Giyu · April 21, 2022, 8:13am

Thank you, Sebastian! How can I correctly integrate the editor SDK with (https://github.com/surveyjs/code-examples/tree/main/get-started-creator-angular) that is an angular app. I saw the examples of cke-editor, react json schema editor samples, but there are no samples with angular. Could you help me?

Sebastian · April 21, 2022, 10:08am

Where exactly is the issue? The main challenge with angular is to combine it with the editor, because you need a build process. But I will see if I can write a sample today.

Giyu · April 21, 2022, 11:05am

I appreciate your support, thank you! I implemented the data updating on a content page, however, I’m not sure that my way is correct. I’d be grateful to see samples.

Sebastian · April 21, 2022, 12:38pm

Here is the sample:

The relevant lines are this:

Add a reference to the editor SDK:

. https://github.com/Squidex/squidex-samples/blob/master/jscript/angular/editor/src/index.html#L9

Bind the editor to a FormControl:

github.com

Squidex/squidex-samples/blob/master/jscript/angular/editor/src/app/app.component.ts#L17


  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  form = new FormControl();

  constructor() {
    const field = new SquidexFormField();

    field.onDisabled((disabled: boolean) => {
      if (disabled) {
        this.form.disable();
      } else {
        this.form.enable();
      }
    });

    field.onValueChanged((value: any) => {
      this.form.setValue(value);
    });

Giyu · April 21, 2022, 2:01pm

Great, thank you, Sebastian!