게시글에 자동링크 주기 > 그누보드5 팁자료실

그누보드5 팁자료실

게시글에 자동링크 주기 정보

게시글에 자동링크 주기

본문

대부분의 에디터들은 http 또는 https 로 시작하는 주소를 주면 자동링크가 먹힙니다만

에디터에 따라 또는 텍스트 옵션으로 글쓰기를 하는 경우에는 자동링크가 걸리지 않을 수도 있습니다.

 

view.skin.php 의 가장 하단부에 아래의 스크립트를 입력합니다.

이 코드는 게시글 안에 있는 기존의 a 태그까지 보호합니다.

그래서 자동링크 옵션이 있는 스마트에디터 등에 적용을 해도 상관은 없습니다만 중복성이기에 그럴 필요는 없고 자동링크가 보장되지 않는 에디터에만 사용하세요.

 

이미지나 오디오 또는 비디오나 아이프레임의 src 와 모든 엘레먼트의 title 과 이미지의 alt 그리고 배경으로 사용하는 백그라운드 이미지 경로는 링크로 바뀌지 않습니다.

 

링크 타겟은 _blank 로 주었는데 _self 등으로 바꾸려면 그 부분(딱 한 곳)만 찾아서 고쳐주세요.

프로토콜은 http 와 https 두 개만 적용하였습니다.

 


<script>
function autoLink() {
    for (beforeLink of arguments[0].querySelectorAll("a")) beforeLink.innerHTML = beforeLink.innerHTML.replaceAll('htt', 'htt*');
    keepProtocol = arguments[0].innerHTML.replaceAll('="htt', '="htt*');
    arguments[0].innerHTML = keepProtocol.replace(new RegExp("(http|https)://([-/.a-zA-Z0-9_~#%$?&=:200-377()]+)", "gi"), "<a href='$1://$2' target='_blank' rel='nofollow'>$1://$2</a>").replaceAll('="htt*', '="htt');
    for (afterLink of arguments[0].querySelectorAll("a")) afterLink.innerHTML = afterLink.innerHTML.replaceAll('htt*', 'htt');
}
autoLink(bo_v_con);
</script>

 

autoLink(bo_v_con); 에서 bo_v_con 은 게시글의 본문을 담는 div 의 아이디입니다.

이것 대신 아래의 것들 중 본인이 편한 걸 사용해도 되겠습니다.

 

autoLink(this["bo_v_con"])
autoLink(window["bo_v_con"])
autoLink(document.getElementById("bo_v_con"))
autoLink(document.querySelector("#bo_v_con"))

 

꼭 bo_v_con 뿐 만이 아니라 다른 형태의 컨텐츠라 할지라도 아이디나 클래스 등을 가지고 같은 형태로 원하는 영역에 자동링크를 줄 수 있게끔 함수로 만들었으니 응용해서 사용하실 분은 그렇게 하세요.

 

참고로 https://sir.kr/g5_skin/51500 에서 자동링크가 안 먹는 에디터의 경우는

이 게시글의 코드를 적용하거나 아니면 이 게시글의 코드를 링크게시글 첨부파일의 가장 상단에 넣어주세요.

추천
12

댓글 13개

참고삼아 개발자님께서 알려주신 것도 있어 여기에 적습니다.
lib/common.lib.php

552 바로 밑에 $content = url_auto_link($content);
넣으시면 자동 링크됩니다.



        if($filter)
            $content = html_purifier($content);
            $content = url_auto_link($content);
        }


이렇게 넣으시면 됩니다.

예 감사합니다.
근데 제 기본 마인드랄까? 그게 코어파일을 수정하지 않는다는 것이 철칙이라 이렇게 "무식"한 방법을 사용하고 있습니다.ㅋ
이건 예전에 어느 분이 이윰의 어떤 스킨이 자동링크가 안 된다고 해서 두번 세번 질문글을 올리는 걸 보고 대답해 준 코드에요.
물론 그 답변보다 더 빈틈을 막긴 했습니다만...
타 사이트에서 복사해다 붙여넣었을때 사진이 안보여서 원인을 찾다보니
본문 코드를 적용하면 이미지 붙여넣기 했을때  이미지가 안보이네요.

예를 들어 아래 https://v.daum.net/v/20220824202703438 페이지를 복붙했을 경우

// 본문 코드 없을경우
<img alt="지난 2018년 3월23일 뇌물수수 혐의로 구속영장이 발부된 이명박 전 대통령이 서울 논현동 자택에서 서울동부구치소로 향하자 이 전 대통령의 아들 이시형씨가 눈물을 흘리고 있다. /경향신문 자료사진" class="thumb_g_article" src="https://img1.daumcdn.net/thumb/R658x0.q70/?fname=https://t1.daumcdn.net/news/202208/24/khan/20220824202706871zqtx.png" width="658" style="border:0px none;width:680px;margin:0px auto;vertical-align:top;">

// 본문 코드가 있을경우
<img alt="지난 2018년 3월23일 뇌물수수 혐의로 구속영장이 발부된 이명박 전 대통령이 서울 논현동 자택에서 서울동부구치소로 향하자 이 전 대통령의 아들 이시형씨가 눈물을 흘리고 있다. /경향신문 자료사진" class="thumb_g_article" src="https://img1.daumcdn.net/thumb/R658x0.q70/?fname=<a href='https://t1.daumcdn.net/news/202208/24/khan/20220824202706871zqtx.png' target='_blank'>https://t1.daumcdn.net/news/202208/24/khan/20220824202706871zqtx.png</a>" width="658" style="border:0px none;width:680px;margin:0px auto;vertical-align:top;">


제 실력으론 소스 수정은 어림 없는지라
이런 경우 이런 문제가 있다는 말씀만 알려 드립니다.
보완해주시면 감사하겠습니다.
이건 사이트마다 이미지를 불러오는 방식이 달라서...
이미지태그 중에서 scr=" 과 " 사이의 문자열을 저장하는 정규표현식 이나 파싱구문을 만들어야 하는데 나중에 시간나면 보완할게요.
전체 2,412 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT