Mar 03

CKEditor,CKFinderを使ってWORDのようなフォームを作る

JavaScript, php コメントはページの下に

 CKEditor,CKFinderの使い方

WordPressなどでは、TinyMCEが使われていますが、画像などのアップロードをしようとすると、TinyMCEだけを組み込んでもできません。

そこで、TinyMCEに似ていて、なおかつファイルアップロードまで簡単に組み込めてしまえるCKEditor,CKFinderを使うことにします。

CKEditorがTinyMCE、CKFinderがファイルアップロード機能（実際は管理も出来ますが今回は省略）です。

ダウンロード

ckeditorを以下から（ver3.2)
http://ckeditor.com/

ckfinderを以下から（今回はPHP版を ver1.4.3）
http://ckfinder.com/

ドキュメントは以下に（CKEditor,CKFinderともに）
http://docs.cksource.com/

セットアップ

それぞれ解凍します。好きな場所に置いて、_samples/内を呼びましょう。サンプルが表示されます。（サーバを立ち上げておいてください）

 画像のアップロードについて

画像のアップロード機能は、CKFinderのサンプル ckfinder/_samples/js/ckeditor.htmlを立ち上げる。
何も変更していないと、CKEditor.jsが見つからないといわれるので、ckeditor.htmlをテキストエディタで開き、ckeditor.jsへのパスを通すと大丈夫。

JAVASCRIPT:
  1. <script type="text/javascript" src="../../../ckeditor/ckeditor.js"></script>
  2. <script type="text/javascript" src="../../ckfinder.js"></script>

しかし、これだけではだめで、実際アップロードするときは、Ajax経由でckfinder/config.phpを見るので、とりあえず動かしたいなら、CheckAuthentication()の戻り値をtrueに変更する。
※コメントにも書いてあるように、return trueはセキュリティ上よろしくないので、システム上でログインしているユーザーのみＯＫにするような仕組みを作っておくこと。

PHP:
  1. function CheckAuthentication()
  2. {
  3. return true;
  4. }

あとは、 アップロードされるディレクトリを作っておけばよい。
デフォルトは以下のディレクトリなので、サーバルートにckfinder/userfiles/を作ればＯＫ。

PHP:
  1. $baseUrl = '/ckfinder/userfiles/';

CKEditorとCKFinderの仕組み

 ckfinder/_samples/js/ckeditor.htmlのソースを見てみましょう。実はすごく単純です。
以下に抜粋して必要な場所のみを記載します。

HTML:
  1. <html xmlns="http://www.w3.org/1999/xhtml">;
  3. <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
  4. <script type="text/javascript" src="ckfinder/ckfinder.js"></script>
  5. </head>
  8. <textarea id="editor1" name="editor1" rows="10" cols="80"></textarea>
  9. <script type="text/javascript">
  10. // This is a check for the CKEditor class. If not defined, the paths must be checked.
  11. if ( typeof CKEDITOR == 'undefined' )
  12. {
  13. //CKEDITORが見つからなかった
  14.  
  15. }
  16. else
  17. {
  18. var editor = CKEDITOR.replace( 'editor1' );
  19. editor.setData( '<p>最初にテキストエリアに表示する.</p>' );
  20.  
  21. // Just call CKFinder.SetupCKEditor and pass the CKEditor instance as the first argument.
  22. // The second parameter (optional), is the path for the CKFinder installation (default = "/ckfinder/").
  23. //CKFinderのセットアップ。CKEditorであるeditorと、ckfinderインストールパスを
  24. CKFinder.SetupCKEditor( editor, 'ckfinder/' ) ;
  25.  
  26. // It is also possible to pass an object with selected CKFinder properties as a second argument.
  27. // CKFinder.SetupCKEditor( editor, { BasePath : '../../', RememberLastFolder : false } ) ;
  28. }
  29. </script>
  30. </p>
  31. </body>
  32. </html>

次回はCKEditorを中心にカスタマイズしていきたいと思います。

前後の記事

« PHP 全角スペースを半角スペースに置換し、キーワード抽出｜｜CKEditorを使ったフォームを作成する。 »

関連した記事

トラックバック＆Pingback

この記事が気に入ったりした方は、自分のブログを書くときに「下のURLをコピーして、自分のブログ投稿時のトラックバック欄にペースト」してください。つながります。
URL:

  1. ckeditor,ckfinder part1 | VPS@DTIメモ Says:
    4 月 26th, 2010 at 11:29:18

    […] 小山太郎.com さんのサイトを参考に、ちょっと触ってみた。 […]

  2. EC-CUBEの商品詳細をWYSIWYGエディタ（CKEditer）にするモジュール編集を簡単に、より美しくCKEditer for EC-CUBE | レポート | 日本電子工藝社 Says:
    7 月 28th, 2010 at 20:18:25

    […] CKEditor,CKFinder を使ってWORDのようなフォームを作る […]

コメント　（ 0 ）

コメント記入欄

Copyright(c) 小山太郎.com　All rights reserved.