Changing CKEditor configuration language on button click dynamically

Viewed 604

I need to change the content and UI language of the CKEditor5 when I click a button. Here's a screenshot of the app. On each button click, the config is updated with the new language selected. But the CKEditor remains with the same configuration when it has been initialized. How can we modify the content and UI of the editor dynamically using Angular or TypeScript? Note: I'm using Angular 5, Angular CLI 1.7.4. And also I'm using CKEditor5 version 1.2.3

Here's the .ts component code:

import { Component, OnInit } from '@angular/core'
import { ChangeEvent } from '@ckeditor/ckeditor5-angular'
import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic'

@Component({
  selector: 'another-text-editor',
  templateUrl: './another-text-editor.component.html',
  styleUrls: ['./another-text-editor.component.css']
})
export class TextEditorComponent implements OnInit{

  languages = [
    { id: 'fr', label: 'French' },
    { id: 'de', label: 'German' },
    { id: 'ar', label: 'Arabic' }
  ]

  public Editor = ClassicEditor

  config = {
    toolbar: ['bold', 'italic'],
    language: { ui: 'fr', content: 'fr' }
  }

  constructor () {}

  ngOnInit () {}

  changeConfig (lang) {
    this.config = {
      ...this.config,
      language: {
        ui: lang,
        content: lang
      }
    }
  }

  public onChange ({editor}: ChangeEvent) {
     console.log(editor.getData())
  }
}

And here's the HTML code for the component:

<div class="container pt-4">
  <ckeditor [editor]="Editor" id="editor" tagName="textarea" [config]="config" [(ngModel)]="text" (change)="onChange($event)"></ckeditor>
  <div class="row justify-content-start align-items-center mt-4">
    <div class="col-auto" *ngFor="let lang of languages">
      <button class="btn btn-primary" (click)="changeConfig(lang)">
        Click for {{lang.label}}
      </button>
    </div>
  </div>
</div>

I've added the translation files in .angular-cli.json:

"scripts": [ 
        "../node_modules/@ckeditor/ckeditor5-build-classic/build/translations/de.js",
        "../node_modules/@ckeditor/ckeditor5-build-classic/build/translations/fr.js",
        "../node_modules/@ckeditor/ckeditor5-build-classic/build/translations/ar.js"
      ],
0 Answers
Related