TOAST에디터 - 이미지 업로드 URL만 첨부 및 툴바 수정 (파일 업로드 막기)

토스트 에디터를 사용할 때 툴바를 용도에 맞게 커스텀해야할 때가 있고, 이미지 업로드도 필요에 따라 URL만 첨부가능하도록 해야할 때가 있다. 이미지의 드래그드롭 및 파일 첨부를 막고 URL만 첨부 가능하도록 할 수 있다.매우 간단하지만, 필요할 때 유용하게 사용할 수 있도록 기록해본다. 

 

토스트 에디터 툴바 수정 및 이미지 URL 첨부

아래와 같이 툴바에 bold 와 image 업로드만 할 수 있도록 설정하였다. 해당 기능을 설정하는 방법은 아래와 같다.

토스트 에디터 툴바 설정

setEditor() {
                    this.editor = new toastui.Editor({
                        el: document.querySelector('#editor'),
                        toolbarItems: [
                            ['bold', 'image']
                        ],
                        height: '600px',
                        initialEditType: 'wysiwyg',
                        previewStyle: 'vertical'
                    });
             },

 

toolbarItems: [ ['bold', 'image'] ] 를 통해 용도에 맞게 툴바를 조정할 수 있다.

 

 

이미지 URL 첨부만 가능하도록 설정

이미지 드래그드롭과 파일 첨부를 막고 URL만 첨부가능하도록 설정할 수도 있다.

//image editor 드래그드롭 제거
this.editor.removeHook('addImageBlobHook');
//URL 첨부만 가능 하도록 추가
const observer = new MutationObserver(() => {
    if (document.querySelector('.toastui-editor-popup.toastui-editor-popup-add-image')) {
        document.querySelector('[aria-label="URL"]').click();
        document.querySelector('[aria-label="File"]').style.display = "none";
    }
});

 

위와 같이 용도에 맞게 토스트 에디터를 설정하면 된다. 참고!