이미지 불러오기 로직

CKEditor

CKEditor를 사용한 글쓰기 페이지를 만들었다.
기본 세팅을 마친 후 게시글에서 이미지를 불러올 때 로직이 헷갈려서 따로 정리해보았다.

const getDataFromCKEditor = (event, editor) => {
        const data = editor.getData();
        // 이미지가 있다면!
        if (data && data.match("<img src=")) {
            const whereImg_start = data.indexOf("<img src=");

            // 이미지 url 지정
            let whereImg_end = "";
            let ext_name_find = "";
            let result_Img_Url = "";

            // 이미지 확장자 지정
            const ext_name = ["jpeg", "png", "gif", "jpg"];

            for (let i=0; i<ext_name.length; i++){
                if (data.match(ext_name[i])){
                    // 확장자 저장
                    ext_name_find = ext_name[i];
                    // 확장자가 나오기 전까지 
                    whereImg_end = data.indexOf(`${ext_name[i]}`);
                }
            }

            if (ext_name_find === "jpeg"){
                result_Img_Url = data.substring(whereImg_start + 10, whereImg_end + 4);
            } else {
                result_Img_Url = data.substring(whereImg_start + 10, whereImg_end + 3);
            }
            setValues({
                ...form,
                fileUrl: result_Img_Url,
                contents: data,
            });

        } else {  // 이미지가 없으면 fileUrl을 빈 값으로 저장합니다
            setValues({
                ...form,
                fileUrl: "",
                contents: data,
            });
        }
    }

1. CKEditor를 불러오는 부분에서 Data를 얻는 함수!
2. 에디터에서 받는 데이터를 가져옴.(그러니까 쓰는 부분)
3. 큰 if문 => 그 데이터 중 이미지가 있는지 확인함
4. 이미지가 있다면 이미지의 Url을 지정해주고 state값을 변경해주는 것이 목표
5. 이미지 태그의 시작 인덱스 whereImg_start
6. 이미지 url 지정
7. 이미지 확장자 배열 지정
8. for문 : 데이터에 저장된 확장자가 있는지 확인
   • indexOf : 문자열을 실시간으로 검색해주는 기능
     -> 저장된 확장자를 찾아서 ext_name_find에 저장
9. if => 확장자에 따라서 url을 저장해 줌
   이미지 src까지의 부분제외, 확장자 제외해서 저장해줌

** 이미지가 없다면 url을 빈값으로 저장한다.