Change CKEditor config does not reflect in Angular-CodePudding

I need to support RTL text and LTR text with ckeditor.

first of all, with the following command I install ng2-ckeditor

npm i ng2-ckeditor

Then

  public responsibilities = 'Angular CkEditor';
  public editorConfig = {}

  ngOnInit(): void {
    let removeButtons: string = "exportPdf,Source,Templates,Save,NewPage,Print,Replace,Scayt,SelectAll,Form,Radio,TextField,Textarea,Select,Button,ImageButton"
    this.editorConfig = {
      allowedContent: true,
      contentsLangDirection: "ltr",
      forcePasteAsPlainText: true,
      removePlugins: "easyimage, cloudservices, exportpdf,dialog,tableselection,scayt",
      extraPlugins: `${'divarea'}`,
      removeButtons: removeButtons,
      baseFloatZIndex: 9999999999,
      timestamp:  new Date,
      language: 'en'
    }
  }

app.component.html:

<ckeditor required  [(ngModel)]="responsibilities" name="responsibilities"
  id="insert-editor" [config]="editorConfig" [readonly]="false" debounce="500">
</ckeditor>
<br />
<button type="button" (click)="refreshConfig('rtl')">
  Refresh CKEditor Config - (RTL)
</button>

<button type="button" (click)="refreshConfig('ltr')">
  Refresh CKEditor Config - (LTR)
</button>

NOTE: based on this question I used timestamp, which does not work

Code to change config:

  refreshConfig(type: "rtl" | "ltr" = "ltr") {
    type == "rtl" ? this.rtlConfig() : this.ltrConfig();
  }

  private rtlConfig() {
    this.editorConfig = {
      ...this.editorConfig,
      language: 'fa',
      contentsLangDirection: "rtl",
      timestamp:  new Date
    }
  }

  private ltrConfig() {
    this.editorConfig = {
      ...this.editorConfig,
      language: 'en',
      contentsLangDirection: "ltr",
      timestamp:  new Date
    }
  }

NOTE

if set language to fa and contentsLangDirection to rtl in ngOnInit hook or set language to en and contentsLangDirection to ltr it works.

Stackblitz Here

CodePudding user response：

Since the library does not reload the editor when the config changes, your config won't apply.

As far as I know, it is not possible to apply new configs after the editor was initialized.

There are different ways to force rerendering the editor. Because you are dealing with a library, I suggest to rerender the component by *ngIf directive or by using the ng-template way.

To rerender with *ngIf directive, just define a boolean variable which you enable before you make change to the config and enable afterwards. Because angular dom does not recognize the enable/disable in the same method, you need to force change detection when you activate the component.

Here is my example:

public configChanging = false;
  constructor(private cdRef: ChangeDetectorRef) {}

  private rtlConfig() {
    this.configChanging = true;
    this.cdRef.detectChanges();

    this.editorConfig = {
      ...this.editorConfig,
      language: 'fa',
      contentsLangDirection: 'rtl',
      timestamp:  new Date(),
    };

    this.configChanging = false;
  }

And in your template you add the *ngIf directive

<ckeditor *ngIf="!configChanging"></ckeditor>

Here is a fork of your Stackblitz with my solution