検索

ホームページ >バックエンド開発 >PHPチュートリアル >PHP_PHP チュートリアルの Ckeditor+Ckfinder での画像アップロード機能の構成

PHP_PHP チュートリアルの Ckeditor+Ckfinder での画像アップロード機能の構成

WBOY
WBOYオリジナル
2016-07-13 16:56:00861ブラウズ

タイトルから判断すると、Ckeditor は画像のアップロード機能をサポートしていないことがわかります。画像のアップロードをサポートするには、コンポーネント Ckfinder が必要です。 この記事では、Ckeditor+Ckfinder で画像アップロード機能を実現するための設定方法を詳しく紹介します。

最初: CKEditor をインストールして設定します

CKfinder を拡張して画像のアップロードを実装する前に、まず最も基本的な CKeditor エディタをインストールします。

1.ダウンロードした ckeditor_3.4.2.zip を解凍し、ディレクトリ内の ckeditor フォルダーを目的のディレクトリ (/admin/ など) にコピーします。

最初に: CKEditor をインストールして設定します。/admin/ckeditor/ckeditor.js を変更して、フォント、背景色、言語などのエディターを設定できます

、インターフェイスの高さと幅、エディターのボタンの配置など

コードは次のとおりです コードをコピー
config. language = 'en';
config.skin = 'v2';
config.uiColor = '#AADC6E';
config.toolbar = '基本';

….
2. 公式デモのほとんどはエディター領域の設定に js を使用するのが好きですが、php を書くのに慣れている私にとっては面倒なので、組み込みの php クラスを参照する必要があります。

コードは次のとおりです コードをコピー

require_once ROOTPATH "ckeditor/ckeditor.php";
$CKEditor = 新しい CKEditor();
$CKEditor->returnOutput = true //出力可能な変数を設定します
; $CKEditor->basePath = '/ckeditor/';//パスを設定します
$contentarea = $CKEditor->editor("content", $rs['contents']); // コンテンツとして名前を付けた

を生成します。

テキストエリア

エコー $contentarea;

このページはCKeditorを参照しており、キーコードは次のとおりです

コードは次のとおりです コードをコピー


2 番目のステップは、CKfinder を構成してインストールすることです

CKfinder は公式コンポーネントであり、ダウンロード アドレスは次のとおりです: http://ckfinder.com/download (注: ckeditor とは異なります

)

ウェブサイト）。

1.ダウンロードした ckfinder_php_2.0.1.zip を解凍し、ディレクトリ内の ckfinder フォルダーをエディターのディレクトリにコピーします

記録、/admin/ckeditor。

2. アップロードする必要があるので、ckfinder に参加する必要があります。 ckfinder と ckeditor を同じディレクトリに配置します。
/ckfinder/config.php を開き、最初の関数 CheckAuthentication() を設定します。この関数は独自の関数に従う必要があります

このルールは、return true が必要な場合にのみサーバーへのファイルのアップロードを許可するように記述されています。もちろん、これを直接記述することはお勧めできません。

セキュリティ上の問題が発生します。セッションを使用して処理する方が便利です。

簡単にできます

config.phpは次のように変更されました

コードは次のとおりですコードをコピー

またはセッションを使用する方が安全です。 セッションの使用について [強くクリック]

関数 CheckAuthentication()

{

return false //return falseに変更

}
コードは次のとおりです コードをコピー

session_start();
関数 CheckAuthentication(){
If(isset($_SESSION['UseEidtor']))
true を返します;
それ以外
false を返します。 }
「$baseUrl」を見つけます。この変数は、ckfinder ファイルがアップロードされるディレクトリを定義し、値を「$baseurl=’../data /」に設定します。

ファイルがアップロードされると、プログラムはこのディレクトリに画像、フラッシュなどの対応するフォルダーを自動的に作成します。

その3: 画像アップロード機能を実現するための統合

1.エディター ページの先頭にある ckfinder.js ファイルを参照します。コードは次のとおりです:

コードは次のとおりですコードをコピー

以下では、2 つの呼び出しメソッドと 1 つの php を紹介します

最後のステップはckfinderを使用することです

コードは次のとおりですコードをコピー
require_once ROOTPATH "ckeditor/ckeditor.php";

require_once ROOTPATH 'ckfinder/ckfinder.php' ;

$CKEditor = 新しい CKEditor();
$CKEditor->returnOutput = true;
$CKEditor->basePath = '/ckeditor/';

CKFinder::SetupCKEditor($CKEditor, '/ckfinder/') ;//これはルート ディレクトリを基準とした相対パスであることに注意してください

絶対パスは使用できません


$contentarea = $CKEditor->editor("コンテンツ", $rs['contents']);

別のjsまたはhtmlページの変更

コードは次のとおりですコードをコピー