Markdown 마크다운 에디터에서 이미지 클릭시에 크게 만들기(그누보드) 페이지 정보 작성자 Docker 댓글 0건 조회 791회 작성일 20-08-02 09:33 목록 본문 그누보드에서 마크다운 에디터를 적용시켰을 때 썸네일과 클릭시 이미지를 크게 보여주는 할려고 하면. 그누보드에서 썸네일 함수를 수정해야 됩니다. 이 라이브러리는 html의 이미지 태그를 찾아서 그 이미지를 현재 스크린에 맞게 썸네일을 만드는 과정입니다. 마크다운에서는 이미지 태그 대신에 마크다운 문법 ``를 매칭해서 이 작업을 해야 됩니다. (get_view_thumbnail_md 함수를 만드어야 됨.) ``` ``` 썸네일 이미지와 원본 이미지를 구분할 수 있는 마크다운 문법은 아래와 같이 ``` [](원본이미지) ``` 이렇게 하면 클릭하면 원본 이미지만 나오게 됨. [여기](https://hacpai.com/article/1595921029800) 처럼 이미지를 클릭할 때 효과를 주면서 화면이 커지게 하고 싶을 때에는 CSS와 javascript로 해야. 샘플 코드는 [여기](https://www.w3schools.com/howto/howto_css_modal_images.asp) 처럼 해야됨. 마크다운 에디터에서 지원할려고 하면 마크다운 렌더링시에 img 태그에 ID가 없으니 이것을 넣어야 됨. (`lute`에서 수정해야 됨.) --- 1. 각 이미지별로 이벤트를 넣어주어야 되. onclick 이벤트를.. 그런데 무엇으로 구별하지 ``` 312 x 676 1080 x 2340 ``` 2. [여기](https://hacpai.com/article/1595921029800) 에서는 아래 element를 통으로 만들어서 넣어줌. ``` 0 x 0 查看原图 [842 x 948] 旋转 下载 我的文件 关闭 ``` 3. 그럼 각 이미지에 어떻게 이미지 binding을(bindEvent) 해 주어야. 4. bindEvent는 html에서 로딩된 후에 각 이미지 태그에 바인딩을 해야 되니 이 일은 그누보드에서 해야 됨. 5. 그렇다면 이미지의 아이디로 필요없으니 id 삽입도 필요없음. 결국은 이미지 처리 관련은 모두 그누보드에서 해야 됨. (에디터에서는 할일 없음.) --- 1번이 한 게시판에 여러개 있게 되면, addEventListener click를 .vditor-reset .vditor-reset__preview 에 걸어 두면 각 class name에 이벤트가 걸림. function(this, event)로 넘겨주면 this에 해당 Element가 넘어가는 것 같음. [참조](https://stackoverflow.com/questions/17060971/get-class-name-from-element-with-onclick) 이 안에 있는 "img" 태그를 찾아서 $(this).find('img') `$`가 `i()`로 변환됨. 이전글Vditor 단축키 20.08.03 다음글멘션 기능 구현을 위한 생각 20.07.30 댓글 0 댓글목록 등록된 댓글이 없습니다.