AngularでFroala Editorを日本語にする設定方法

Angularのインストール手順は省きます。すいません。

Angularでwysiwygエディタを作るために
Froala Editorのangular-froala-wysiwygというライブラリを使います。

1.npm install

npm install angular-froala-wysiwyg

2.インストールが完了したら設定ファイルに追記

app.module.ts

import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-wysiwyg';
 
 imports: [
   ...
   FroalaEditorModule.forRoot(),
   FroalaViewModule.forRoot()
 ]
 

.angular.json

  "styles": [
    "styles.css",
    "../node_modules/froala-editor/css/froala_editor.pkgd.min.css",
    "../node_modules/froala-editor/css/froala_style.min.css",
    "../node_modules/font-awesome/css/font-awesome.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/froala-editor/js/froala_editor.pkgd.min.js",
    "../node_modules/froala-editor/js/languages/ja.js"
  ],
 

scriptsで"ja.js"を読み込ませていますが、これがFroala Editorを日本語化するためのファイルになります。他の言語も用意されています。詳しくはこちら。

3.エディタを表示させるコンポーネントファイルに追記

hoge.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  ...,
  template: `<div [froalaEditor]="options"></div>`
})
export class AdminComponent implements OnInit {

  public options: Object = {
    language: 'ja',
  };

  constructor() { }

  ngOnInit () {
  }
}

optionsに"language"で"ja"を指定して完成です。