typescript 在按钮点击时动态更改CKEditor配置语言

9udxz4iz 于 2023-06-07 发布在 TypeScript

关注(0)|答案(1)|浏览(372)

我需要在单击按钮时更改CKEditor5的内容和UI语言。这是一个screenshot的应用程序。每次单击按钮时，config都会更新为所选的新语言。但CKEditor在初始化后仍保持相同的配置。如何使用Angular或TypeScript动态修改编辑器的内容和UI？注意：我使用的是Angular 5，Angular CLI 1.7.4。我也使用CKEditor5版本1.2.3
下面是.ts组件代码：

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())
  }
}

下面是该组件的HTML代码：

<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>

我已经在.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"
      ],

typescript

来源：https://stackoverflow.com/questions/67734004/changing-ckeditor-configuration-language-on-button-click-dynamically

1条答案

按热度按时间

92vpleto1#

当语言改变时，似乎还不可能动态地改变UI。在库的repo中打开了一个github issue，一个feature request for that。您可以尝试触发手动重新渲染。
我在这里给出了一些关于如何在React.js中进行黑客攻击的指导：https://github.com/ckeditor/ckeditor5/issues/9498#issuecomment-1569452422，以防有人来这里在这样的框架中寻找这个答案。我测试过了，它起作用了。
在Angular中，解决方案可能是：
1 -根据所选语言更新Editor对象：您将根据所选语言分配相应的语言版本，而不是将ClassicEditor直接分配给Editor：

public Editor: any;

changeConfig(lang: string) {
  switch (lang) {
    case 'de':
      this.Editor = ClassicEditorDE;
      break;
    case 'ar':
      this.Editor = ClassicEditorAR;
      break;
    default:
      this.Editor = ClassicEditor;
      break;
  }

  this.config = {
    ...this.config,
    language: {
      ui: lang,
      content: lang
    }
  };
}

2 -更新HTML模板：更新HTML模板中的<ckeditor>元素，以使用动态Editor和config属性：

<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.id)">
        Click for {{ lang.label }}
      </button>
    </div>
  </div>
</div>

通过这些更改，当您单击语言按钮时，changeConfig()方法将根据所选语言更新Editor对象。将加载相应的语言构建，并使用新配置（包括更新的语言）重新创建CKEditor 5示例。

赞(0）回复(0）举报 2023-06-07

我来回答

typescript 在按钮点击时动态更改CKEditor配置语言

1条答案

相关问题

热门标签

最新问答