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

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

最新記事 by WINDII (全て見る)

• Nuxt.js + Contentful。HeadlessCMSでポータルサイトを作る - 2019年12月28日
• IOSアプリをAppStoreに公開する手順書（Ionic） - 2019年9月11日
• IonicAcademyでIonic＆Angularでのアプリ開発を学ぶ - 2019年8月30日