[TinyMce] 텍스트 에디터 적용하기 (+ 에디터 이미지 업로드)

이번 프로젝트에서 어드민 페이지 상품 등록 화면의 상세설명 부분에 아래와 같이 TinyMce 에디터를 적용하게 되었다.

TinyMce 에디터를 사용하면 위와 같은 텍스트 편집기를 추가할 수 있는데

이번 포스팅에서는 TinyMce를 JavaScript로 적용하는 방법에 대해 설명하고 에디터를 커스터마이징하는방법에 대해 포스팅하려한다.

 

---

TinyMce 적용방법

TinyMce Api Key 발급

tinymce를 적용하기전에 먼저 아래의 공식 홈페이지에 들어가서 회원가입 후 API KEY를 발급받아야한다.

The Most Advanced WYSIWYG Editor | Trusted Rich Text Editor | TinyMCE

가입하게 되면 대쉬보드 맨 하단에 API KEY가 나온다.

 

 

Html의 Head에 스크립트 코드 추가

TinyMce는 6버전까지 있는데 5버전이 비교적 사용하기 편해보여 5버전을 사용했다.

아래의 no-api-key부분에 발급받은 api key를 추가하면된다.

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

 

TinyMce 적용

TinyMce를 적용할 html에 텍스트 필드를 만들어주자

<textarea id="mytextarea"></textarea>

 

그 다음 스크립트 파일을 만들거나 <script> 태그를 안에 tinymce.init({}) 을 선언해 에디터를 추가해준다.

나는 상품상세 설명이 이미지를 추가하기 위해 아래와 같이 플러그인 및 코드를 추가했다.

    tinymce.init({
        selector: "#mytextarea", // TinyMCE를 적용할 textarea 요소의 선택자를 지정
        plugins: "paste image imagetools", // 'paste', 'image', 'imagetools' 플러그인 추가
        height: 500,
        width: 900,
        toolbar: "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | outdent indent | image", // 'image' 버튼 툴바에 추가
        paste_data_images: true, // 이미지 붙여넣기 설정 활성화
        file_picker_types: 'image', // TinyMCE에서 이미지를 선택할 때, 이미지 파일만 선택 (옵션 : media, file 등)
        images_upload_handler(blobInfo, success) { // 이미지를 업로드하는 핸들러 함수
            // blobInfo : TinyMCE에서 이미지 업로드 시 사용되는 정보를 담고 있는 객체
            const file = new File([blobInfo.blob()], blobInfo.filename());
            const fileName = blobInfo.filename();

            if (fileName.includes("blobid")) {
                success(URL.createObjectURL(file));
            } else {
                imageFiles.push(file);
                success(URL.createObjectURL(file)); // Blob 객체의 임시 URL을 생성해 이미지 미리보기 적용
            }
        }
    });

아래와 같이 tinymce.init으로 tinymce를 활성화해주고 selector로 에디터를 적용할 선택자를 지정한 후 추가적으로 커스터 마이징할수 있다.

 

TinyMce 커스터마이징 공식 문서

아래는 에디터를 커스터마이징하기 위한 공식문서이다.

설명이 잘되어있으니 에디터를 직접 커스텀하는데 큰 어려움을 겪진 않을 것이다.

TinyMCE | Customizing the editor UI