웹마스터 팁

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

이 게시물을
좋아요
목록
제목 글쓴이 날짜
로그인 위젯 질문드립니다. 소리없는 2011.08.31
IE에선 업로드 되고 Firefox chrome에서는 업로드가 안될때 나정생 2011.08.30
[꽁수로 해결하자!] 모바일 레이아웃 적용시 파일 업로드 안 되는 문제 file 나루씡. 2011.08.28
sejin7940 게시판에 소셜XE 댓글 다는 방법 [소스코드] [5] Treasurej 2011.08.16
게시판 글쓰기에서 자동링크의 target을 _blank로 일괄 적용 무얼까 2011.08.23
조회수 제한 풀고, 조회수 증가값을 더 크게 하는 소스 [7] sejin7940 2011.08.21
닉네임이나 이름의 뒷부분을 ** 처리로 숨기고픈 경우 [2] sejin7940 2011.08.06
XE 를 루트로 옮기는 방법과 문제 대응책 정리 (도메인 접속시 xe폴더로 이동 없이 바로 사이트 뜨게 하기) [8] file Gekkou 2009.12.06
내 PC에서 XE 설치하는 방법 [2] file amd짱좋아 2011.08.17
XE 템플릿 구문 정리 [1] 우진홈 2011.08.17
FTP에서 인코딩 때문에 애 먹으시는 분들? file 히피♬ 2011.08.15
저니님의 업 다운 퀵메뉴 적용하기 [4] file nabul2 2010.09.05
계시판 확장변수에 대하여 여쭤봅니다. [1] 마지막드론 2011.08.14
내 PC에서 XE 빠르게 설치하는 방법 [7] 차오이 2011.04.10
자체 우편번호 검색DB 사용하기 우진홈 2011.08.11
플래시 랜덤하게 불러오기 [9] 선비숨결 2009.04.21
홈페이지에 퀵메뉴를 다는 소스 (ie7이상, 사파리, 불여우, 오페라 등은 position:fixed 로 고정) [20] Firstlove 2011.03.14
모듈 개발 틀 쉽게짜기 file Xiso 2011.08.03
모바일 메인에서 쓰는 기능을 삽입할려면 어떻게 해야 할까요?> 최상순480 2011.08.02
유튭 비디오를 XE에 올리는 아주 간단한 방법 [1] 유샤인 2011.07.23
태그 쓰기