테스트 사이트 - 개발 중인 베타 버전입니다

게시글에 자동링크 주기

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

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

 

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

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

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

 

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

 

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

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

 

[code]

<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>

[/code]

 

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 에서 자동링크가 안 먹는 에디터의 경우는

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

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 13개

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

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



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


이렇게 넣으시면 됩니다.
@크레이티브
예 감사합니다.
근데 제 기본 마인드랄까? 그게 코어파일을 수정하지 않는다는 것이 철칙이라 이렇게 "무식"한 방법을 사용하고 있습니다.ㅋ
항상 좋은 script 감사 합니다.
@들레아빠 늘 격려주심 감사합니다.
정말 감사합니다. 저를 위한 코드 같네요.
진작 봤으면 오늘의 고생은 하지 않아도 됐는데...
@타버린나무 이건 예전에 어느 분이 이윰의 어떤 스킨이 자동링크가 안 된다고 해서 두번 세번 질문글을 올리는 걸 보고 대답해 준 코드에요.
물론 그 답변보다 더 빈틈을 막긴 했습니다만...
@써맨 감사합니다
유용한 정보 감사합니다.
@브러운아이 감사합니다
타 사이트에서 복사해다 붙여넣었을때 사진이 안보여서 원인을 찾다보니
본문 코드를 적용하면 이미지 붙여넣기 했을때 이미지가 안보이네요.

예를 들어 아래 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=" 과 " 사이의 문자열을 저장하는 정규표현식 이나 파싱구문을 만들어야 하는데 나중에 시간나면 보완할게요.
감사합니다..
아직 그누초보라 이것저것 해봐야할 것이 많은데.
많은 참고가 되고 있습니다~ ^^

게시글 목록

번호 제목
23606
23598
23585
23579
23578
23564
23550
23549
23548
23529
23510
23507
23481
23471
23453
23452
23450
23436
23428
23404
23396
23389
23380
23369
23350
23337
23317
23307
23298
23290