ng2-ckeditor icon indicating copy to clipboard operation
ng2-ckeditor copied to clipboard

Change CKEditor config does not reflect

Open darushHamidi opened this issue 2 years ago • 2 comments

I need to support RTL text and LTR text with 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 class="editor form-control input-sm w-100" [(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

darushHamidi avatar Oct 23 '22 19:10 darushHamidi

It seems to be a known issue. Maybe this plugin could help?

kzimny avatar Oct 24 '22 06:10 kzimny

we can do it with the help of ChangeDetectorRef and *ngIf.

visit this link.

darushHamidi avatar Oct 24 '22 17:10 darushHamidi