아주 간단한 텍스트 에디터를 만들어보자

카테고리를 보시면 아시겠지만, 자바스크립트로 할 거다. 근데 일단 구현할 기능이 쓴 걸 저장하는 것 말고 없음… ㅋㅋㅋㅋㅋㅋ 여기서 더 들어가면 지피티 불러야됩니다…

---

기본적인 기능(저장하기)

그니까 뭘 할거냐면, 여기서 글씨를 적고 하단의 저 버튼을 누르면 저 텍스트에리어 안의 글이 저장된다. 오케이?

 

const textArea = document.querySelector('#textarea');
const textSave = Document.querySelector('#save');

일단 자바스크립트로 뭘 할라면 가져와야된다.

 

textSave.addEventListener('click',()=>{
    console.log(textArea.value);
})

이 블로그를 많이 봐오신 분들은 다 알겠지만, 여기까지는 쉽다. 여기까지는.

 

const textArea = document.querySelector('#textarea');
const textSave = document.querySelector('#save');

textSave.addEventListener('click',()=>{
    const blob = new Blob([textArea.value], {type:'text/plain'});
    const url = window.URL.createObjectURL(blob);
    //블롭블롭

    const link = document.createElement('a');
    link.style.display = 'none';
    link.href = url;
    link.download = 'file';
    document.body.appendChild(link);

    link.click();

    setTimeout(() => {
        document.body.removeChild(a);
        window.URL.revokeObjectURL(url);
    }, 100);
})

롸? 이 코드가 아님? 

 

const textArea = document.querySelector('#textarea');
const textSave = document.querySelector('#save');

textSave.addEventListener('click',()=>{
    const blob = new Blob([textArea.value], {type:'text/plain'});
    const url = window.URL.createObjectURL(blob);
    //블롭블롭

    const link = document.createElement('a');
    link.style.display = 'none';
    link.href = url;
    link.download = 'file';
    document.body.appendChild(link);

    link.click();

    setTimeout(() => {
        document.body.removeChild(link);
        window.URL.revokeObjectURL(url);
    }, 100);
})

바꾼건 setTimeout함수 안에 있는 a를 link로 바꾼 것 뿐인데 갑자기 잘 된다. 많이 당황스럽다.

 

그럼 이제 여기서 뭘 할거냐… 지금은 텍스트파일을 저장하면 file로 저장되는데 이걸 이름을 입력받을거고, 이거 글쓰기 할 때 쓸거라서 글자수 세는 기능도 넣을거다.

---

제목을 파일명으로 저장하기

일단 파일명을 어떻게 할 거냐고? 이 스크린샷을 보자.

 

저 위에 인풋창을 새로 만들었는데, 쟤가 제목 겸 파일명이다. 그럼 자바스크립트에서 뭘 해야 하냐, 크게 1) input의 값이 있는지 확인하고 있으면 그걸 파일명으로 쓰되 2) 없을때에 대한 처리도 해야 한다.

 

const textTitle = document.querySelector('#title');

어디가요 갖고와야 뭘 하지.

 

link.download = 'file';

그리고 이 부분을 

 

    if (textTitle.value.trim().length == 0) {
        link.download = 'Untitled';
    }
    else {
        link.download = textTitle.value;
    }

이렇게 수정할거다.

 

?? 왜 됨?

---

글자수 세 주는 기능을 넣어보자

이건 전에 했던거 있어서 그거 걍 갖다 붙이면 된다.

 

https://koreanraichu.tistory.com/618

글자 수 카운터를 만들어보자

여기를 참고합시다.

---

Coming up...

1. 파일 불러오기(파일명을 제목으로 불러오고 내용을 내용으로 불러옴)