TinyEdior는 텍스트 편집기 라이브러리 입니다.
link, 이미지를 추가하거나 다양한 텍스트를 편집할 수 있는 기능을 빠르고 쉽게 사용할 수 있또록 도와줍니다
이게 가능한 이유는
왼쪽의 사진은 텍스트 에디터를 사용하여 작성한 텍스트, 오른쪽은 그 소스파일 입니다.
에디터를 이용하여 내용을 작성하게 되면, 텍스트에디터가 자동적으로 html코드로 변환하여 그에 맞는 코드로 작성되는 형식입니다.
텍스트 에디터는 작은 하나의 iframe, 하나의 html문서 파일이되어 그 안에 html코드로 작성되는 텍스트들을 여러가지 스타일과 태그가 적용된 화면으로 보여주는 형태입니다.
여러가지 커스텀
위와같이 자동적으로 html코드를 작성해주는데, 개발을 하다보면 조금씩 수정을 해야할 필요성을 느낍니다.
특정 태그에 class를 추가한다던지, 링크를 저장하는 경우에는 상대경로로 할 건지, 절대경로로 할 건지 등등
그 여러가지 커스텀가능한 기능들중에서, 개인적으로 사용해봤던 몇 가지 link에 관련된 커스텀기능을 소개할려고 합니다.
URL 절대경로 / 자동경로
TinyEditor에서는 link를 지정할 때, 기본적으로 자동경로로 a태그를 생성합니다.
제가 사용하면서, 직면했던 문제는 텍스트를 저장하는 origin url과 저장한 텍스트를 보여주는 origin url이 달라서 생기는 문제점입니다.
텍스트를 작성하는 URL이 "https://www.jongin.com/create" 인 상황에서 텍스트를 추가한다고 가정했을 때
추가하는 link의 URL도 "https://www.jongin.com/파일"으로 시작하는 경우, 절대경로로 표시되기 때문에
<a href="../../파일">텍스트</a>위와 같은 형태로 만들어지게 됩니다.
그러면, 다른 "https://plus.jongin.com/show"에서 위의 링크를 클릭하게되면, 원했던 "https://www.jongin.com/파일"이 켜지는 것이 아니라, "https://plus.jongin.com/파일"이 열리는 상황이 나오게됩니다.
해결방법
tinyMCE.init({
...
convert_urls : false
});convert_urls의 값이 true일 경우에는 자동경로, false는 절대경로입니다.
tinyEditor에는 기본값이 상대경로이기 때문에, true로 설정되어 있습니다.
위와같이 설정해주게되면, a태그는 origin url이 동일하더라도 절대경로로 작성되게 됩니다.
<a href="https://www.jongin.com/파일">텍스트</a>
a 태그에 class 설정 (추가)
tinyEditor로 작성하는 a 태그에는 특정 class를 부여하여 style을 적용한다던지, javascript를 적용하여 동적인 변화를 일으키고 싶은 경우 사용할 수 있습니다.
tinymce.init({
...
link_class_list: [
{title: '없음', value: ''},
{title: '빨간색', value: 'red'},
{title: '파랑색', value: 'blue'}
],
})link_class_list에 title과 value의 값을 가지는 객체 타입으로 작성합니다.
title은 유저에게 선택가능한 텍스트로써 보여지게되고, value는 실제 class에 적용되는 내용이 됩니다.
link를 선택해보면, class를 선택할 수 있는 select창이 하나 생기게 됩니다.
<a class='red' href='URL'>new</a>빨간색을 선택하면 위와같은 a 태그가 적용되게 됩니다.
target 옵션
a 태그에는, 링크를 어느 화면에서 열지를 정할 수 있는 target 옵션이 있습니다.
_blank : 링크된 문서를 새로운 윈도우나 탭(tab)에서 오픈함.
_self : 링크된 문서를 링크가 위치한 현재 프레임에서 오픈함. (기본값)
_parent : 링크된 문서를 현재 프레임의 부모 프레임에서 오픈함.
_top :링크된 문서를 현재 윈도우 전체에서 오픈함.
tinyEditor는 따로 target 속성을 추가하지 않기 때문에, 기본값인 현재 프레임에서 링크를 열게됩니다.
tinymce.init({
...
default_link_target: '_blank'
});default_link_target 를 이용하게 되면, target의 값을 넣어줄 수 있게되어, 새로운 브라우저로 열고싶은 경우에 위의 코드처럼 _blank 값을 입력하면 됩니다.
