Markdown 마크다운 에디터에서 이미지 클릭시에 크게 만들기(그누보드) 페이지 정보 작성자 Docker 댓글 0건 조회 791회 작성일 20-08-02 09:33 목록 본문 그누보드에서 마크다운 에디터를 적용시켰을 때 썸네일과 클릭시 이미지를 크게 보여주는 할려고 하면. 그누보드에서 썸네일 함수를 수정해야 됩니다. 이 라이브러리는 html의 이미지 태그를 찾아서 그 이미지를 현재 스크린에 맞게 썸네일을 만드는 과정입니다. 마크다운에서는 이미지 태그 대신에 마크다운 문법 ``를 매칭해서 이 작업을 해야 됩니다. (get_view_thumbnail_md 함수를 만드어야 됨.) ``` <?php echo get_view_thumbnail($view['content']); ?> ``` 썸네일 이미지와 원본 이미지를 구분할 수 있는 마크다운 문법은 아래와 같이 ``` [](원본이미지) ``` 이렇게 하면 클릭하면 원본 이미지만 나오게 됨. [여기](https://hacpai.com/article/1595921029800) 처럼 이미지를 클릭할 때 효과를 주면서 화면이 커지게 하고 싶을 때에는 CSS와 javascript로 해야. 샘플 코드는 [여기](https://www.w3schools.com/howto/howto_css_modal_images.asp) 처럼 해야됨. 마크다운 에디터에서 지원할려고 하면 마크다운 렌더링시에 img 태그에 ID가 없으니 이것을 넣어야 됨. (`lute`에서 수정해야 됨.) --- 1. 각 이미지별로 이벤트를 넣어주어야 되. onclick 이벤트를.. 그런데 무엇으로 구별하지 ``` <p> <span class="vditor-reset__preview"> <img src="https://b3logfile.com/file/2020/07/image-3673b6de.png?imageView2/2/interlace/1/format/webp" alt="image.png" style="height: 676px; background-image: none; background-color: transparent;"> <div class="fn__flex-inline"> <svg><use xlink:href="#iconPhoto"></use></svg> <span class="fn__space5"></span> 312 x 676 <span class="fn__space5"></span> <span class="fn__space5"></span> <svg><use xlink:href="#iconPhotoActual"></use></svg> <span class="fn__space5"></span> 1080 x 2340 </div> </span> </p> ``` 2. [여기](https://hacpai.com/article/1595921029800) 에서는 아래 element를 통으로 만들어서 넣어줌. ``` <div class="img-preview" style="width: 1434px;"> <div class="img-preview__bar"> <span class="fn__flex-inline"> <svg><use xlink:href="#iconPhoto"></use></svg> <span class="fn__space5"></span>0 x 0</span> <a class="fn__pointer fn__flex-inline" href="https://b3logfile.com/file/2020/07/image-725355d5.png" target="_blank" rel="noopener"> <svg><use xlink:href="#iconPhotoActual"></use></svg> <span class="fn__space5"></span>查看原图 [842 x 948] </a> <span class="fn__pointer fn__flex-inline imgPreviewRevolveBtn" data-deg="0"> <svg><use xlink:href="#iconRevolve"></use></svg> <span class="fn__space5"></span>旋转</span> <a class="fn__pointer fn__flex-inline" rel="noopener" target="_blank" href="https://b3logfile.com/file/2020/07/image-725355d5.png?attname="> <svg><use xlink:href="#iconDownload"></use></svg> <span class="fn__space5"></span>下载 </a> <a class="fn__pointer fn__flex-inline" href="https://hacpai.com/settings/file"> <svg><use xlink:href="#iconArticles"></use></svg> <span class="fn__space5"></span>我的文件 </a> <span class="fn__pointer fn__flex-inline" onclick="this.parentElement.parentElement.outerHTML = '';document.body.style.overflow = 'visible'"> <svg><use xlink:href="#iconClose"></use></svg> <span class="fn__space5"></span>关闭</span> </div> <div class="img-preview__img" onclick="this.parentElement.outerHTML = '';document.body.style.overflow = 'visible'" style="padding-top: 30px;"> <img style="transform: translate3d(296px, 0px, 0px); transition: inherit;" src="https://b3logfile.com/file/2020/07/image-725355d5.png?imageView2/2/interlace/1/format/webp"> </div> </div> ``` 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 댓글목록 등록된 댓글이 없습니다.
