[javascript] TinyMCE에서 텍스트 에디터에서 사진 삽입 기능을 추가하는 방법은?

24 Nov 2023

javascript

TinyMCE 라이브러리 가져오기: TinyMCE를 사용하기 위해 먼저 라이브러리를 가져와야 합니다. 다음과 같은 스크립트 태그를 HTML 파일의 <head> 태그 내에 추가합니다.

<script src="https://cdn.tiny.cloud/1/API-KEY/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>

API-KEY는 TinyMCE 웹 사이트에서 생성된 키를 사용합니다.

이미지 삽입 기능 설정: TinyMCE를 초기화하고 이미지 삽입 기능을 활성화합니다. 다음은 이미지 삽입 기능을 활성화하는 기본 설정입니다.

tinymce.init({
  selector: 'textarea',
  plugins: 'image',
  toolbar: 'image',
  menubar: 'insert',
});

이미지 업로드 서비스 구성: 이미지 삽입 시 업로드를 지원하기 위해 이미지 업로드 서비스를 구성해야 합니다. 이런 구성은 백엔드에서 처리됩니다. 여기서는 간단한 예시로 Cloudinary 이미지 업로드 서비스를 사용하도록 설정하겠습니다.

tinymce.init({
  selector: 'textarea',
  plugins: 'image',
  toolbar: 'image',
  menubar: 'insert',
  images_upload_url: 'YOUR_UPLOAD_URL',
  images_upload_handler: function (blobInfo, success, failure) {
    let xhr, formData;
    xhr = new XMLHttpRequest();
    xhr.withCredentials = false;
    xhr.open('POST', 'YOUR_UPLOAD_URL');

    xhr.onload = function () {
      let json;

      if (xhr.status !== 200) {
        failure('HTTP Error: ' + xhr.status);
        return;
      }

      json = JSON.parse(xhr.responseText);

      if (!json || typeof json.location != 'string') {
        failure('Invalid JSON: ' + xhr.responseText);
        return;
      }

      success(json.location);
    };

    formData = new FormData();
    formData.append('file', blobInfo.blob(), blobInfo.filename());

    xhr.send(formData);
  },
});

API 키와 이미지 업로드 URL 업데이트: 위에서 생성한 API 키 및 이미지 업로드 URL을 실제 값으로 업데이트해야 합니다.

이제 텍스트 에디터에 이미지 삽입 버튼이 나타날 것입니다. 사용자는 버튼을 클릭하고 이미지를 업로드하여 에디터에 삽입할 수 있습니다.

참고: 이 예시에서는 Cloudinary를 사용하여 이미지를 업로드하도록 설정했습니다. 하지만 실제로 사용하는 이미지 업로드 서비스에 따라 코드를 조정해야 할 수도 있습니다.