LoginSignup
4
3

More than 5 years have passed since last update.

Froala(高機能wysiwyg editor)使ってみた

Last updated at Posted at 2017-07-25

ライブプレビュー見ながら、更新できるようなやつを作って見ました。
コンセプトは素人がミスりにくい感じで、ある程度自由度の高いFroalaではありますが今回はその辺をあえて縛ってます。

heroku
<完成系>
・Editor Side
https://overwrite-froala.herokuapp.com/admin.php
Digest Auth認証
admin:pass
でログインできます。

・User Side(No Auth)
https://overwrite-froala.herokuapp.com/

なんか昔の人間なんで、サクッと行きたいので、npmとかは使わずでファイルをダウンロードしているとこだけ使います。本体のダウンロードはこちらから、
https://www.froala.com/wysiwyg-editor

githubにsample sourceあげてます
https://github.com/over-write/floara

ファイル構成

  • index.php -- ゲストが見るよう
  • admin.php -- 管理画面というか編集画面(今回は簡単にダイジェスト認証をかけております)
  • js/froala_editor.min.js -- 本体
  • js/froala_editor.pkgd.min.js -- 同上
  • js/jquery.js -- みんな大好き jQuery
  • css/froala_editor.min.css --本体のCSS
  • css/froala_style.min.css --同上
  • css/style.css -- 見た目の調整用

今回Herokuにデプロイしようと思ったんだけどファイルの書き込みがなんか出来なかったので、データベースを使いました。
なんか書き込みが一回しかうまくいかないという・・・(以下略

ここを参考に!
HerokuでPHP+MySQL - Qiita

index.php
<script type='text/javascript' src='js/froala_editor.min.js'></script>
<script type='text/javascript' src='js/plugins/link.min.js'></script>
<script type='text/javascript' src='js/plugins/table.min.js'></script>
<script type='text/javascript' src='js/languages/ja.js'></script>

このように利用する機能は個別にJSをロードします。

index.php
$('div#froala-editor').froalaEditor({
language: 'ja',
height:500,
linkAlwaysBlank: true,
tableEditButtons: ['tableRows'],
linkList: [
  {
  text: 'オーバーライト',
  href: 'https://overwrite.jp',
  target: '_blank',
  rel: 'nofollow'
  }
],
linkEditButtons: ['linkEdit', 'linkRemove'],
toolbarButtons:  ['insert','clear','undo', 'redo','insertLink'],
// Define new inline styles.
inlineStyles: 
 {
 'Big Red': 'font-size: 20px; color: red;',
 'Small Blue': 'font-size: 14px; color: blue;'
 },
});

ボタン系の制御やプルダウンで表示させる項目も設定できます。

なんか思いの外サクッと行かず、疲れたので、一旦ここまで。

こちらの方の記事もご参考になるかと思います!
http://qiita.com/pokkuri/items/83cc234bf57a6d5561ed

4
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
3