プログラミング学習やフリーランスエンジニア情報を発信していきます。現役フリーランスエンジニア2人で運営してます!

  1. フロントエンド

【超高機能】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.

ぞえ

実務未経験から1年でフリーランスエンジニアになって給料が6倍になった男/アル中の記憶ない系/しかも190cmの巨人。今は週3勤務しながら@ryudoi1と当メディア運営中 詳細なプロフ ぞえのプロフィール!! Twitterアカウント Twitter 技術系の雑談や、質問の行える無料サロンもやっています。 windii social

関連記事

コメント

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

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

PAGE TOP