웹마스터 팁

  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 라인 참고

이 게시물을
좋아요
목록
제목 글쓴이 날짜
htaccess 보안 팁 포럼위트 2015.02.24
300기가 Zboard4->XE 이전기 [14] file forest535 2015.02.13
스케치북 최신버전에서 미리 덧글 입력해두기 [5] file LI-NA 2015.02.18
추천 취소 기능 만들기 [5] file Summer 2013.09.11
xe core 설치 화면 오류 있습니다. 이렇게 바꿔주세요. [2] 한꼬마 2015.02.18
데이타 이전 시 xml 파일 임포트 속도 높이기 ^^ forest535 2015.02.17
jquery 외부로드하기 [22] DynamicLaser 2014.04.07
XE와 별도 프로그램 연동시 세션공유 [15] 똑디 2008.12.12
snoop가 안될때 curl 로 가져오기 [3] 한꼬마 2015.02.13
템플릿등에서 PHP 제어 구조(if, for, foreach)의 대체 문법 적용 [3] 총모아 2015.01.30
1.4.2.3 에서 1.4.3 이상 버전으로 업그레이드 시 백지화면 해결팁 [4] 2년후 2010.12.15
회원가입후 24시간 이후 글작성 가능하기 [2] 샵사이드 2015.02.09
인증메일을 gmail의 smtp로 보내기 [29] showjean 2012.07.17
XE 비회원이 귀찮게 이메일 홈페이지 입력 안하도록 하기 [7] jhrun 2012.12.16
제로보드4에서 xe로 이전시 갤러리 게시판 이미지 깨어지는 현상 해결방법 [2] 최르토스 2012.04.22
스케치북5 1.7.0 버전 모바일 게시판 스킨 댓글수 안나올때 [2] 키스투엑스이 2014.10.22
제가 쓰는 자동링크 (스킨수정) [4] okiz 2014.04.29
사용자 매뉴에 회원정보와 포인트설정 바로가기 기능 삽입 [1] file 간장게장같은남자 2015.01.23
사용자정의 중 전화번호 형식을 쓰는경우 - 사이에 한칸씩 여백이 생기는 걸 없애는방법 [1] sejin7940 2015.01.23
xe 폰갭 제작시 admob 광고 글쓰기 방해 하지 않으려면 한꼬마 2015.01.26
태그 쓰기