웹마스터 팁

  2. Support
  3. 웹마스터 팁

게시판 글쓰기에서 자동링크의 target을 _blank로 일괄 적용

2011.08.23 17:21

무얼까

게시판에 url을 쓰면 <a href="url">내용</a> 처럼 기본으로 자동 링크가 걸립니다.


문제는 target이 지정되어 있지 않아 해당 url을 클릭하면 현재 창에 뜬다는 것이죠. 전 이게 불편하더군요.
[HTML 편집기]로 직접 target을 지정하거나, URL 버튼을 이용해도 되지만, url이 많을 경우 버겁습니다. 귀찮기도 하구요. -_-;
 

그래서, XE 기본 편집기인 'xpresseditor'를 수정했습니다. 혹시나, 필요하신 분이 계실까 해서 올려 봅니다.

 

1.  에디터의 'URL' 버튼을 클릭하면 아래 그림처럼 나타나며, '_blank' 버튼을 클릭하면 본문 내용에 있는 A 태그 중에서 target이 지정되지 않은 링크에 target="_blank" 를 설정합니다.

sample.jpg

 


 

2. 수정한 파일

  • ./modules/editor/skins/xpresseditor/editor.html
  • ./modules/editor/skins/xpresseditor/css/default.css
  • ./modules/editor/skins/xpresseditor/js/Xpress_Editor.js

 

 

3. editor.html

  1. <li class="url xpress_xeditor_ui_hyperlink">
  2.     <button type="button" title="{$lang->edit->url}"><span>{$lang->edit->url}</span></button>
  3.     <!-- URL 레이어 -->
  4.     <div class="layer xpress_xeditor_hyperlink_layer" style="display:none;">
  5.         <fieldset>
  6.             <h3>{$lang->edit->hyperlink}</h3>
  7.             <input name="" class="link" type="text" value="http://" title="URL" />
  8.             <p><input name="" id="target" type="checkbox" value="" /><label for="target">{$lang->edit->target_blank}</label></p>
  9.         </fieldset>
  10.         <div class="btn_area">
  11.             <button type="button" class="confirm" title="{$lang->cmd_confirm}"><span>{$lang->cmd_confirm}</span></button>
  12.             <button type="button" class="cancel" title="{$lang->cmd_cancel}"><span>{$lang->cmd_cancel}</span></button>
  13.             <button type="button" class="blank" title="Make target='_blank'"></button>
  14.         </div>
  15.     </div>
  16.     <!-- /URL 레이어 -->
  17. </li>

 

4. default.css

./modules/editor/skins/xpresseditor/img/ 에 'btn_layer_blank.gif' 버튼 이미지를 만들어 업로드.

  1. .xpress-editor .tool .layer .btn_area button.confirm{ width:38px; height:21px; background:url(../img/btn_layer_confirm.gif) no-repeat;}
  2. .xpress-editor .tool .layer .btn_area button.cancel{ width:38px; height:21px; background:url(../img/btn_layer_cancel.gif) no-repeat;}
  3. .xpress-editor .tool .layer .btn_area button.blank{ width:41px; height:21px; background:url(../img/btn_layer_blank.gif) no-repeat;}

 

5. Xpress_Editor.js

  1. xe.XE_Hyperlink = $.Class({
  2.     name : "XE_Hyperlink",
  3.     sATagMarker : "HTTP://HUSKY_TMP.MARKER/",
  4.  
  5.     $init : function(elAppContainer){
  6.         this._assignHTMLObjects(elAppContainer);
  7.         this.sRXATagMarker = this.sATagMarker.replace(/\//g, "\\/").replace(/\./g, "\\.");
  8.     },
  9.  
  10.     _assignHTMLObjects : function(elAppContainer){
  11.         this.oHyperlinkLayer = $("DIV.xpress_xeditor_hyperlink_layer", elAppContainer).get(0);
  12.         this.oLinkInput  = $("INPUT[type=text]", this.oHyperlinkLayer).get(0);
  13.         this.oBtnConfirm = $("BUTTON.confirm", this.oHyperlinkLayer).get(0);
  14.         this.oBtnCancel  = $("BUTTON.cancel", this.oHyperlinkLayer).get(0);
  15.         this.oBtnBlank  = $("BUTTON.blank", this.oHyperlinkLayer).get(0); // add by 무얼까 mooin@hitel.net 2011-8-23
  16.         this.oCbNewWin   = $("INPUT[type=checkbox]", this.oHyperlinkLayer).get(0);
  17.     },
  18.  
  19.     $ON_MSG_APP_READY : function(){
  20.         this.oApp.exec("REGISTER_HOTKEY", ["ctrl+k", "XE_TOGGLE_HYPERLINK_LAYER", []]);
  21.  
  22.         this.oApp.registerBrowserEvent(this.oBtnConfirm, "mousedown", "XE_APPLY_HYPERLINK");
  23.         this.oApp.registerBrowserEvent(this.oBtnCancel, "mousedown", "HIDE_ACTIVE_LAYER");
  24.         this.oApp.registerBrowserEvent(this.oBtnBlank, "mousedown", "XE_MAKE_BLANK"); // add by 무얼까 mooin@hitel.net 2011-8-23
  25.         this.oApp.registerBrowserEvent(this.oLinkInput, "keydown", "EVENT_XE_HYPERLINK_KEYDOWN");
  26.  
  27.         this.oApp.exec("REGISTER_UI_EVENT", ["hyperlink", "click", "XE_TOGGLE_HYPERLINK_LAYER"]);
  28.     },
  29.  
  30.     $ON_XE_TOGGLE_HYPERLINK_LAYER : function(){
  31.         // hotkey may close the layer right away so delay here
  32.         this.oApp.delayedExec("TOGGLE_TOOLBAR_ACTIVE_LAYER", [this.oHyperlinkLayer, null, "XE_RESET_HYPERLINK_LAYER", []], 0);
  33.     },
  34.  
  35.     $ON_XE_RESET_HYPERLINK_LAYER : function(){
  36.         this.oApp.exec("FOCUS", []);
  37.         this.oSelection = this.oApp.getSelection();
  38.         var oAnchor = this.oSelection.findAncestorByTagName("A");
  39.         this.oCbNewWin.checked = true; // 무얼까가 'true'로 수정 2011-08-23
  40.         if(oAnchor){
  41.             this.oSelection.selectNode(oAnchor);
  42.             this.oSelection.select();
  43.  
  44.             var sTarget = oAnchor.target;
  45.             if(sTarget && sTarget == "_blank") this.oCbNewWin.checked = true;
  46.  
  47.             this.oLinkInput.value = oAnchor.href?oAnchor.href:"http://";
  48.         }else{
  49.             this.oLinkInput.value = "http://";
  50.         }
  51.  
  52.         this.oLinkInput.focus();
  53.         this.oLinkInput.value = this.oLinkInput.value;
  54.     },
  55.  
  56.     $ON_XE_APPLY_HYPERLINK : function(){
  57.         var sURL = this.oLinkInput.value, newWin = this.oCbNewWin.checked, sTarget = newWin?'_blank':'';
  58.  
  59.         this.oApp.exec("FOCUS", []);
  60.         this.oSelection = this.oApp.getSelection();
  61.  
  62.         if(this.oSelection.collapsed){
  63.             var str = "<a href=" + sURL + "' target="+sTarget+">" + sURL + "</a>";
  64.             this.oSelection.pasteHTML(str);
  65.         }else{
  66.             var nSession = Math.ceil(Math.random()*10000);
  67.             var sMarker  = this.sATagMarker+nSession;
  68.             var arg = ( sURL == "" ? ["unlink"] : ["createLink", false, sMarker+sURL] );
  69.             this.oApp.exec("EXECCOMMAND", arg);
  70.  
  71.             try { this.oSelection.setFromSelection() }catch(e){};
  72.             var oDoc = this.oApp.getWYSIWYGDocument();
  73.             $(oDoc.body.getElementsByTagName("A"))
  74.                 .filter('[href^="'+sMarker+'"]')
  75.                     .attr('href', function(){
  76.                             var rx = new RegExp('^'+sMarker.replace(/([\.\\])/g, '\\$1'), 'i');
  77.  
  78.                             if (sTarget) $(this).attr('target', sTarget);
  79.                             else $(this).removeAttr('target'+ ');
  80.  
  81.                             return this.href.replace(rx, '');
  82.                         });
  83.         }
  84.         this.oApp.exec("HIDE_ACTIVE_LAYER");
  85.  
  86.         setTimeout($.fnBind(function(){try{this.oSelection.select()}catch(e){}}, this), 0);
  87.     },
  88.  
  89.     /* add by 무얼까 mooin@hitel.net 2011-8-23
  90.      * a 태그에 target 속성이 없으면 target="_blank"로 설정
  91.      */
  92.     $ON_XE_MAKE_BLANK : function(){
  93.         var doc = this.oApp.getWYSIWYGDocument();
  94.         var oA = doc.getElementsByTagName("a");
  95.         for(var i=0;i<oA.length;i++) {
  96.             if( !oA[i].hasAttribute('target') ) {
  97.                 oA[i].setAttribute('target', '_blank');
  98.             }
  99.         }
  100.         this.oApp.exec("HIDE_ACTIVE_LAYER");
  101.     },
  102.  
  103.     _validateURL : function(sURL){
  104.         return /^(http|https|ftp|mailto):(?:\/\/)?((\w|-)+(?:[\.:@](\w|-))+)(?:\/|@)?([^"\?]*?)(?:\?([^\?"]*?))?$/.test(sURL);
  105.     },
  106.  
  107.     $ON_EVENT_XE_HYPERLINK_KEYDOWN : function(oEvent){
  108.         if (oEvent.keyCode == 13){
  109.             this.oApp.exec("XE_APPLY_HYPERLINK");
  110.             oEvent.preventDefault(); oEvent.stopPropagation();
  111.         }
  112.     }
  113. });

 

6. 추가로 위 하이퍼링크 설정 창의 '새 창으로' 체크박스가 기본으로 체크되어 있게 수정했습니다.

위 Xpress_Editor.js 파일 소스 중 4673 라인 참고

이 게시물을
좋아요
목록
제목 글쓴이 날짜
(CSS) IE8용 웹조각 기능 file Simulz 2009.03.26
XE위키 모듈: 숫자 문서의 짧은 주소 문제와 미디어위키 문법 사용시 내부링크 문제 해결하기 Gunmania 2016.02.12
가상사이트 페이지별 개별 레이아웃 적용하기 Xiso 2016.01.31
warning: call time pass by reference 에러 해결 방법 [6] ezi 2011.07.28
리눅스 10원짜리 팁 - history 명령어 응용 paraduxx 2016.01.12
리눅스 10원짜리 팁 - 탭 키 쓰십니까 ? paraduxx 2016.01.12
회원가입폼 기본항목에 안내문구 넣기 paraduxx 2016.01.11
XE와 마인크래프트 서버 화이트리스트 연동하기 [9] file 연가시먹었다 2012.08.25
일반 게시판에서 익명 선택하여 작성하기 [2] POWERXE 2015.12.27
메뉴활성화에 따라 원하는 위치에 레이어 넣고 바꾸기.. 왼쪽 플래시 메뉴 메뉴따라서 바꾸기 [4] 만쓰별(정만) 2009.01.24
비밀글 이여도 갤러리나 웹진형에서, 썸네일이나 요약 부분이 나타나게 수정하려면.. sejin7940 2015.12.23
상단에 스르르~ 닫기 가능한 배너 달기 [30] file 야옹잉 2014.06.20
빠른 글 쓰기: 메인 페이지에서 글 쓰기 [1] file 윈컴이 2015.12.09
통합검색 기능에 권한 적용하기 (완전 차단 필요할 때) [9] file 모노소프트 2012.04.30
관리자만 볼 수 있는 로그인 기록 페이지 만들기 퍼니엑스이 2015.12.07
rsync 와 ssh root 접속을 막고 인증키로만 백업하기 마루디자인 2015.11.25
리눅스 백업 1.0 ibin 2015.11.23
이제는 유튜브동영상 손쉽게 다운로드 받으세요 ミ:つÞ [7] 딴죽을거는남자 2015.11.02
파시ㅇ 예제입니다. [3] file 유창화 2015.11.12
CentOS PHP TS/NTS 모드 설치 방법 마루디자인 2015.11.09
태그 쓰기