Ckeditor5: Support Angular SSR ?

Created on 31 Jan 2019  Â·  10Comments  Â·  Source: ckeditor/ckeditor5

duplicate

Most helpful comment

maybe it'll help others:-

// Initially make it false so that it'll load after browser load by making it true.
ckEditorLoaded = false;

ngOnInit() {
    if (isPlatformBrowser(this.platform)) {
      this.loadCkEditor();
    }
  }

  // TODO: adding a hack to load to ckEditor as it doesn't support SSR.
  loadCkEditor() {
    const jsElmCK = document.createElement('script');
    jsElmCK.type = 'application/javascript';
    jsElmCK.src = 'https://cdn.ckeditor.com/ckeditor5/11.2.0/classic/ckeditor.js';
    document.body.appendChild(jsElmCK);
    jsElmCK.onload = () => {
      this.editor = (window as any).ClassicEditor;
      this.ckEditorLoaded = true;
    };
  }

All 10 comments

Could you explain what do you mean?

it's not supporting SSR in my case and giving window location reff. error.

But still I have done some hack and now it's working. But still it needs to be fixed.

maybe it'll help others:-

// Initially make it false so that it'll load after browser load by making it true.
ckEditorLoaded = false;

ngOnInit() {
    if (isPlatformBrowser(this.platform)) {
      this.loadCkEditor();
    }
  }

  // TODO: adding a hack to load to ckEditor as it doesn't support SSR.
  loadCkEditor() {
    const jsElmCK = document.createElement('script');
    jsElmCK.type = 'application/javascript';
    jsElmCK.src = 'https://cdn.ckeditor.com/ckeditor5/11.2.0/classic/ckeditor.js';
    document.body.appendChild(jsElmCK);
    jsElmCK.onload = () => {
      this.editor = (window as any).ClassicEditor;
      this.ckEditorLoaded = true;
    };
  }

I think this issue should be transferred to https://github.com/ckeditor/ckeditor5-angular and triaged by @ma2ciek.

Hi, @sauravraj95.

I think this issue should be transferred to https://github.com/ckeditor/ckeditor5-angular and triaged by @ma2ciek.

Actually, the example above doesn't use the ckeditor5-angular package. The problem is with Server-side rendering of CKEditor 5 builds AFAIU.

But still I have done some hack and now it's working. But still it needs to be fixed.

IMO the usage of SSR is so rare that we shouldn't make changes anywhere. It's an advanced integration. Eventually, we can extend our docs, but I don't have any idea where since there're many SSR apporaches (angular, react, etc.)... WDYT?

@pomek do you remember if we came to some conclusion in case of the react's SSR?

In this topic, I recommend reading a discussion in React repository – https://github.com/ckeditor/ckeditor5-react/issues/31.

I'll move ckeditor/ckeditor5-react#31 to this repo since it's quite general. Then we can merge this ticket into that one.

Was this page helpful?
0 / 5 - 0 ratings