現役フリーランスエンジニアが運営するテックメディア。日々の業務で得た知識を発信していきます!

  1. フロントエンド
  2. 1145 view

【超高機能】Angular6でFroala WYSIWYG Editorを導入する方法

最終更新日:2018/10/06

Froala WYSIWYG Editor

Froala WYSIWYG Editorはweekly downloads10,991を誇る最強のeditorで、angularでも簡単に使用することができます(☆∀☆)

が、公式通りにやると上手くいかないので記事にしました!

初めてのgifで取り直しをしている為、予測変換がダサいのには目を瞑って頂けると幸いです。

今回はangular6での導入方法を紹介します!

demoページ

いきなり作業

新規アプリケーションの作成

既にプロジェクトがある場合はskipしてください。

npm install -g @angular/cli
ng new legend-app
cd legend-app

angular floara editorのインストール

npm install angular-froala-wysiwyg --save

moduleにプラグインをインポート

import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-wysiwyg';
...

@NgModule({
...
imports: [FroalaEditorModule.forRoot(), FroalaViewModule.forRoot() ... ],
...
})

angular.jsonを編集して用意されたcssとscriptを使えるようにする。

下記のcssとscriptを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"
]

このスクリプトの部分が公式通りにやると上手く作動しないので要注意です。

公式(嘘つry
“../node_modules/jquery/dist/jquery.min.js”,

正解
“./node_modules/jquery/dist/jquery.js”

"scripts": [
"./node_modules/jquery/dist/jquery.js",
"./node_modules/froala-editor/js/froala_editor.pkgd.min.js"
]

使用するコンポーネントのhtmlにfloarEditorを貼り付ける!

<div>Hello, Froala!</div>

お疲れ様でした!

The following two tabs change content below.
WINDII

WINDII

WINDII(ウィンディ)は、フリーランスエンジニアが運営するテックメディアです。 日々の業務で得た知見を、皆さんに役立つコンテンツにして発信していくので応援よろしくお願いします! また、Slackで無料コミュニティも運営しています。たくさんのエンジニアが参加していて、プログラミングの相談や雑談などをしている楽しいコミュニティなので、興味ある方はぜひお気軽にご参加ください。 Slackコミュニティはこちらから

フロントエンドの最近記事

  1. IOSアプリをAppStoreに公開する手順書(Ionic)

  2. IonicAcademyでIonic&Angularでのアプリ開発を学ぶ

  3. Ionic4+firebaseで認証をする方法【ログイン、ログアウト機能の実装】

  4. ハイブリッドアプリ開発チュートリアル【Ionic4+OnsenUI】

  5. Ionic4+Angular Materialの始め方【Ionic事前調査兵団】

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

PAGE TOP