editor

문서 › 글자와 문단

링크

링크 넣기·고치기·해제, 새 창 열기, nofollow와 linkRel.

글자나 사진에 주소를 겁니다. 링크 창에서 새 창으로 열지, 검색엔진이 따라가지 않게 할지(nofollow)를 고를 수 있습니다.

직접 써 보기

이 데모의 코드

createEditor('#editor', {
  toolbar: 'bold | link unlink',
  linkRel: 'ugc',
});

링크 넣기

  • 글자를 선택하고 link 버튼이나 Ctrl+K. 선택 없이 누르면 "표시할 글자" 칸이 함께 나옵니다 (비우면 주소가 그대로 글자가 됩니다).
  • naver.com 처럼 앞부분 없이 쓰면 https:// 가 붙고, name@example.com 은 mailto: 링크가 됩니다.
  • javascript: 같은 쓸 수 없는 주소는 "쓸 수 없는 주소예요" 안내와 함께 거부됩니다.
  • 주소 칸에서 글 안의 책갈피(id 가 붙은 곳)를 골라 #책갈피 링크를 걸 수 있습니다 (책갈피와 목차).
  • 본문에 주소를 치고 공백이나 Enter 를 누르면 저절로 링크가 됩니다 (자동 링크). 주소만 붙여 넣어도 링크가 됩니다.

새 창과 nofollow

링크 창의 "새 창에서 열기"를 켜면 target="_blank" 와 함께 rel="noopener noreferrer" 가 붙습니다. "검색엔진이 따라가지 않게 (nofollow)"를 켜면 rel 에 nofollow 가 들어갑니다. 다른 곳에서 붙은 sponsored, ugc 는 그대로 둡니다.

모든 링크에 rel 붙이기 (linkRel)

방문자가 쓰는 게시판이라면 linkRel: 'nofollow ugc' 를 주세요. getHTML() 로 꺼낼 때 모든 http(s) 링크에 그 값이 더해집니다. nofollow, sponsored, ugc 만 쓸 수 있고 편집 중인 내용은 바뀌지 않습니다.

고치기와 해제

  • 링크 안에 커서를 두면 작은 막대가 떠서 주소, 열기, 수정, 링크 해제 버튼을 보여 줍니다.
  • Ctrl+클릭으로 링크를 새 탭에서 엽니다. #책갈피 링크는 글 안의 그 위치로 갑니다.
  • unlink: 커서만 둔 상태면 링크 전체를, 선택한 상태면 선택한 부분의 링크를 풉니다. 글자는 남습니다.
  • 사진을 선택하고 링크를 넣으면 사진 전체가 링크가 됩니다 (사진).

프리셋과 휴대폰

link 는 모든 프리셋의 첫 줄과 휴대폰 툴바 첫 줄에 있습니다. unlink 는 어느 프리셋에도 없고, 링크 막대와 링크 창의 해제 버튼으로 대신합니다. 글자를 선택하면 뜨는 선택 툴바에도 링크 버튼이 있습니다.

저장되는 HTML

<a href="https://82editor.com/">82editor 홈페이지</a>
<a href="https://example.com/" target="_blank" rel="nofollow noopener noreferrer">새 창 + nofollow</a>
<!-- linkRel: 'ugc' 이면 꺼낼 때 -->
<a href="https://82editor.com/" rel="ugc">82editor 홈페이지</a>

옵션

이름타입기본값설명
linktoolbar item—링크 창 열기
unlinktoolbar item—링크 해제
linkRelstring없음꺼낼 때 모든 http(s) 링크에 더할 rel: nofollow sponsored ugc
autoLinkbooleantrue친 주소를 저절로 링크로