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

フロントエンド
2554 view

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

最終更新日:2018/10/06

Froala WYSIWYG Editor
いきなり作業

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>

お疲れ様でした!

この記事を書いた人
最新の記事

WINDII

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

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

WINDIIテック