運営サイト
パートナーサイト
ヨシダ制作メモ
らくがき日報ゆるゆるスマホbiz活用ひまつぶしゲーム選ゆるゆるPHP入門CakePHPでCMS

ウェブ制作のあれこれをメモります。

<< elRTE,elFinder…  |   ヨシダ制作メモ TOP  |  

elRTE,elFinder(jQueryベースのWYSIWYGエディタ)のインストール方法 その2

2010年05月11日 15:38

●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
ディレクトリのパーミッションを適切なものに変更します。

 

js/elrte.full.js
の2569行目から始まるtoolbarsの設定に'elfinder'を記述します。

 

complete : ['elfinder', 'save', 'copypaste',~~~],

elrte.htmlをブラウザで開いて緑色のフォルダアイコンが表示されればOKです。 

また、
/connectors/php/connector.php
の33行目にファイルのアップロード先ディレクトリの絶対パスを記述します。

'URL' => 'http://あなたのドメイン.com/files/',

以上です。

<< elRTE,elFinder…  |   ヨシダ制作メモ TOP  |