TinyMCE는 강력한 WYSIWYG(What You See Is What You Get) 에디터로, 사용자가 텍스트를 포매팅하고 콘텐츠를 작성할 수 있는 기능을 제공합니다. 이미지 업로드 기능을 추가하면 사용자가 에디터 내에서 이미지를 쉽게 업로드하고 삽입할 수 있습니다. 이번 글에서는 TinyMCE에서 이미지 업로드 기능을 구현하는 방법을 알아보겠습니다.

1. 이미지 업로드 플러그인 설치하기

TinyMCE에는 이미지 업로드를 처리하는 다양한 플러그인이 있습니다. 대표적인 예로 Image Upload 플러그인이 있으며, 이 플러그인을 사용하여 이미지 업로드 기능을 구현할 수 있습니다.

<script src="https://cdn.tiny.cloud/1/YOUR_API_KEY_HERE/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script>
  tinymce.init({
    selector: 'textarea',
    plugins: 'imageupload',
    toolbar: 'imageupload',
    imageUploadUrl: '/upload/image' // 이미지 업로드 처리를 위한 서버 URL
  });
</script>

위의 코드에서 YOUR_API_KEY_HERE를 자신의 TinyMCE API 키로 대체해야 합니다.

2. 서버 측 이미지 업로드 처리

TinyMCE에서는 이미지 업로드를 위한 특정 URL을 필요로 합니다. 이 URL은 서버 측에서 이미지를 받아서 저장하고, 업로드한 이미지의 URL을 응답해야 합니다. 어떤 언어나 프레임워크든 사용해도 상관 없지만, 예시로 Node.js의 Express 프레임워크를 사용하여 서버 측 이미지 업로드 처리 방법을 알아보겠습니다.

const express = require('express');
const app = express();
const multer = require('multer');
const path = require('path');

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/') // 이미지를 저장할 폴더 지정
  },
  filename: function (req, file, cb) {
    const ext = path.extname(file.originalname);
    cb(null, Date.now() + ext) // 파일명 중복을 피하기 위해 현재 시간을 사용
  }
});

const upload = multer({ storage: storage });

app.post('/upload/image', upload.single('image'), (req, res) => {
  // 이미지를 업로드하고, 업로드된 이미지의 URL을 응답에 포함
  const imageUrl = req.file.path;
  res.json({ imageUrl });
});

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

위의 코드에서 uploads/ 폴더는 이미지를 저장할 폴더의 경로입니다. 필요에 따라 경로를 수정해야 합니다.

3. 이미지 업로드 확인하기

이제 TinyMCE 에디터 내에서 이미지를 업로드하고 확인해보세요. 이미지를 클릭하면 업로드 된 이미지가 삽입되어야 합니다.

이렇게 TinyMCE에 이미지 업로드 기능을 구현할 수 있으며, 사용자들이 편리하게 이미지를 삽입할 수 있게 됩니다.

참고 자료

• TinyMCE Image Upload
• Multer
• Express