에디터에서 링크를 입력하면 버튼 형태로 만들어주려고 하는데요
본문
안녕하세요?
Summernote 에디터에 사용할 링크파싱 플러그인(?)을 만들고 있는데요~
제가 경험이 없어서 그런지 막히는 부분이 있어서 질문 드려요 ^-^
일단 Summernote 에디터 최신버전 0.8.12을 그누보드에서 작동하도록 수정했고,
PHP 파일로 URL을 입력하면 curl로 받아와서
meta 태그의 og:title, og:description 등을 적절하게 찾아 인코딩을 해서
제목과 설명을 JSON으로 넣어주는 것까지는 만들었어요.
(네이버TV, 카카오TV, vlive.tv의 영상은 URL 넣으면 바로 출력되도록 따로 구현했어요.)
그 다음 단계로 에디터에서 링크삽입 버튼을 누르면 부트스트랩 모달창이 뜨고
거기에 URL을 입력하면 ajax로 JSON을 받아와서 에디터에 일종의 버튼 형태로 삽입하려고 하는데요.
아직 디자인을 하지 않았지만 대략 다음과 같은 형태로 간단히 만들려고 해요~
og:image까지 고려하면 너무 고려할 변수가 많아져서 이미지를 받아오는 것은 일단 유보했어요 ㅠㅠ
처음에는 PHP의 GD library를 이용하여 텍스트를 이미지 형태로 전환해서 넣으려고 했는데요.
(실은 위 이미지도 그렇게 만든 결과물이에요)
이러한 방식의 문제점은 img 태그의 width를 조절한다고 하더라도
PC에 사이즈를 맞추면 모바일에서는 보기에 안 좋고,
모바일에 사이즈를 맞추면 PC에서는 보기에 안 좋더군요 ㅠㅠ
그래서 이미지가 아니라 특정 태그를 에디터에 넣어주는 방식으로 만들어보려고 하는데요.
어떤 태그로 넣어주는 것이 디자인 측면 및 보안 측면에서 가장 적절할까요?
가능하면 htmlpurifier의 설정을 건드리지 않으려고 하는데요.
button 태그 같은 경우에는 부트스트랩을 이용하여 꾸미기는 편하겠지만
htmlpurifier에서 필터링되니 사용할 수 없을테구요.
제 짧은 생각에는 table 태그를 사용해서 <tr> 2개로 제목과 설명을 출력하고
전체 테이블을 a 태그로 감쌀려고 하는데요 ㅠㅠ
이런 상황에서 어떤 태그를 이용하여 에디터에서 버튼(?)을 만들면 좋을지 여쭤볼게요.
답변 달아주실 분께 미리 감사드려요~
그리고 혹시 링크파싱 관련하여 제가 참고할만한 자료가 있다면 알려주시면 감사하겠습니다 ^-^
그럼 날씨가 덥지만 이번 한 주도 화이팅이요!
답변 2
table 태그 전체를 a태그로 감싸는 것은 허용되지 않는군요 ㅠㅠ
table 태그를 굳이 사용한다면 table 안의 텍스트에 a태그를 지정하거나, 자바스크립트 또는 jQuery로 처리하는 방법밖에 없네요.
다른 더 좋은 방법이 있다면 설명해주시면 감사하겠습니다!
그럼 안녕히 주무세요 ^-^
HTMLpurifier도 건드리지 않고, 자바스크립트 또는 jQuery도 최대한 사용하지 않고 해결하려니 마땅히 떠오르는 방법이 없네요 ㅠㅠ
다만 부트스트랩에서는 a태그에 'btn btn-primary' 같은 class 속성을 주면 마치 부트스트랩 button처럼 사용할 수 있더군요.
제가 생각했던 방법 중에서는 이 방법이 보안이나 퍼포먼스를 저해하지 않으면서도 가장 무난할 것으로 생각되네요~
제가 초보라서 좋은 방법이 떠오르지 않는데 더 좋은 방법이 있다면 댓글로 남겨주시면 감사하겠습니다!
그럼 안녕히 주무시고 내일도 화이팅입니다 ^-^
