（仰々しいタイトルですが、ただお試しで使ってみただけです。すみません）
クライアント様から「WYSIWYGエディター入れてくれや。画像もアップロードできるやつね。ヨロ！」てなオーダーが来たのでさっそく調査。
「WYSIWYGってなによ！」って人はこちら。
数年前にWeb制作会社所属のときにもよく使ってたTinyMCEを入れてみたけど、日本語化のプロジェクトが中途半端で、かつ、プラグインで対応できてた画像アップロードや管理機能が有料になっとるんで却下。
日本語インターフェイス対応で、その日本語が不自然じゃなくて、機能的にシンプルなもので、画像アップロード＆管理ができるWYSIWYGエディターを探してたら、CKEditorに遭遇。ちょいと前まではFCKEditorと名乗ってたみたい。なんとなく聞き覚えあるなぁ。とりあえず使ってみた。
インストール
ひとまず下記からダウンロード。
・Download | CKEditor
んで、ファイルのアップロードと管理も必要なので、別途CKFinderも。
・Download | CKFinder – Ajax File Manager
ともに圧縮されているので、解凍したらckeditorとckfinderというフォルダができました。自分でcktoolsというフォルダを作って、解凍したフォルダをココにぶっ込んでアップロード。
設定
ひとまずサンプルファイルにアクセスしてみた。いま一番必要としているのは、画像がアップロードできるエディタなので、
/cktools/ckfinder/_samples/ckeditor.html
をお試し。
で、エラー。
Error: CKEditor not found.This sample assumes that CKEditor (not included with CKFinder) is installed inthe “/ckeditor/” path. If you have it installed in a different place, just editthis file, changing the wrong paths in the (line 5) and the “BasePath”value (line 32).
そうそう逝きません。はいはい、パスが違うのね。
ckeditor.htmlを開いて、
<script src="/ckeditor/ckeditor.js" type="text/javascript"></script>
という部分のパスを変更。今回のパスの構造であれば、
<script src="../../ckeditor/ckeditor.js" type="text/javascript"></script>
で宜しい。次に
CKFinder.setupCKEditor( editor, '../' ) ;
ここはたまたまそのままでも宜しい。けど、実際に使うときには変更が必要。フォームを実装するファイルから見たckeditorへの相対パスに変更すればいい。
これでエディターまでは動くようになりました。
めでたしめでたし。
で、実際にファイルをアップロードしようとするとエラー。
ファイルブラウザはセキュリティ上の制限から無効になっています。システム担当者に連絡をして、CKFinderの設定をご確認下さい。
おお、エラーメッセージまで親切。親切すぎて何を変更すれば良いかさっぱりわからん。すばらしくセキュアな感じになってますwww
まぁとりあえずconfig.phpってのがあるんで、間違いなかろうと開いてみたら案の定ありました。
だけど、false→TRUEに変更するだけの設定だけど、その前に仰々しい忠告メッセージが……。
// WARNING : DO NOT simply return “true”. By doing so, you are allowing
// “anyone” to upload and list the files in your server. You must implement
// some kind of session validation here. Even something very simple as…// return isset($_SESSION[‘IsAuthorized’]) && $_SESSION[‘IsAuthorized’];
// …（続く）
（意訳）バカヤロウこの野郎！誰でもアップできるようになっちゃアブねェだろうが！簡単に“true”にするんじゃねーよ。（続く
てな事がかかれてるけど、華麗にスルーして変更。ようは、ちゃんとセッションとかで認証してから使うようにしなさい的なことなんですけど、管理系のシステム作ってるんで、もうすでに大丈夫だろう、たぶん、知らんけど。
return true;
んで、ひとまずアップロードできるようになりました。
実際に、form.htmlというファイルをcktoolsフォルダと同階層に置くのであれば、
<!DOCTYPE HTML>
<html lang="ja-JP">
<head>
<script src="cktools/ckeditor/ckeditor.js" type="text/javascript"></script>
<script src="cktools/ckfinder/ckfinder.js" type="text/javascript"></script>
</head>
<body>
<form action="hoge.php" method="post">
<textarea id="article" name="article"></textarea>
</form>
<script type="text/javascript">// <![CDATA[
CKEDITOR.config.toolbar = [
['Source','Preview','Templates'],
['Undo','Redo'],
['Bold','Italic','Underline'],
['Image','Link','Unlink'],
['Styles','Format','FontSize'],
];
var editor = CKEDITOR.replace('article');
editor.setData('ここに<b><i>記事</i></b>を書きます。');
CKFinder.setupCKEditor(editor, 'cktools/ckfinder/');
//]]></script>
</body>
</html>
こんだけでOK。デフォルトの設定だと、文字草食系……、装飾系のボタンがたくさん出てきちゃうから、なんとか1行に納めるために減らしてます。12〜18行あたりがそれ。
$baseUrl = '/upload/userfiles/';
config.phpの↑イジればファイルのアップロード先も変更可。
うーーーん、結構シンプルで使い易い。採用です。
世の中便利になったもんだね。おれ廃業だわ……。
自分用であれば完全無料？
エディタ本体のCKEditorも、金（US$375）さえ積めばライセンス表示しなくていいみたい。つか、ソース以外どこにもCKEditorって出てこないんだけどwww
あと、ファイルアップロード＆管理のCKFinderは、各所に「DEMO版です」って表示が出るから、Buy now:US$59 でそのコメント取っ払いましょう。納品時にね。世の中金だぜ。