CKeditorについて

FCKeditorの利用を検討していたところ次期バージョンのCKeditorというものがあることを知りました。

ひとまずサンプルをみたところインターフェースもいい感じなので是非使用したいのですが
画像をアップロードしたくイメージプロパティを開いたところローカルからアップロードが
できないようです。

具体的には『参照』のボタンがありませんでした。これを使用するための解決方法ってありますでしょうか？

調べてみたのですが方法がみつからずご存知の方がいっらしゃいましたらアドバイスをお願い致します。

No.3 ベストアンサー 回答者： salonpath 回答日時： 2009/09/20 20:27

うちもよく分かってないのでとりあえずパスを通しただけですが、その手順を書きますね。

1.
空のフォルダCKを作成

2.
CKEditor（以下cke）とCKFinder（以下ckf）を解凍してフォルダCKに入れる

3.
head内
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="ckfinder/ckfinder.js"></script>

body内
<textarea id="editor1" name="editor1" rows="10" cols="80"></textarea>
<script type="text/javascript">

// This is a check for the CKEditor class. If not defined, the paths must be checked.
if ( typeof CKEDITOR == 'undefined' )
{
document.write(
'<strong><span style="color: #ff0000">Error</span>: CKEditor not found</strong>.' +
'This sample assumes that CKEditor (not included with CKFinder) is installed in' +
'the "/ckeditor/" path. If you have it installed in a different place, just edit' +
'this file, changing the wrong paths in the &lt;head&gt; (line 5) and the "BasePath"' +
'value (line 32).' ) ;
}
else
{
var editor = CKEDITOR.replace( 'editor1' );
editor.setData( '<p>Just click the <b>Image</b> or <b>Link</b> button, and then <b>&quot;Browse Server&quot;</b>.</p>' );

// Just call CKFinder.SetupCKEditor and pass the CKEditor instance as the first argument.
// The second parameter (optional), is the path for the CKFinder installation (default = "/ckfinder/").
CKFinder.SetupCKEditor( editor, '../../' ) ;

// It is also possible to pass an object with selected CKFinder properties as a second argument.
// CKFinder.SetupCKEditor( editor, { BasePath : '../../', RememberLastFolder : false } ) ;
}

</script>

のhtmlをindex（任意の名前）という名前で作成してCKフォルダに入れる

そうするとこうゆう階層になってるハズで
CKフォルダ
├ckeフォルダ
├ckfフォルダ
└index.html

index.htmlを開いてアップロードが表示されるか確認してみてください。
ここまでしかわからないです。

この回答へのお礼

お返事ありがとうございます。
手順通り試したところなんとかボタンが表示されるところまでたどり着きました。
サーバーブラウザーボタンを押すとurlが違うようでページが表示されない状態です。

hoge.com/ckfinder.html?type=Images&CKEditor=editor1&CKEditorFuncNum=1&langCode=ja

となっておりこれのパスを通せば大丈夫かと思うのですがどこで設定するものかご存知でしょうか？

お礼日時：2009/09/20 23:47

No.5 回答者： salonpath 回答日時： 2009/09/21 15:19

>return false;をreturn true;

trueに変更したらアップロードも出来ました。
勉強になりました、ありがとうございます。

No.4 回答者： salonpath 回答日時： 2009/09/21 10:16

おはようございます

ckfinderだと下みたいな呼び出し方してるようで
---
hoge.com/★/☆.html?type=Images&CKEditor=editor1&CKEditorFuncNum=1&langCode=ja
---
★の部分はhtmlの
CKFinder.SetupCKEditor( editor, '★' ) ;
この部分で

☆の方は
<script type="text/javascript" src="ckfinder/ckfinder.js"></script>
のjs内148行目あたりの
url += 'ckfinder.html' ;
のようです。

おそらくご自身でファイルをアップロードするプログラムを用意してあるんだと思いますのでhtmlの★の部分に全部書いちゃえば大丈夫なのかな。


ckfinderを使ってファイルをアップロードする機能はconfig.phpをいじくらないと有効化できないみたいなんですけど、
うちはphpやらperlやらはさっぱりなのでどこを変更すれば有効化できるかわかりませんでした。
ご存知、もしくは出来るようでしたら教えてください。

この回答へのお礼

お返事ありがとうございます。
アドバイスを参考にいろいろ試した結果ですが以下でなんとか動作するようです。

・index.htmlの
//ckfinderのパス
CKFinder.SetupCKEditor(editor, '/CK/ckfinder/');

・/CK/ckfinder/config.phpの32行目
//アップロードを許可するのであればtrueにする(多分・・・)
//ここがfalseだと動作しないようです。
return false;をreturn true;に

・/CK/ckfinder/config.phpの55行目
//アップロードファイル格納ディレクトリのパス指定
$baseUrl ='/home/public_html/CK/ckfinder/userfiles/';

私の環境では上記で問題なく動作しておりますがローカル環境なのでサーバー使用の場合はディレクトリの
パーミッション変更等が必要かと思います。

お礼日時：2009/09/21 12:15

No.2 回答者： salonpath 回答日時： 2009/09/20 19:38

ここを参考に

http://docs.fckeditor.net/CKEditor_3.x/Developer …

ckedtorのサイトにある、ckfinderをつかいました
http://ckfinder.com/download

この回答への補足

お返事ありがとうございます。
英文で具体的にどうしていいかわからない状態なのですが実装までの手順を教えていただけないでしょうか？

現状は、ckeditorとckfinderをダウンロードしております。そしてckfinderの全ファイルをckeditorへ移動しました。

ドキュメントをみると
CKEDITOR.replace( 'editor1', {
filebrowserBrowseUrl : '/browser/browse.php',
filebrowserUploadUrl : '/uploader/upload.php',
});
とあるのですが上記phpはどちらにもみつかりません。

調べてみたのですが実装する方法を解説しているサイトもみつからずお手上げ状態です。

補足日時：2009/09/20 19:54

No.1 回答者： salonpath 回答日時： 2009/09/20 13:41

winのfirefox3.5とie8で見てみるとアップロードのところにありました

なにか特殊なブラウザつかってますか？

この回答への補足

お返事ありがとうございます。
>winのfirefox3.5とie8で見てみるとアップロードのところにありました

私も全く同じ環境、ブラウザで確認しましたがやはりありません。

というか気づいたのですがボタン表示の箇所のhtmlにdisplay:noneが掛かっておりました。具体的には

<td class="cke_dialog_ui_hbox_last" style="width: 110px;">
<a id="91_uiElement" class="cke_dialog_ui_button" hidefocus="true" title="サーバーブラウザー" href="javascript:void(0)" style="display: none; -moz-user-select: none;">
<span class="cke_dialog_ui_button">サーバーブラウザー</span>
</a>
</td>

です。

イメージプロパティを開いても
・イメージ情報
・ハイパーリンク
・高度な設定
のタブのみが表示される状態です。

また、表示のhtmlは以下の通りです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="./ckeditor/ckeditor.js"></script>
<link href="./ckeditor/contents.css" rel="stylesheet" type="text/css"/>
</head>
<body>

<form action="sample_posteddata.php" method="post">
<p>
<label for="editor1">
Editor 1:</label><br/>
<textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://www.fckeditor.net/"&gt;CKEditor&lt;/a&gt; …
</p>
<p><input type="submit" value="Submit"/></p>
</form>

</body>
</html>

補足日時：2009/09/20 15:46