문서 › 글자와 문단
링크
링크 넣기·고치기·해제, 새 창 열기, nofollow와 linkRel.
글자나 사진에 주소를 겁니다. 링크 창에서 새 창으로 열지, 검색엔진이 따라가지 않게 할지(nofollow)를 고를 수 있습니다.
직접 써 보기
자세한 내용은 82editor 홈페이지를 보세요. 링크 안에 커서를 두면 주소와 수정·해제 버튼이 나옵니다.
이 데모의 코드
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>옵션
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
link | toolbar item | — | 링크 창 열기 |
unlink | toolbar item | — | 링크 해제 |
linkRel | string | 없음 | 꺼낼 때 모든 http(s) 링크에 더할 rel: nofollow sponsored ugc |
autoLink | boolean | true | 친 주소를 저절로 링크로 |