[SCRIPT] 스마트에디터 이미지 붙여넣기 방지 및 이미지 용량 제한

 

안녕하세요.
오늘은 스마트에디터에 이미지 붙여넣기 방지 및 이미지 용량 제한하는 방법에대해 적어보려 합니다!

 

---

스마트에디터의 textarea는
iframe > iframe > body의 클래스 명인 se2_inputarea를 찾아서 적용해 줘야합니다.

스마트 에디터

 

 

 

se2_inputarea를 불러오는 방법은 createInIFrame 안에서 fOnAppLoad에 function을 만들어 불러옵니다.

<script type="text/javascript">
    var oEditors = [];
    nhn.husky.EZCreator.createInIFrame({
        oAppRef: oEditors,
        elPlaceHolder: "content_textarea",
        sSkinURI: "/ease_src/sEditor/SmartEditor2Skin.html",
        fCreator: "createSEditor2",
        /** 여기서부터 추가 **/
        fOnAppLoad: function(){

            // iframe > iframe > se2_inputarea 클래스 불러오기
            const inputArea = document.querySelector("iframe").contentDocument.querySelector("iframe").contentDocument.querySelector(".se2_inputarea");

            // PASTE 일 경우 동작
            inputArea.addEventListener('paste', function(){
                // 클립보드에서 데이터 가져오기
                const clipboardData = event.clipboardData || window.clipboardData;
                // 가져온 데이터가 이미지인지 확인
                const isImage = clipboardData && clipboardData.items && clipboardData.items.length > 0 && clipboardData.items[0].type.includes('image');

                if (isImage) {

                    /************* 1. 이미지라면 붙여넣기를 막음 (사용시 주석해제)*************/
                    // event.preventDefault();
                    // alert('이미지는 붙여넣을 수 없습니다.');                   	

                    /************* 2. 이미지 크기 체크 *************/
                    const imageFile = clipboardData.items[0].getAsFile(); // 이미지 파일 가져오기
                    const imageSizeInMB = imageFile.size / (1024 * 1024); // 파일 크기를 MB 단위로 계산

                    // 이미지 파일 크기가 특정 용량 이상인 경우 붙여넣기를 막음 (예: 1MB로 설정)
                    const maxImageSizeInMB = 1;
                    if (imageSizeInMB > maxImageSizeInMB) {
                        event.preventDefault();
                        alert('이미지 크기는 ' + maxImageSizeInMB + 'MB를 초과할 수 없습니다.');
                        return;
                    }
                } 
            });
        }
    });
</script>

 

붙여넣기 방지 사용 시 1번 주석을 풀고 2번을 주석해주세요 :)

간단하게 작업 완료!
스마트에디터는 따로 script를 밖에서 선언하면 안되고 꼭 fOnAppLoad: function(){ 안에서 작업합니다
오늘도 도움되는 하루가 됐으면 좋겠네요

 

 

---

공부하면서 유용했던 부분 메모겸 공유하고자 끄적입니다.

고쳐야하는 부분있다면 댓글 남겨주시면 수정하겠습니다.

행복한 하루 보내세요 (❁´◡`❁)