web-dev-qa-db-fra.com

Comment ajouter des plugins à CKEditor pour Angular "@ ckeditor / ckeditor5-angular"?

J'ai installé CKEditor pour Angular suivant ce guide: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/angular.html

J'ai importé CKEditorModule dans mon module et l'ai ajouté à mes importations.

import { CKEditorModule } from "@ckeditor/ckeditor5-angular";

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    CKEditorModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Dans mon composant, j'ai ajouté la génération ClassicEditor et l'ai affectée à une propriété publique.

import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';

export class AppComponent {
  title = 'AngularCkeditor';
  public Editor = ClassicEditor;
}

Enfin, j'utilise la balise ckeditor dans mon modèle html:

<ckeditor [editor]="Editor" data="<p>Hello, world!</p>"></ckeditor>

Ça marche plutôt bien!

Maintenant, je veux y ajouter des plugins mais il n'y a aucune explication sur la façon d'y parvenir.

J'ai donc suivi le guide par défaut pour l'installation des plugins: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/installing-plugins.html

Par exemple, j'ai essayé d'installer le plugin Alignment:

npm install --save @ ckeditor/ckeditor5-alignement

Ensuite, j'ai importé le plugin dans mon composant et j'ai essayé de le charger.

import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment'; 

ClassicEditor.builtinPlugins = [
  Alignment
];

Lorsque je fais cela, je reste coincé avec une erreur:

TypeError: Impossible de lire la propriété 'getAttribute' de null

enter image description here

C'est tellement étrange parce que j'ai suivi le même guide pour modifier la configuration de CKEditor, et cela fonctionne parfaitement.

ClassicEditor.defaultConfig = {
  toolbar: {
    items: [
      'heading',
      '|',
      'alignment',
      'bold',
      'italic',
      '|',
      'bulletedList',
      'numberedList',
      '|',
      'link',
      'blockQuote',
      '|',
      'imageUpload',
      '|',
      'undo',
      'redo'
    ]
  },
  image: {
    toolbar: [
      'imageStyle:full',
      'imageStyle:side',
      '|',
      'imageTextAlternative'
    ]
  },
  language: 'en'
};

enter image description here

angularckeditor
7
118218

En fait, la configuration 'builtinPlugins' doit être effectuée directement dans la build à la place de notre composant, comme expliqué dans le guide: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/installing- plugins.html # ajout d'un plugin à une build

L'ajout de plugins aux builds existants se fait via leur personnalisation. Les versions de l'éditeur sont conservées dans leurs référentiels GitHub respectifs. Par conséquent, en supposant que vous souhaitiez personnaliser la version de l'éditeur classique, vous devez:

  • Clonez le référentiel de génération.
  • Installez le module d'extension.
  • Ajoutez-le à la configuration de construction.
  • Regroupez la version.

Nous devons créer une "construction personnalisée", puis l'importer dans notre composant.

1
118218

Jetez un œil à l'exemple de l'ajout du plugin MathType, vous pouvez faire de même pour votre cas https://stackoverflow.com/a/59225002/646552

0
Max Vorontsov