CKEditorの画像アップロード機能を有効にする方法_PHPチュートリアル-PHPチュートリアル-php.cn

CKEditorの画像アップロード機能を有効にする方法_PHPチュートリアル

WBOY

リリース： 2016-07-13 17:49:23

オリジナル

775 人が閲覧しました

PHPのckeditorエディターに画像をアップロードする機能を追加するにはどうすればよいですか? CKEditorの公式デモには写真のアップロードとサーバーファイルの閲覧の機能がありますが、私たちがダウンロードしたものにはこの2つの機能がありません...

実際には、別のコンポーネント CKFinder をダウンロードし、それを CKEditor で使用してアップロード機能を実装する必要があります。

CKFinder の 3 つの言語バージョンが正式に提供されています: PHP、Asp.Net、Asp ダウンロードアドレス: http://ckfinder.com/download

CKFinder を Web サイトのディレクトリに解凍します。呼び出し方法は次のとおりです (CKFinder が Web サイトのルートディレクトリにあると仮定すると、相対パスを使用できます):

CKEDITOR.replace( 'editor1',
{
filebrowserBrowseUrl: '/ckfinder/ckfinder.html',
filebrowserImageBrowseUrl: '/ckfinder/ckfinder.html?Type=Images',
ファイルブラウザFlashBrowseUrl: '/ckfinder/ckfinder.html?Type=Flash',
filebrowserUploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
filebrowserImageUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
filebrowserFlashUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash'
});

同時に、アップロードはデフォルトで禁止されています。また、CKFinder ディレクトリの config.php を開き、32 行目の return false を true を返すように変更する必要があります。

ここでアップロード許可の認証を行います。上に大きな英語のコメントがあることに注意してください。これは、単純に true を返すように変更するのではなく、セッション検証などを追加する必要があります。そうしないと非常に危険です。

以下は、英語が得意な学生向けに、ファイルアップロード機能の追加方法に関する公式ドキュメントです。上記の方法は、実際には以下の例5です。

基本構成

filebrowserBrowseUrl 設定は、[サーバーの参照] ボタン (1) が押されたときに起動される外部ファイルブラウザの場所です。

filebrowserUploadUrl 設定は、ファイルのアップロードを処理するスクリプトの場所です。これを設定すると、ダイアログボックスに [アップロード] タブ (2) が表示されます (そのような機能が利用可能な場合、つまり、[リンク]、[画像]、および) にのみ表示されます。 Flash」ダイアログウィンドウ)。

例1

CKEDITOR.replace( 'editor1', {

filebrowserBrowseUrl: '/browser/browse.php',
filebrowserUploadUrl: '/uploader/upload.php',
}); ファイルブラウザ設定のダイアログ名 (filebrowser[dialogName]BrowseUrl および filebrowser[dialogName]UploadUrl) を使用して、選択したダイアログボックスに別の URL を設定することもできます。

たとえば、画像ダイアログの特別なアップロード URL を設定するには、filebrowserImageUploadUrl プロパティを設定します。
例 2

CKEDITOR.replace( 'editor1', {

filebrowserBrowseUrl: '/browser/browse.php',

filebrowserImageBrowseUrl : '/browser/browse.php?type=Images'

filebrowserUploadUrl: '/uploader/upload.php',
filebrowserImageUploadUrl : '/uploader/upload.php?type=Images'
});
上の例では、filebrowserBrowseUrl および filebrowserUploadUrl 設定がデフォルトで使用されますが、[画像] ダイアログボックスでは、CKEditor は代わりに filebrowserImageBrowseUrl および filebrowserImageUploadUrl 構成設定を使用します。
ファイルブラウザウィンドウのサイズ CKEditor のファイルブラウザウィンドウのデフォルトの幅は画面の幅の 80% に設定され、デフォルトの高さは画面の高さの 70% に設定されます。何らかの理由でデフォルト値が適切でない場合は、、他の値に変更できます。

ウィンドウの幅を変更するには filebrowserWindowWidth を使用し、ウィンドウの高さを変更するには filebrowserWindowHeight を使用します。

ウィンドウのサイズをピクセル単位で設定するには、数値を設定するだけです (例: 「800」)。ウィンドウの高さと幅を画面のパーセンテージで設定したい場合は、最後にパーセント記号を忘れずに追加してください。「60%」)。

例 3

CKEDITOR.replace( 'editor1', {

filebrowserBrowseUrl: '/browser/browse.php',

filebrowserUploadUrl: '/uploader/upload.php',

ファイルブラウザウィンドウ幅 : '640',

ファイルブラウザウィンドウの高さ : '480',
});
特定のダイアログボックス内のファイルブラウザのウィンドウサイズを設定するには、filebrowser[dialogName]WindowWidth 設定と filebrowser[dialogName]WindowHeight 設定を使用します。

たとえば、「画像」ダイアログボックスのみでファイルブラウザのウィンドウサイズを変更するには、filebrowserImageWindowWidth と filebrowserImageWindowHeight の設定を変更します。

例 4
CKEDITOR.replace( 'editor1', {
filebrowserBrowseUrl : '/browser/browse.php',
filebrowserUploadUrl : '/uploader/upload.php',
filebrowserImageWindowWidth : '640',
ファイルブラウザの画像ウィンドウの高さ : '480',
});

CKFinder の使用
CKFinder は CKEditor と簡単に統合できます (ライブデモを参照)。

統合は 2 つの方法で行うことができます。1 つは CKEditor 構成オプションを設定する方法 (以下の例)、もう 1 つは CKFinder API で利用可能な CKFinder.SetupCKEditor() メソッドを使用する方法です。

例 5

CKEDITOR.replace( 'editor1',
{
filebrowserBrowseUrl : '/ckfinder/ckfinder.html',
filebrowserImageBrowseUrl : '/ckfinder/ckfinder.html?Type=Images',
filebrowserFlashBrowseUrl : '/ckfinder/ckfinder.html?Type=Flash',
filebrowserUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
filebrowserImageUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
filebrowserFlashUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash'
});
上記の例は、PHP 環境に有効です。 /ckfinder/ は、CKFinder インストールディレクトリへのベースパスです。 ASP、ASP.NET、または ColdFusion に CKFinder を使用している場合は、「php」を正しい拡張子に変更してください:

asp - ASP 用 CKFinder

aspx – ASP.NET 用 CKFinder
cfm – ColdFusion 用 CKFinder
php – PHP 用 CKFinder

例6

CKFinder.SetupCKEditor() 関数を使用した CKEditor + CKFinder の統合:

var editor = CKEDITOR.replace( 'editor1' );

CKFinder.SetupCKEditor( エディター, '/ckfinder/' );
SetupCKEditor() メソッドの 2 番目のパラメーターは、CKFinder インストールへのパスです。

この統合方法の完全な動作例を確認するには、CKFinder で配布されている _samples/js/ckeditor.html サンプルを確認してください。

摘自顺子网络