勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

CKEditor5(WYSIWYGエディタ)に画像アップロード機能を追加する方法

   2024/01/12  JavaScript

CKEditor5(ウィジウィグエディタ)に画像アップロード機能を追加したい。公式アップロードアダプタがあるもののサーバにコネクタをインストールする必要があるらしい。設置先がレンタルサーバだとインストールできない可能性があるので異なる方法で実装したい。以下に対応方法をメモ。

 

ソースコード

WYSIWYGエディタ側

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CKEditor</title>
<style>
.ck-editor__editable_inline {
min-height: 200px;
}
</style>
</head>
<body>
<?php if( $_POST ){ ?>
<div>送信結果:</div>
<pre><?php var_dump($_POST['editor']);?></pre>
<?php } ?>
<form action="./index2.php" method="post">
<textarea name="editor" id="editor"></textarea><br>
<input type="submit" value="送信">
</form>
<script src="//cdn.ckeditor.com/ckeditor5/33.0.0/classic/ckeditor.js"></script>
<script src="//cdn.ckeditor.com/ckeditor5/33.0.0/classic/translations/ja.js"></script>
<script>
ClassicEditor.create( document.querySelector( '#editor' ), {
language: 'ja',
ckfinder: {
uploadUrl: './upload.php'
}
}).then( editor => {
console.log( editor );
}).catch( error => {
console.error( error );
});
</script>
</body>
</html>
<html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>CKEditor</title> <style> .ck-editor__editable_inline { min-height: 200px; } </style> </head> <body> <?php if( $_POST ){ ?> <div>送信結果:</div> <pre><?php var_dump($_POST['editor']);?></pre> <?php } ?> <form action="./index2.php" method="post"> <textarea name="editor" id="editor"></textarea><br> <input type="submit" value="送信"> </form> <script src="//cdn.ckeditor.com/ckeditor5/33.0.0/classic/ckeditor.js"></script> <script src="//cdn.ckeditor.com/ckeditor5/33.0.0/classic/translations/ja.js"></script> <script> ClassicEditor.create( document.querySelector( '#editor' ), { language: 'ja', ckfinder: { uploadUrl: './upload.php' } }).then( editor => { console.log( editor ); }).catch( error => { console.error( error ); }); </script> </body> </html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CKEditor</title>
<style>
.ck-editor__editable_inline {
    min-height: 200px;
}
</style>

</head>
<body>

    <?php if( $_POST ){ ?>
        <div>送信結果:</div>
        <pre><?php var_dump($_POST['editor']);?></pre>
    <?php } ?>

    <form action="./index2.php" method="post">
        <textarea name="editor" id="editor"></textarea><br>
        <input type="submit" value="送信">
    </form>

    <script src="//cdn.ckeditor.com/ckeditor5/33.0.0/classic/ckeditor.js"></script>
    <script src="//cdn.ckeditor.com/ckeditor5/33.0.0/classic/translations/ja.js"></script>

    <script>
    ClassicEditor.create( document.querySelector( '#editor' ), {
        language: 'ja',
        ckfinder: {
            uploadUrl: './upload.php'
        }
    }).then( editor => {
        console.log( editor );
    }).catch( error => {
        console.error( error );
    });
    </script>
</body>
</html>

 

画像アップロード側(upload.php)

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<?php
do{
//アップロード先のパス
$path = '/var/www/html/upload/img/';
//アップロード先のURL
$url = 'https://hoge.com/upload/img/';
$img = $_FILES['upload'];
if( !$img['size'] ){
$msg = '画像がアップロードされていません。';
break;
}
$ext = $img['type'];
if ($ext == 'image/jpeg' || $ext == 'image/jpg') {
$tmp_ext = '.jpg';
} elseif ($ext == 'image/png') {
$tmp_ext = '.png';
} elseif ($ext == 'image/gif') {
$tmp_ext = '.gif';
} elseif ($ext == 'image/webp') {
$tmp_ext = '.webp';
}
if( !$tmp_ext ){
$msg = 'jpg / png / gif / webpファイルのみアップロードいただけます。';
break;
}
$img_name = md5(uniqid(rand(), true)) . '_' . time() . $tmp_ext;
if( !move_uploaded_file($img['tmp_name'], $path . $img_name) ){
$msg = 'アップロード中にエラーが発生しました。';
break;
}
$flg = true;
}while(0);
if( $msg ){
$response = array(
'uploaded' => false,
'error' => array(
'message' => $msg,
),
);
}else{
$response = array(
'url' => $url . $img_name,
'uploaded' => true,
);
}
echo json_encode($response);
<?php do{ //アップロード先のパス $path = '/var/www/html/upload/img/'; //アップロード先のURL $url = 'https://hoge.com/upload/img/'; $img = $_FILES['upload']; if( !$img['size'] ){ $msg = '画像がアップロードされていません。'; break; } $ext = $img['type']; if ($ext == 'image/jpeg' || $ext == 'image/jpg') { $tmp_ext = '.jpg'; } elseif ($ext == 'image/png') { $tmp_ext = '.png'; } elseif ($ext == 'image/gif') { $tmp_ext = '.gif'; } elseif ($ext == 'image/webp') { $tmp_ext = '.webp'; } if( !$tmp_ext ){ $msg = 'jpg / png / gif / webpファイルのみアップロードいただけます。'; break; } $img_name = md5(uniqid(rand(), true)) . '_' . time() . $tmp_ext; if( !move_uploaded_file($img['tmp_name'], $path . $img_name) ){ $msg = 'アップロード中にエラーが発生しました。'; break; } $flg = true; }while(0); if( $msg ){ $response = array( 'uploaded' => false, 'error' => array( 'message' => $msg, ), ); }else{ $response = array( 'url' => $url . $img_name, 'uploaded' => true, ); } echo json_encode($response);
<?php
do{

    //アップロード先のパス
    $path = '/var/www/html/upload/img/';

    //アップロード先のURL
    $url = 'https://hoge.com/upload/img/';

    $img = $_FILES['upload'];

    if( !$img['size'] ){
        $msg = '画像がアップロードされていません。';
        break;
    }

    $ext = $img['type'];
    if ($ext == 'image/jpeg' || $ext == 'image/jpg') {
        $tmp_ext = '.jpg';
    } elseif ($ext == 'image/png') {
        $tmp_ext = '.png';
    } elseif ($ext == 'image/gif') {
        $tmp_ext = '.gif';
    } elseif ($ext == 'image/webp') {
        $tmp_ext = '.webp';
    }

    if( !$tmp_ext ){
        $msg = 'jpg / png / gif / webpファイルのみアップロードいただけます。';
        break;
    }

    $img_name = md5(uniqid(rand(), true)) . '_' . time() . $tmp_ext;

    if( !move_uploaded_file($img['tmp_name'], $path . $img_name) ){
        $msg = 'アップロード中にエラーが発生しました。';
        break;
    }

    $flg = true;

}while(0);

if( $msg ){
    $response = array(
        'uploaded' => false,
        'error' => array(
            'message' => $msg,
        ),
    );
}else{
    $response = array(
        'url' => $url . $img_name, 
        'uploaded' => true,
    );
}

echo json_encode($response);

アップロード先のパスとURL部分は適宜変更する。

 

参考サイト

https://qiita.com/sawadashota/items/984fa2c73dfd2062a1a4

 - JavaScript

  関連記事

画像にマウスを合わせると拡大表示させる「drift」ライブラリの利用方法

amazon等ECサイトで商品画像にマウスを合わせると当該部分が拡大表示されると ...

JavaScriptにてスワイプ可能なLightBox系ライブラリ「PhotoSwipe」の利用方法

あるサイトをWappalyzerで調査していた際に「PhotoSwipe」という ...

Gif画像に再生ボタンを設置し、ユーザーの操作により再生⇔停止が行える「gifffer」ライブラリの利用方法

あるページにGif画像を設置し、当該画像が表示されても自動再生させず、再生ボタン ...

バニラJS対応(jQuery非依存)の画像スライダー系プラグイン「Flickity」の利用方法

画像スライダーを設置する場合「slick」プラグインを利用することが多い。ただ、 ...

サイトにHTMLエディタ(WYSIWYG)を導入する方法

シンプルで導入が簡単、且つ日本語化されているウィジウィグを探しており、良さそうな ...

S