CKEditor5 클립보드 이미지 업로드 하는 방법(Paste, Ctrl+v)

1. CKEditor5 클립보드 이미지를 서버에 업로드 

 

CKEditor5의 clipboardInput 이벤트를 사용하여 붙여넣기된 콘텐츠에 이미지가 있는 경우 이미지를 서버에 업로드할 수 있습니다. 이미지가 있을 때 해당 이미지를 서버에 업로드하고, 서버에 업로드된 이미지의 URL을 콘텐츠에 삽입하는 방법을 살펴보겠습니다.

ClassicEditor
    .create( document.querySelector( '#editor' ) )
    .then( editor => {
        // clipboardInput 이벤트 리스너 등록
        editor.editing.view.document.on( 'clipboardInput', async ( evt, data ) => {
            let clipboardData = data.dataTransfer.getData('text/html');
            console.log('Pasting content:', clipboardData);

            // 붙여넣기된 콘텐츠에서 이미지 태그 추출
            const imageRegex = /<img.*?src="(.*?)".*?>/g;
            let match;
            while ((match = imageRegex.exec(clipboardData)) !== null) {
                const imageUrl = match[1];

                // 이미지를 서버에 업로드하고 서버에 업로드된 이미지의 URL을 얻기 위한 비동기 함수 호출
                const uploadedImageUrl = await uploadImageToServer(imageUrl);

                // 콘텐츠에서 원래 이미지 URL을 업로드된 이미지의 URL로 교체
                clipboardData = clipboardData.replace(imageUrl, uploadedImageUrl);
            }
            
            // 수정된 콘텐츠를 다시 설정
            data.dataTransfer.setData('text/html', clipboardData);
        });
    } )
    .catch( error => {
        console.error( error );
    } );

// 이미지를 서버에 업로드하는 비동기 함수 정의
async function uploadImageToServer(imageUrl) {
    // 이미지를 서버에 업로드하고 업로드된 이미지의 URL을 반환하는 비동기 요청을 수행
    // 이 예시에서는 fetch API를 사용하여 업로드를 수행할 수 있습니다.
    // 적절한 업로드 URL을 사용하여 서버에 요청을 보내고, 업로드된 이미지의 URL을 받아옵니다.
    const response = await fetch('/uploadImage', {
        method: 'POST',
        body: JSON.stringify({ imageUrl: imageUrl }),
        headers: {
            'Content-Type': 'application/json'
        }
    });
    const responseData = await response.json();
    return responseData.imageUrl;
}

 

위의 코드에서는 clipboardInput 이벤트 핸들러 내에서 붙여넣기된 콘텐츠에서 이미지를 추출하고, 추출된 각 이미지의 URL을 서버에 업로드하는 함수를 호출합니다. 이후 업로드된 이미지의 URL을 콘텐츠에서 원래 이미지 URL로 교체하여 콘텐츠를 수정합니다.

실제 서버에 이미지를 업로드하는 부분은 uploadImageToServer 함수 내에 구현되어야 합니다. 이 예시에서는 fetch API를 사용하여 서버에 이미지를 업로드하고, 서버에서 반환된 이미지 URL을 반환하도록 구현되어 있습니다. 실제 서버 측 업로드 코드는 프로젝트의 서버 측 로직 및 환경에 맞게 수정되어야 합니다.

 

 

 

2. 이미지를 서버에 업로드하고 이미지의 URL을 반환하는 PHP 코드

<?php
$data = json_decode(file_get_contents('php://input'), true);

// 이미지를 업로드할 디렉토리
$uploadDirectory = 'uploads/';

// 업로드된 이미지를 처리
if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($data['imageUrl'])) {
    // 이미지 URL 가져오기
    $imageUrl = $data['imageUrl'];

    // 이미지를 다운로드하여 서버에 저장
    $imageData = file_get_contents($imageUrl);
    $filename = basename($imageUrl);
    $targetPath = $uploadDirectory . $filename;
    file_put_contents($targetPath, $imageData);

    // 업로드된 이미지의 URL 반환
    $uploadedImageUrl = 'http://yourdomain.com/' . $targetPath;

    // JSON 형식으로 응답
    header('Content-Type: application/json');
    echo json_encode(['imageUrl' => $uploadedImageUrl]);
} else {
    // 올바르지 않은 요청일 경우 에러 응답
    http_response_code(400);
    echo json_encode(['error' => 'Invalid request']);
}
?>

 

위의 PHP 코드는 POST 요청을 받아서 이미지 URL을 가져온 후, 해당 URL에서 이미지를 다운로드하여 서버에 업로드합니다. 그 후 업로드된 이미지의 URL을 JSON 형식으로 반환합니다. 클라이언트 측에서는 업로드된 이미지의 URL을 받아와서 적절히 처리하면 됩니다.

이 코드를 프로젝트에 맞게 수정하여 사용하시기 바랍니다. 또한 보안 상의 이유로 적절한 파일 업로드 및 다운로드 검증 및 보안 조치를 취해야 합니다.