1. ホーム
  2. Web プログラミング
  3. ウェブ編集者

FckeditorエディタによるPHP環境での画像アップロード設定 詳細チュートリアル

2022-01-17 20:39:28

Fckeditorの画像アップロード機能を有効にする

  ディレクトリのセキュリティ問題を考慮すると、デフォルトのFckeditor 2.6.6のアップロード機能は有効になっていないので、最初のステップでは、Fckeditorアップロード機能を有効にする必要があります。ここで注意する必要があるのは、PHP版のFckeditorアップロード機能は、chomod機能を使用して新しいディレクトリのパーミッションを設定する必要があるので、有効のユーザは、Fckeditorアップロード機能を有効にしたときに、PHP環境のユーザにはアップロードディレクトリを作成および変更する権限があるかどうか確認することしてください。

  Fckeditorのアップロード機能が有効でない場合、画像の挿入/編集ボタンをクリックしてアップロードを選択し、アップロードするファイルを選択した後にサーバに送信ボタンをクリックすると、以下のエラーメッセージが報告されます。

コピーコード コードは以下の通りです。

This file uploader is disabled.    
Please check the "editor/filemanager/connectors/php/config.php" file 

エラーメッセージを元に、editor/filemanager/connectors/phpディレクトリのconfig.phpを開き、以下の場所を確認します。

コピーコード コードは以下の通りです。

$Config['Enabled'] = false ;

に変更します。

コピーコード コードは以下の通りです。

$Config['Enabled'] = true ;

で、対応するディレクトリにuserfilesのアップロードディレクトリを作成した後、Fckeditorのアップロード画像機能をONにします。

  特記事項:Fckeditorにはバグの脆弱性、つまりJSの互換性があまり完璧ではないようで、Google Chromeで設定を終える前はFckeditorのPHPアップロードが実装されていませんでしたが、IEに変更後は全て問題ありません。

Fckeditorのアップロードパス設定チュートリアル(画像アップロード時

  独立したウェブ開発者として、技術以外の利便性、例えばSEOの最適化を考慮する必要があり、ディレクトリ構造(URL)の最適化はSEOの一部であり、Fckeditorのアップロード機能を設定する際に画像のアップロードパスを検討する必要があります。

  Fckeditorのデフォルトの画像アップロードパス構造には、userfiles/ファイル名とuserfiles/ファイルタイプ/ファイル名の2つの形式があり、2つのFckeditorアップロードモードに対応しています。例えば、画像をアップロードする場合、QuickUploadモードのアップロードパスはuserfiles/filename、サーバツアーアップロードモードのアップロードパスはuserfiles/images/filenameとなります。

Fckeditorの画像アップロードのパスは、以下のように設定されています。

  editor/filemanager/connectors/php ディレクトリにある config.php ファイルを開き、その中にある

コピーコード コードは以下の通りです。

$Config['UserFilesPath'] = '/userfiles/' ; 

に変更します。

コピーコード コードは以下の通りです。

$Config['UserFilesPath'] = '/project directory/userfiles/' ;

注)ここでは、userfilesフォルダは、http://localhost/的根目录而言的。

  上記はデフォルトのFckeditorアップロードパスの設定ですが、URL計画に従って、$Config['FileTypesPath'], $Config['FileTypesAbsolutePath'], $ Config['QuickUploadPath'], $Config['QuickUploadAbsolutePath'] の4つのアップロードディレクトリパス値を変更すれば、Fckeditorアップロードディレクトリのカスタマイズが可能です。この方法は、Fckeditorのアップロード画像ファイル名変更問題をある程度回避することもできます。

Fckeditorのアップロード画像サイズの制限設定

  Fckeditor 2.6.6 は、デフォルトではアップロードされる画像ファイルのサイズを制限していません。これを改善するには、PHP.INI 設定ファイルを修正することでアップロードサイズを制限する方法と、Fckeditor のソースコードを以下の方法で手動修正することでのみ可能な方法の 2 通りがあります。

  1. editor/filemanager/connectors/php ディレクトリの config.php を開き、アップロードされる画像のサイズを設定する Config 変数を作成します(ここでは KB 単位)。

コピーコード コードは以下の通りです。

$Config['MaxImageSize']= '1024'; 

2. editor/filemanager/connectors/php ディレクトリの commands.php を開き、次の場所を探します。

コピーコード コードは以下の通りです。

if ( isset( $Config['SecureImageUploads'] ) )  
{  
if ( ( $isImageValid = IsImageValid( $oFile['tmp_name'], $sExtension ) ) === false )  
{  
$sErrorNumber = '202' ;  
}  
//Upload image size limit  

アップロード画像サイズ制限のところに

コピーコード コードは以下の通りです。

if ( isset( $Config['MaxImageSize'] ) )  
{  
    $iFileSize = round( $oFile['size'] / 1024 );  
    if($iFileSize > $Config['MaxImageSize'] )  
    {  
        $sErrorNumber = '204';  
    }  

説明 PHPはアップロードされた画像サイズをバイト単位で計算するため、このコードではまずアップロードされた画像サイズをKBに変換し、指定された画像サイズを超えるかどうかを比較し、超える場合はエラーが報告されます。

  なお、最終的に変換されるのは

コピーコード コードは以下の通りです。

if ( ! $sErrorNumber && IsAllowedExt( $sExtension, $resourceType ) )  
{  
//Fckeditor upload image function  
}  
else 
$sErrorNumber = '202' ; 

コードブロックの末尾にあるelse文を削除しています。そうしないと、Fckeditorによってアップロードされる画像ファイルのサイズを制限する機能が実装されません。

  3. editor/dialog/fck_image/fck_image.js を開き、errorNumber メッセージを追加し、OnUploadCompleted 関数を探し、以下のように追加します。

コピーコード コードは以下の通りです。

case 204 :  
alert( "Security error. File size error." ) ;  
return ; 

これは、制限のFckeditorアップロード画像ファイルサイズの設定の終わりです、アップロードファイルサイズの制限の他のタイプはまた、このアイデアです。

Fckeditorアップロード画像ファイル名変更と中国語乱雑コード解決策

  Fckeditor 2.6.6をテストした結果、アップロード機能を実装する際にファイル名を変更しないため、アップロードした画像ファイルの中国語名が文字化けしやすくなる問題が解決されていません。

  アップロードされた画像ファイルのリネームや文字化けに対する解決策は以下の通りです。

  commands.php の下にある editor/filemanager/connectors/php ディレクトリを開き、FileUpload 関数を見つけ、それを

コピーコード コードは以下の通りです。

$sExtension = substr( $sFileName, ( strrpos($sFileName, '.') + 1 ) ) ;  
$sExtension = strtolower( $sExtension ) ;

の後に追加します。

コピーコード コードは以下の通りです。

$sFileName = rand(0,100). ". ". $sExtension; 

ここでのrand関数は、必要に応じて独自のリネームルールを変更することができます。

  アップロード画像ファイル名の乱れを解決するもう一つの方法は、iconv関数を使ってファイル名変換をエンコードすることですが、まだリネームの問題があるので、Fckeditor用にアップロード画像ファイル名をリネームする方が良いでしょう。

Fckeditorのアップロード画像へのウォーターマーク追加機能

  ウェブサイトの所有者にとって、画像の著作権を保護するために、透かしを入れることは不可欠なことです。Fckeditorのファイルアップロード機能FileUploadと組み合わせて、PHPのadd watermark関数を使用して画像に透かしを追加することができます。

  これで、PHPでFckeditorを設定して画像をアップロードする方法についてのチュートリアルを終了します。