jsdev 미리보기

JavaScript
1

jsdev 글작성시 생성되는 미리보기를 따라해보고 싶습니다. 글만이라면 마크다운 변환시켜주는 컴포넌트 가져다가 쓰면 되지만 이미지 미리보기의 경우 쉽지가 않은 것 같습니다. 특히, 이미지를 업로드 하고 나면 에디터에 마크다운 문법으로 이미지 테그가 생성되는데, 이 테그를 삭제했을 때, 마찬가지로 서버에서도 이미지가 삭제가 일어나야 하는데 어떻게 테그가 삭제되었다는걸 프로그램이 인지를 하게 시켜야 할지 감이 안오네요.

2

업로드할 때 fileKey를 하나 발급해서 업로드된 파일의 URL과 함께 저장하고요.
1. { fileKey: 'kdfjlsdgjlksdjfld' url: 'http://..........' }

서버에서 저장할 때 fileKey에 해당하는 파일 목록을 불러서요, 본문에 들어있는 URL과 비교해서 불포함된건 지워주면 되어요.
1. { fileKey: 'kdfjlsdgjlksdjfld', contents: '.... <img="http://......" /> .........' }

본문과 fileKey가 연결되지 않은 (본문이 작성된적 없는) 것들은 주기적으로 지워주면 되고요.

차근 차근 순차적으로 생각하시면 어렵지 않습니다.

2개의 좋아요
3

답변 감사합니다. 지금 알려주신대로 만드는 중입니다.

제가 하는 방식은 이미지를 input 에 추가 할 때마다 AJAX로 파일을 서버에 저장하고 클라이언트로 저장한 파일이름과 위치를 쏴주고, 쏴준 데이터를 클라이언트의 리스트에 저장하는 겁니다.

그런 다음 제출버튼을 클릭했을 때 작성된 텍스트에서 실제 있는 마크다운 이미지 위치들을 리스트로 만들고, 위에서 만들어져 있는 리스트와 비교해서 없는 항목만 추려 서버에서 파일을 지우는 방식입니다.

비슷하게 만들고 있다고 생각하지만, 궁금한 점이 더 있는데요,

jsdev 미리보기에서 업로드를 하면 마크다운 이미지 태그의 url이 upload://imagename.jpg 로 되어 있던데, 평범한 url은 아닌 것 같습니다. 제 경우에는 실제 서버에서의 이미지 위치를 가져와 그대로 썼는데 어떤 방식을 썼는지 궁금하네요!