ウェブ制作のあれこれをメモります。
elRTE,elFinder（jQueryベースのWYSIWYGエディタ）のインストール方法 その2
●elFinder(ファイルマネージャー)インストール
前回からの続きです。
elFinder（ファイルマネージャー）を搭載したelRTE（WYSIWYGエディタ）を設置方法です。
elFinder（執筆時version1.1）はPHPまたはPythonの使える環境が必要になりますが、今回はPHPを利用して設置します。
Connector, at the moment there are connectors for PHP and Python
Image preview and thumbnails creation requires:
PHP: mogrify utility or GD/Imagick module
Python: PIL library
本家に記述はないようですがPHPバージョンは5以上っぽいです。
私はPHP4であれこれいじっていてしばらくはまってしまいました。
まず、elRTEをドキュメントルートにアップロードします。(Changelogファイル, READMEファイル, srcディレクトリ以下は必要ありません)
ディレクトリ構造は次の通り。
/ドキュメントルートのパス
/css
elrte.full.css
elrte-inner.css
/images
elrte-toolbar.png
loading.gif
/js
/i18n
/ui-themes
elrte.full.js
elrte.min.js
jquery-1.3.2.min.js
jquery-ui-1.7.2.custom.min.js
elrte.html
次にelFinderをダウンロードして解凍します。
elRTEにelFinderを組み込む場合、重複しているファイルがかなりあるので必要なフォルダとファイルだけドキュメントルートにアップロードします。
ディレクトリ構造は次の通りになります。
/ドキュメントルートのパス
/connectors // ←このフォルダごと全部と
/css
elrte.full.css
elrte-inner.css
elfinder.css // ←これと
/files // ←これと
/images
elrte-toolbar.png
loading.gif
icons-big.png // ←これと
icons-small.png // ←これと
ql.png // ←これと
spinner.gif // ←これと
toolbar.png // ←これと
/js
/i18n
/ui-themes
elrte.full.js
elrte.min.js
jquery-1.3.2.min.js
jquery-ui-1.7.2.custom.min.js
el-finder.full.js // ←これをアップロードします。
elrte.html
次に、elrte.htmlを以下のように書き換えます。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>elRTE</title>
<!-- jQuery and jQuery UI -->
<script src="js/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="js/ui-themes/base/ui.all.css" type="text/css" media="screen" charset="utf-8">
<!-- elRTE -->
<script src="js/elrte.full.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/elrte.full.css" type="text/css" media="screen" title="elRTE" charset="utf-8">
<!-- elFinder -->
<script src="js/elfinder.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/elfinder.css" type="text/css" media="screen" charset="utf-8">
<script type="text/javascript" charset="utf-8">
$().ready(function() {
var opts = {
cssClass : 'el-rte',
toolbar : 'complete',
cssfiles : ['css/elrte-inner.css'],
fmOpen : function(callback) {
$('<div id="myelfinder" />').elfinder({
url : 'http://あなたのドメイン.com/connectors/php/connector.php', //※
lang : 'en',
dialog : { width : 900, modal : true, title : 'Files' },
closeOnEditorCallback : true,
editorCallback : callback
})
}
}
$('#editor').elrte(opts);
})
</script>
</head>
<body>
<div id="editor">
エディタ本文スペースです。
</div>
</body>
</html>
※「あなたのドメイン.com」の箇所は適宜ご利用の環境のものに変更してください。
ファイルのアップロード先となる
/files
ディレクトリのパーミッションを適切なものに変更します。
complete : ['elfinder', 'save', 'copypaste',～～～],
elrte.htmlをブラウザで開いて緑色のフォルダアイコン
が表示されればOKです。
また、
/connectors/php/connector.php
の33行目にファイルのアップロード先ディレクトリの絶対パスを記述します。
'URL' => 'http://あなたのドメイン.com/files/',
以上です。