Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Change CKEditor config does not reflect #331

Open
darushHamidi opened this issue Oct 23, 2022 · 2 comments
Open

Change CKEditor config does not reflect #331

darushHamidi opened this issue Oct 23, 2022 · 2 comments

Comments

@darushHamidi
Copy link

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 darushHamidi changed the title Change CKEditor config does not reflect in Angular Change CKEditor config does not reflect Oct 23, 2022
@kzimny
Copy link
Collaborator

kzimny commented Oct 24, 2022

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

@darushHamidi
Copy link
Author

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

visit this link.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants