ブログの管理画面の様な、記事編集フォームを自分のサイトに取り込む方法です。
こういったフォームは、リッチテキストエディタやwysiwygエディタ、HTMLエディタなどと言われ、
wordpressの記事編集の様な操作を可能とします。
オフィスシリーズでいうと、ワードの様な操作感でしょうか。
簡単にコンテンツの編集、作成が可能なので、とてもユーザにとって便利かと思います。
今回は、そんなHTMLエディタの導入方法です。
画像添付関係は有料だというツールが多く出回っていますが、完全無料で最後まで解説いたします。
- 無料で高機能なHTMLエディタを入手しよう
- HTMLエディタを環境に合わせて調整する
- elRTEを日本語化しよう！
- HTMLエディタの値の取得、HTMLエディタへ値をセット
- elFinderを組み合わせて画像のアップロードを可能にする
- elRTEにelFinderを組み込もう
- 実際にオンラインファイルマネージャーを操作してみよう
- ファイルの保存先をカスタマイズしよう
無料で高機能なHTMLエディタを入手しよう
今回使用するのは、オープンソースのWYSIWYGエディタ【elRTE】です。
オープンソースなので、完全フリーで使用出来る上に、ライセンスはBSDです。
商用利用も可能なので、気兼ねなく導入する事が出来ますね。
elRTE自体はjQuery UIを利用したJavaScriptにて作成されていますので、
簡単にブラウザへ（あなたのサイトへ）導入する事が出来ます。
そして、カスタマイズ性も柔軟ですので、
それぞれの環境、使用目的にあったHTMLエディタへの調整も簡単です。
このHTMLエディタはとても高機能で、単純なテキスト編集機能は勿論の事、
スタイルの変更や画像、表、リストなどの高度なHTML構築も
感覚的に操作できます。
また、elRTE自体はロシアのアプリですが、ちゃんと日本語化にローカライズファイルも容易されていますので、
ユーザもとても扱いやすいのではないでしょうか。
では早速、下記の公式サイトより最sんバージョンをダウンロードしてください。
（記事執筆時点では、最新版は1.3です。以後の解説も1.3をベースにします）
オープンソースWYSIWYGエディタ for website
http://elrte.org/jp/
ダウンロードすると、下記の様なファイル構成になっています。
C:.
│ Changelog
│ elrte.html
│ README
│
├─css
│ │ elrte-inner.css
│ │ elrte.full.css
│ │ elrte.min.css
│ │
│ └─smoothness
│ │ jquery-ui-1.8.13.custom.css
│ │
│ └─images
│ ui-bg_flat_0_aaaaaa_40x100.png
│ ui-bg_flat_75_ffffff_40x100.png
│ ui-bg_glass_55_fbf9ee_1x400.png
│ ui-bg_glass_65_ffffff_1x400.png
│ ui-bg_glass_75_dadada_1x400.png
│ ui-bg_glass_75_e6e6e6_1x400.png
│ ui-bg_glass_95_fef1ec_1x400.png
│ ui-bg_highlight-soft_75_cccccc_1x100.png
│ ui-icons_222222_256x240.png
│ ui-icons_2e83ff_256x240.png
│ ui-icons_454545_256x240.png
│ ui-icons_888888_256x240.png
│ ui-icons_cd0a0a_256x240.png
│
├─images
│ │ elrte-toolbar.png
│ │ google-maps.png
│ │ iframe.png
│ │ loading.gif
│ │ media-director.png
│ │ media-flash.png
│ │ media-quicktime.png
│ │ media-realaudio.png
│ │ media-rutube.png
│ │ media-vimeo.png
│ │ media-winmedia.png
│ │ media-youtube.png
│ │ outline-div.png
│ │ outline-p.png
│ │ pagebreak.gif
│ │ pixel.gif
│ │ yandex-maps.png
│ │
│ └─smileys
│ evilgrin.png
│ grin.png
│ happy.png
│ smile.png
│ surprised.png
│ tongue.png
│ unhappy.png
│ waii.png
│ wink.png
│
├─js
│ │ elrte.full.js
│ │ elrte.min.js
│ │ jquery-1.6.1.min.js
│ │ jquery-ui-1.8.13.custom.min.js
│ │
│ └─i18n
│ elrte.ar.js
│ elrte.ca.js
│ elrte.cs.js
│ elrte.da.js
│ elrte.de.js
│ elrte.en.js
│ elrte.es.js
│ elrte.fa.js
│ elrte.fr.js
│ elrte.hr.js
│ elrte.hu.js
│ elrte.it.js
│ elrte.jp.js
│ elrte.ko.js
│ elrte.lv.js
│ elrte.nl.js
│ elrte.pl.js
│ elrte.pt_BR.js
│ elrte.ru.js
│ elrte.sk.js
│ elrte.th.js
│ elrte.tr.js
│ elrte.uk.js
│ elrte.vi.js
│ elrte.YOUR_LANG.js
│ elrte.zh_CN.js
│ elrte.zh_TW.js
│
└─src
│ about.txt
│ elrte.src.html
│ Makefile
│ post.php
│
├─ellib
│ ├─css
│ │ elcolorpicker.css
│ │ elcommon.css
│ │ eldialogform.css
│ │ elpaddinginput.css
│ │ elreset.css
│ │ elselect.css
│ │
│ ├─images
│ │ eldirtree.png
│ │ loading.gif
│ │
│ └─js
│ eldialogform.js
│ eli18n.js
│ jquery.elborderselect.js
│ jquery.elcolorpicker.js
│ jquery.elpaddinginput.js
│ jquery.elselect.js
│
└─elrte
├─css
│ elrte-inner.css
│ elrte.css
│ inner-example.css
│
├─images
│ │ elrte-toolbar.png
│ │ google-maps.png
│ │ iframe.png
│ │ media-director.png
│ │ media-flash.png
│ │ media-quicktime.png
│ │ media-realaudio.png
│ │ media-rutube.png
│ │ media-vimeo.png
│ │ media-winmedia.png
│ │ media-youtube.png
│ │ outline-div.png
│ │ outline-p.png
│ │ pagebreak.gif
│ │ pixel.gif
│ │ yandex-maps.png
│ │
│ └─smileys
│ evilgrin.png
│ grin.png
│ happy.png
│ smile.png
│ surprised.png
│ tongue.png
│ unhappy.png
│ waii.png
│ wink.png
│
└─js
│ elRTE.DOM.js
│ elRTE.filter.js
│ elRTE.history.js
│ elRTE.js
│ elRTE.options.js
│ elRTE.selection.js
│ elRTE.ui.js
│ elRTE.utils.js
│ elRTE.w3cRange.js
│
├─i18n
│ elrte.ar.js
│ elrte.ca.js
│ elrte.cs.js
│ elrte.da.js
│ elrte.de.js
│ elrte.en.js
│ elrte.es.js
│ elrte.fa.js
│ elrte.fr.js
│ elrte.hr.js
│ elrte.hu.js
│ elrte.it.js
│ elrte.jp.js
│ elrte.ko.js
│ elrte.lv.js
│ elrte.nl.js
│ elrte.pl.js
│ elrte.pt_BR.js
│ elrte.ru.js
│ elrte.sk.js
│ elrte.th.js
│ elrte.tr.js
│ elrte.uk.js
│ elrte.vi.js
│ elrte.YOUR_LANG.js
│ elrte.zh_CN.js
│ elrte.zh_TW.js
│
└─ui
about.js
anchor.js
blockquote.js
copy.js
css.js
direction.js
div.js
docstructure.js
elfinder.js
flash.js
fontname.js
fontsize.js
forecolor.js
formatblock.js
fullscreen.js
horizontalrule.js
image.js
indent.js
justifyleft.js
link.js
nbsp.js
outdent.js
pagebreak.js
pasteformattext.js
pastetext.js
save.js
smiley.js
stopfloat.js
table.js
tablerm.js
tbcellprops.js
tbcellsmerge.js
tbcellsplit.js
tbcollbefore.js
tbcolrm.js
tbrowbefore.js
tbrowrm.js
undo.js
unlink.js
とても沢山のファイルがありますね。
しかし、実際に使用するのはわずかで、殆どが使用しませんので、
ここから使用するものを選別しましょう。
使用するファイルだけを残すと、下記の様なファイル構成になります。
C:.
│ elrte.html
│
├─css
│ │ elrte-inner.css
│ │ elrte.full.css
│ │ elrte.min.css
│ │
│ └─smoothness
│ │ jquery-ui-1.8.13.custom.css
│ │
│ └─images
│ ui-bg_flat_0_aaaaaa_40x100.png
│ ui-bg_flat_75_ffffff_40x100.png
│ ui-bg_glass_55_fbf9ee_1x400.png
│ ui-bg_glass_65_ffffff_1x400.png
│ ui-bg_glass_75_dadada_1x400.png
│ ui-bg_glass_75_e6e6e6_1x400.png
│ ui-bg_glass_95_fef1ec_1x400.png
│ ui-bg_highlight-soft_75_cccccc_1x100.png
│ ui-icons_222222_256x240.png
│ ui-icons_2e83ff_256x240.png
│ ui-icons_454545_256x240.png
│ ui-icons_888888_256x240.png
│ ui-icons_cd0a0a_256x240.png
│
├─images
│ │ elrte-toolbar.png
│ │ google-maps.png
│ │ iframe.png
│ │ loading.gif
│ │ media-director.png
│ │ media-flash.png
│ │ media-quicktime.png
│ │ media-realaudio.png
│ │ media-rutube.png
│ │ media-vimeo.png
│ │ media-winmedia.png
│ │ media-youtube.png
│ │ outline-div.png
│ │ outline-p.png
│ │ pagebreak.gif
│ │ pixel.gif
│ │ yandex-maps.png
│ │
│ └─smileys
│ evilgrin.png
│ grin.png
│ happy.png
│ smile.png
│ surprised.png
│ tongue.png
│ unhappy.png
│ waii.png
│ wink.png
│
└─js
│ elrte.full.js
│ elrte.min.js
│ jquery-1.6.1.min.js
│ jquery-ui-1.8.13.custom.min.js
│
└─i18n
elrte.jp.js
elrte.YOUR_LANG.js
主に、巨大だったsrc配下が全てなくなりました。
src配下はサンプルの様なものなので、今回は削除してしまいましょう。
そして、ローカライズファイルも、今回は日本語での使用を前提としていますので、
日本語以外のファイルを削除しています。
これで、大分見通しがしやすくなったのではないでしょうか。
それではこれから実際の使用へ向けた調整を行います。
HTMLエディタを環境に合わせて調整する
それでは早速elrte.htmlをを開いて下さい。
もう既に、サンプルのHTMLエディタが下記の様に出来上がっているかと思います。
エディタ部分の文字に対して、上部メニューバーによる操作で様々なスタイルを適用する事が出来ます。
リアルタイムで編集できる、エディタですね。メニュー数だけで見ても、かなり高機能です。
そして、画面下部の『Editor』と『Source』がモードの切り替えになっています。
『Editor』では、現状でのHTMLの見え方をリアルタイムで表現し、
『Source』では、実際に内部で構築されているHTMLを閲覧、
そして直接触れて修正する事も可能です
編集が完了し、実際にポストされるのは、『Source』の文字列だとお考え下さい。
では、コレだけでも十分ですが更に使いやすくしましょう
elRTEを日本語化しよう！
色々操作してみると、マウスオーバーの説明や項目タイトル、メニュー名などが
英語なので不便を感じる事もあるかと思います。
elRTEは、日本語用のローカライズファイルを用意していますので、早速適用させて見ましょう。
elrte.htmlを開きますと、17行目付近に
とあります。ローカライズファイルを読み込んでいる箇所ですので、この部分を日本語用に書き換えます。
続いて、19行目付近からあります初期設定部分の記述を下記の様に修正します
具体的には、
// lang : 'ru',のコメントアウトを解除し、『ru』の部分を『jp』へ変更します。
これで日本語化は完了です。
ブラウザを更新し、確認してみましょう。
HTMLエディタの値の取得、HTMLエディタへ値をセット
実際に使用する際には、HTMLエディタにて編集した内容を
サーバへ送信するかと思います。
編集した値を取得するには、jQueryの記法を使用します。
// 内容を取得する
$('#editor').elrte('val'));
elrte.htmlのエディタ部分は、IDとして『editor』と指定されたDIVがあるかと思います。
そのIDにて、jQueryオブジェクトを作成し、elrte()メソッドを呼び出します。
引数に、『val』を指定する事で、HTMLエディタの内容を取得する事が出来ます。
逆に、エディタへ向けて値をセットする場合は、第二引数にセットする値を指定します
// 内容をセットする
$('#editor').elrte('val', 'ここにセットするHTMLを記述');
後はJavaScriptでの制御となりますので、
割愛させて頂きますが、submitしても良いですし、ajaxにて送信しても良いかと思います。
そのままプレビューさせたりも出来ますし、その辺りは技術者の目的にあった利用を行ってください。
かなり汎用的に使用出来る用に、HTMLはただの文字列として扱えます。
elFinderを組み合わせて画像のアップロードを可能にする
elRTE単体では、画像のアップロードには対応していません。
この章では、画像等のファイルを管理する事の出来る
オンラインファイルマネージャーと連動させたいと思います。
連動させるのは、elRTEと同じ運営元のオープンソース【elFinder】を使用します。
【elFinder】では、デスクトップのエクスプローラ、フォルダの様なデザイン、操作感にて画像等のファイルを
手軽にアップロード、ダウンロード、貼り付け、複製、削除、リネーム、プレビュー等が出来、
フォルダも作成出来ますのでツリー構造にて管理する事もできます。
これだけの高機能なファイルマネージャがブラウザ上のダイアログにて操作出来るといった優れものです。
このelFinderだけでも、とても便利な代物ですが、
elRTEと同じ運営元なだけあって、elRTEへの導入、連携がとても簡単に出来てしまいます。
とても便利なので、是非とも連携させましょう。
早速、elFinderを取得します。
elFinder - file manager for web
http://elfinder.org/
執筆当時では、バージョン『2.0-rc1』です。
この先の説明も、『2.0-rc1』をベースに行います。
ダウンロードすると下記の様なファイル構成になっているかと思います。
C:.
│ Changelog
│ elfinder.html
│ README.md
│
├─css
│ elfinder.min.css
│ theme.css
│
├─files
├─img
│ arrows-active.png
│ arrows-normal.png
│ crop.gif
│ dialogs.png
│ icons-big.png
│ icons-small.png
│ logo.png
│ progress.gif
│ quicklook-bg.png
│ quicklook-icons.png
│ resize.png
│ spinner-mini.gif
│ toolbar.png
│
├─js
│ │ elfinder.min.js
│ │
│ ├─i18n
│ │ elfinder.ar.js
│ │ elfinder.bg.js
│ │ elfinder.ca.js
│ │ elfinder.cs.js
│ │ elfinder.de.js
│ │ elfinder.es.js
│ │ elfinder.fr.js
│ │ elfinder.hu.js
│ │ elfinder.jp.js
│ │ elfinder.LANG.js
│ │ elfinder.nl.js
│ │ elfinder.no.js
│ │ elfinder.pl.js
│ │ elfinder.pt_BR.js
│ │ elfinder.ru.js
│ │ elfinder.zh_CN.js
│ │
│ └─proxy
│ elFinderSupportVer1.js
│
└─php
connector.php
elFinder.class.php
elFinderConnector.class.php
elFinderVolumeDriver.class.php
elFinderVolumeLocalFileSystem.class.php
elFinderVolumeMySQL.class.php
mime.types
MySQLStorage.sql
ここから、必要なファイルを選別し、elRTEへ組み込みたいと思います。
使用するファイルは下記の通りです
C:.
│
├─css
│ elfinder.min.css
│ theme.css
│
├─files
├─img
│ arrows-active.png
│ arrows-normal.png
│ crop.gif
│ dialogs.png
│ icons-big.png
│ icons-small.png
│ logo.png
│ progress.gif
│ quicklook-bg.png
│ quicklook-icons.png
│ resize.png
│ spinner-mini.gif
│ toolbar.png
│
├─js
│ │ elfinder.min.js
│ │
│ ├─i18n
│ │ elfinder.jp.js
│ │
│ └─proxy
│ elFinderSupportVer1.js
│
└─php
connector.php
elFinder.class.php
elFinderConnector.class.php
elFinderVolumeDriver.class.php
elFinderVolumeLocalFileSystem.class.php
elFinderVolumeMySQL.class.php
mime.types
MySQLStorage.sql
上記をそれぞれelRTEの適切な場所に配置します。
proxyや、phpの様にelRTEに存在しないディレクトリは作成してください。
imgフォルダ内の画像は、elRTEのimagesフォルダ内へ移動させます。
filesディレクトリは空ですが、忘れずに追加しましょう。後程の作業ディレクトリとなります。
これでオンラインファイルマネージャーとHTMLエディタを連携させる準備が出来ました。
これから連携させる為の設定を実際に記述していきます。
elRTEにelFinderを組み込もう
ここからは、実際にオンラインファイルマネージャーを使用しますので、
通信出来る環境におく必要があります。
実際のサーバへ設置するか、XAMPP等でサーバ環境を再現して下さい。
環境が構築できましたら、早速elFinderを組み込んで行きましょう。
まずはelrte.htmlのヘッダの設定を追加します。
<head></head>内に下記elFinderの設定を追記して下さい。
内容と致しましては、実際のメインプログラムとデザインファイルを読み込み、
ローカライズ様に日本語セットを読み込んでいます。
上記の追記が済みましたら、下記の部分に新たにelFinderの呼び出しを追記します
下記を追加
// elfinder
fmOpen : function(callback) {
$('
').dialogelfinder({
url : './php/connector.php', // connector URL (REQUIRED)
lang: 'jp',
commandsOptions: {
getfile: {
oncomplete: 'destroy' // destroy elFinder after file selection
}
},
getFileCallback: callback // pass callback to editor
});
}
完成
オプションを追加する形なので、下記の上の末にカンマが追記されている事に注意して下さい。
カンマが無いと、エラーとなりエディタ機能事態が消滅してしまいます。
よく忘れがちですので、念の為確認して下さい
cssfiles : ['css/elrte-inner.css'],
次に、CSSを現在の環境へあわせます。
css/elfinder.min.cssを開き、画像のパスを調整します。
現在では、elFinderの頃のパス表記ですので、画像フォルダ名が『img』となっているかと思います。
『:url('../img/』で検索して、『:url('../images/』へ置換しましょう。
これでオンラインファイルマネージャーでも適切に画像が表示される様になります。
HTMLエディタへのオンラインファイルマネージャーの導入は完了です。
実際にオンラインファイルマネージャーを操作してみよう
elFinderを起動させる為には、elRTE上部のツールバーの中からイメージを選択します
そうすると、画像挿入ダイアログが出現します。
ここで画像のURLやタイトル、代替テキストや挿入時のサイズやマージン、ボーダーといった設定を行います。
画像URLの横にあるフォルダアイコンをクリックする事で、ファイルマネージャが立ち上がり、
アップロードされたファイルを貼り付ける事が出来ます。
画像を右クリックして、プレビューを選択すると画像を拡大して確認出来ますので、
とても便利です。
ファイルマネージャが立ち上がりましたら、後はダイアログ内で
様々なファイル管理をする事が出来ます。
とっても高機能なので、色々触ってみてください。
右クリックやショートカットキーにも対応していますので、
本当にデスクトップアプリケーションの様な操作性です。
そして、実際にHTMLエディタへの画像の挿入方法ですが、
ツールバーのアップロードアイコンをクリックして画像を選択し、
アップロードするか、ダイアログ上へドラッグ＆ドロップする事でファイルマネージャへ
アップロードする事が出来ます。
アップロードした画像をダブルクリックする事で、サムネイルが先程のプレビューの部分に表示されますので、
サイズ等を調整したらOKボタンで実際のHTMLエディタへ選択した画像を挿入する事が出来ます。
ファイルの保存先をカスタマイズしよう
elFinderはとても高機能で、文句無い作りや操作性なんですが、
このままですと、少し問題があります。
それは、あるフォルダ内の実ファイルを参照したダイアログなので、
HTMLエディタを使用しているユーザ間で共通で扱う事となり、
自分がアップしたファイルを他人に見られたり、削除されたりといった事象が発生します。
勿論、この様にファイルを共有したくない状態もあるかと思います。
そんな、ファイルマネージャを共有したくない方向けに、
ユーザそれぞれに専用のフォルダを容易してあげる方法をご説明いたします。
手を加えるのはJavaScriptだけではなく、PHPへの修正も行います。
では早速、./php/connector.phpを開いてみましょう。
ファイル内の34行目付近と、35行目付近に
それぞれファイルを保存する先のパスが記述されています。
デフォルトでは、『/../files/』の様になっているかと思います。
これは、elFinder導入時に作成した『files』を指しています。
今現在ですと、全てのユーザが『files』内を参照して操作してします事が問題です。
この操作対象までのパスをユーザ毎に切り替えてあげる事で、
専用のファイルマネージャを構築する事が出来そうです。
『/../files/user1』『/../files/user2』『/../files/user3』の様な形ですね。
しかし、このままでは誰様にパスを設定したら良いのか判別がつきません。
そこで、ユーザID等のパラメータを取得し、
そのIDを元にユーザを判別して適切なパスを設定すれば良さそうです
例えば、受け渡し可能なパラメータはGETにて送られてきますので、
ユーザIDをそのままパスへ適用させるとしたら
下記の様な形でしょうか。
$opts = array( // 'debug' => true, 'roots' => array( array( 'driver' => 'LocalFileSystem', // driver for accessing file system (REQUIRED) 'path' => '../files/'.$_GET['user_id'].'/', // path to files (REQUIRED) 'URL' => dirname($_SERVER['PHP_SELF']) . '/../files/'.$_GET['user_id'].'/', // URL to files (REQUIRED) 'accessControl' => 'access' // disable and hide dot starting files (OPTIONAL) ) ) );
これで、送られてきたユーザIDのフォルダを操作対象としますので、
ユーザ毎にプライベートなファイル管理スペースを提供する事が出来ます。
そして、次はパラメータの送信先の設定です。
送信先は、elrte.html内にて設定します。
elrte.html内の
url : './php/connector.php', // connector URL (REQUIRED)
が、先程編集したconnector.phpまでのパスです。
これが、実際のリクエストにも使用されますので、ここにパラメータを追加します。
url : './php/connector.php?user_id=123', // connector URL (REQUIRED)
これで、connector.phpへはGETパラメータにて『user_id』をキーにした『123』というパラメータが送信されます。
connector.phpにて$_GET['user_id']で値を受け取っていますので、『123』というフォルダが操作対象になります。
ちなみに、存在しないフォルダは自動的に作成されますので、サーバ側のパーミッションにだけ気を付ければ
特に予めフォルダを用意しておく手間も必要ありません。
この送信パラメータをユーザ毎に動的に切り替える事で、
ユーザ毎にプライベートなファイル管理スペースを提供する事が出来ます。
とても便利なので、管理画面などでリッチテキストエディタを採用したい時は、
是非とも『elRTE』と『elFinder』の導入を検討して下さい。
ファイル管理付きでここまで高機能で無料なwysiwygリッチコンテンツHTMLエディタは他には無く、
私が思うに、最強のwysiwygリッチコンテンツHTMLエディタだと思います。
お勧めです！！
Categories:
