イメージ読み込みロジック

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,
            });
        }
    }

CKeditor読み込み部からデータを取得する関数!

編集からデータを取得します.

大if文=>データにイメージがあるかどうかをチェック

イメージがある場合、ターゲットはイメージのUrlを指定し、そのステータス値

を変更することです.

画像タグの開始インデックス(Img start

)
指定

画像url

指定

画像拡張子アレイ

for文:データにストレージ拡張子があるかどうかを確認します.

indexOf:文字列をリアルタイムで検索する機能
->保存した拡張子を検索してext name findに保存

拡張子

if=>に従ってURLを保存

、画像srcを含まない、拡張子を含まない
**画像がない場合はurlを空の値に保存します.