web-dev-qa-db-ja.com

CKEDITORをangularプロジェクトにインストールしてプラグインを追加する方法

angularプロジェクトにckeditorをインストールしようとしています。npmを使用してckeditor4-angularをインストールしようとしましたが、WIRIS mathTypeなどのプラグインを追加する方法が見つかりませんでした。どうすればよいですか？エディターをangularプロジェクトにインストールし、プラグインをインストールしますか？

angularckeditoreditorwiris
2
emmaakachukwu

これに関する問題があります https://github.com/ckeditor/ckeditor5-angular/issues/134 。カスタムCKEditorビルドを作成し、それに必要なプラグインを含める必要があります。ここにガイドがあります： https://ckeditor.com/docs/ckeditor5/latest/builds/guides/development/custom-builds.html BTW I最新バージョンのCKEditor 5を使用することをお勧めします。

UPD：

  1. 元のリポジトリのクローンを作成します。

git clone https://github.com/ckeditor/ckeditor5-build-classic.git

  1. 依存関係をインストールする

npm install

  1. 必要なプラグイン自体をインストールする

npm install --save @wiris/mathtype-ckeditor5

  1. src/ckeditor.jsを開き、エディターの新しいプラグインを開きます。
...
import MathType from '@wiris/mathtype-ckeditor5';
...

ClassicEditor.builtinPlugins = [
   ...
   MathType
];

ClassicEditor.defaultConfig = {
    toolbar: {
        items: [
            ...
            'MathType',
            ...
        ]
    },
    ...
};
  1. 次に、エディターをビルドします（多分、yarnをインストールする必要があります）

yarn run build

  1. その後、buildフォルダからプロジェクトにすべてをコピーします。例えば
src/assets/js/ck-editor-math-type/
   -> translations
      -> ...
   -> ckeditor.js
  1. Ckeditorコードをpackage.jsonに追加します
"dependencies": {
   ...
   "@ckeditor/ckeditor5-angular": "^1.1.2",
   ...
}
  1. CKEditorをコンポーネントにインポートします。
import * as ClassicEditor from '../../assets/js/ck-editor-math-type/ckeditor.js';

...
export class CkeditComponent implements OnInit {

    public Editor = ClassicEditor;

    public model = {
        editorData: '<p>Hello, world!</p>'
    };
}
  1. Template.htmlも追加します
<ckeditor [(ngModel)]="model.editorData" [editor]="Editor"></ckeditor>

これがお役に立てば幸いです。

4
Max Vorontsov