이전글인 "댓글에 URL주소 자동링크 삽입" 내용중,
티스토리, 댓글 URL주소 자동링크 삽입
티스토리, 댓글 URL주소에 자동으로 링크 삽입방법 $('.content__list .body').each(function() { var autolink = $(this).html().replace(/(https?:\/\/[^ ;|\\*'"!,()<>]+\/?)/ig,'$1'); $(this).html(autolink)..
tooltip.tistory.com
아쉬운 점 ?
댓글을 입력하고 하이퍼링크가 자동으로 활성화 되지 않고 새로고침을 해줘야 댓글의 하이퍼링크가 활성화된다.
해결방법 ?!
[티스토리] 댓글에 링크 및 이미지 추가하기
업데이트 2020.07.03 - innerHTML을 사용하지 않고 댓글 내용을 업데이트합니다. 단순히 텍스트밖에 적을 수 없는 티스토리 댓글에 링크, 이미지, 비디오, 유튜브 등을 추가해 화려하게 꾸미는 스크립
marshall-ku.com
마샬님의 블로그를 참고하면 MutationObserver를 이용해 변화를 감지하는 방식이라 새로고침 없이도 댓글의 하이퍼링크가 자동으로 활성화 된다.
적용방법 ^^
$.getScript("https://cdn.jsdelivr.net/gh/marshall-ku/update-tistory-comments@latest/dist/autoWrap.js", function() { autoWrap("__tidory", ".body"); });
autoWrap("__tidory", ".body"); 에서
"__tidory" 첫 번째 인자론 <s_rp_container> 바로 아래에 있는 요소에 추가한 id를,
".body" 두 번째 인자론 를 감싼 요소에 추가한 class를 .과 함께 입력
/*** 아래 내용을 댓글에 입력하면 ***/
댓글에 입력된 URL 주소
내부 : https://tooltip.tistory.com/65
내부 : https://tooltip.tistory.com/guestbook
내부 : https://tooltip.tistory.com/entry/티스토리-댓글-URL주소-자동링크-삽입
외부 : https://naver.com
입력하면 텍스트가 아닌 클릭을 할수 있다
이미지 링크 큰거
https://imgur.com/TyFaZxJ.png
이미지 링크 작은거
https://cdnjs.cloudflare.com/ajax/libs/emojione/2.1.4/assets/png/1f4bb.png https://cdnjs.cloudflare.com/ajax/libs/emojione/2.1.4/assets/png/1f4f2.png
유튜브 링크
https://youtu.be/BZya9z-m0p8
네이버 https://naver.com
