스포넷

메인게시판 A자유게시판
로그인 해주세요.

☆스포넷 공식 설문☆    차종 변경 하거나 추가 하신 회원..?     ::설문 참여하기::

스포넷 자유게시판

스포넷 메인 게시판입니다. 서로 존중하면서 편하고 자유롭게 이용해 주시면 감사하겠습니다.

  • 목록
  • 아래로
  • 위로
  • 쓰기
  • 검색

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

게시판에 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 라인 참고

[서경]제오xe [서경]제오xe
5 Lv. 3484/5000P

괴로울 때엔 마음의 平靜을 보존하려는 노력을
언제나 잊지 말 것이며,
행복할 때엔 과도하게 기뻐하는 것을 삼가라.,,

о☆ ♬뻔한 일상 무멘트 최대치의 행복~♪♪ http://joungk9.saycast.com

공유

facebooktwitterpinterestbandkakao story
퍼머링크

댓글 3

스포넷은 자동 등업 시스템입니다. 가입후 가입인사 게시판과 출고신고 게시판에 인사 남겨주세요. 함께 환영 댓글 다시면 어느새 등급이 올라갈겁니다. ^0^
profile image
in╂∑rNⓔⓔDs 2011.09.02. 13:22
역시 제오xe님!

글 감사합니다. ^^

해당하는 내용은 팁에 있는 내용이라 파악하고 있는데요.
(혹시 제오xe님이 무얼까님인가요?)

제가 추구하는 소스수정과는 좀 거리감이 있어서요.

'<a' or '<A' 2가지에 대해서 '<a target=_blank'로 str_replace시키는 방법으로 생각하고 있습니다.

원본 코어는 수정하지 말자라는 기본 취지를 살리는 것이 좋을 것 같아서이구요.

xe를 살펴본지 오래되지 않아서 분위기파악이 전부 되지는 않았지만,
일감으로 보자면,
게시글과 리플에서는 스킨에서 간단하게 수정이 가능할것 같습니다.
댓글
profile image
nattylove 2011.09.02. 13:46
오전 11시쯤에 이미 적용 했습니다.

좀 애매한게.. 기본 설정값을 _blank로 바꾸어주는건 아니구요.

url 적은 다음에 편집기의 url 버튼을 누르고 레이어 뜨면 _blank 버튼을
눌러줘야 적용이 됩니다.

이 내용으로 적용 완료 했구요.

http://www.kiasportage.net/index.php?mid=s001&document_srl=13006867

소스 수정에 비해서는 역시 불편함이 남습니다. 리뉴얼 마무리 되면
인터니즈님이 한번 뒤져주실것으로다가... @_@
댓글
profile image
in╂∑rNⓔⓔDs 2011.09.02. 14:44
상황종료~
역시나 예상했던대로,
스킨에서 str_replace 삽입으로 쉽게 해결했네요. ^^
본문에서는 항시 _blank로 현재 조절되었습니다.
댓글
권한이 없습니다. 로그인

신고

"님의 댓글"

이 댓글을 신고 하시겠습니까?

삭제

"님의 댓글"

이 댓글을 삭제하시겠습니까?

번호 제목 글쓴이 날짜 조회 수
공지 [버그를 찾아라~] 스포넷 이용 불편사항 접수. 81 image nattylove 17.10.18.02:08 371만
공지 [공식 설문] 차량 변경 또는 추가 하신 분...?? - 선물 있어요 - 248 image nattylove 17.10.13.09:59 493만
공지 스포넷에 대한 안내 (2006/04/10) 371 image nattylove 04.07.21.16:21 172만
공지 스포티지 출고를 받으신 분은 반드시 출생신고 해주세요! 89 image nattylove 04.08.19.14:27 156만
90602
image
봉천동귀신을 본 아빠 9
[서경]마초맨 11.09.05.00:22 3040
90601
image
도어 락/언락 스위치 관련 입니다... 11
파워볼 11.09.04.23:54 3496
90600
image
아~야비군 ㅜㅜ 내일 동원 2박3일 갑니다~ 14
[경]골프맨[085] 11.09.04.23:51 1980
90599
image
이게 마우스야 오므라이스야 1
[충]진돗개 11.09.04.23:37 2442
90598
image
남친 화나게 만드는 여친...결국...... 2
[충]진돗개 11.09.04.23:35 2693
90597
image
판금도장 문의 드립니다.. 2
[서경]바맹이 11.09.04.22:12 2350
90596
image
해커스토익 실전1000제 리스닝 1 mp3 파일 구합니다^^
[서경]준스 11.09.04.22:02 1.3만
90595
image
타이어 문의드립니다. 2
[전]인도 11.09.04.21:42 2170
90594
image
요즘 흔한 교실 풍경 7
[서경]마초맨 11.09.04.21:39 2976
90593
image
GTA 실사판 6
[서경]마초맨 11.09.04.21:19 2679
90592
image
공중파에서 성추행 2
[서경]마초맨 11.09.04.21:15 2966
90591
image
[충]스펙터님 저도 이정돈데 안터졌었어요;; 16
[충]드레드 11.09.04.20:33 2481
90590
image
배기온문의요 16
[경]카리스마쫑 11.09.04.19:51 2692
90589
image
계절의 별미 - 간단한 복숭아 디저트 음료 1
[서경]꺄오스 11.09.04.19:29 2314
90588
image
길막 김여사 ㅜㅜ 3
min1730 11.09.04.17:10 2710
90587
image
휴대폰으로 지하철요금 결제 어떻게하나요 ?? 2
[강릉]스키폭주족 11.09.04.12:47 1.4만
90586
image
타이어 공기압 얼만가용?? 10
[충] 장비 11.09.04.09:45 3248
90585
image
컴터가 느려진건 저만 그런가요? 1
[경]메탈릭 11.09.03.23:26 2284
90584
image
네티러브님 쪽지기능좀...고쳐주세요!!! 2
[충]홍뽕™ 11.09.03.22:34 2283
90583
image
로보캅 vs 닌자 2
[서경]마초맨 11.09.03.18:18 2340
90582
image
v밸트 + dpf배선보강 / 서울 영등포구 신길남부지점 오토큐 Good!
[서경]비싼카메라 11.09.03.15:16 2911
90581
image
[리뉴얼] 혹... 이건 다시 복구 안되나요? 3
[전]레인[여수] 11.09.03.15:04 2314
90580
image
[웹공지] 회원정보에 대한 안내 (인증메일 오류관련 포함) 1
in╂∑rNⓔⓔDs 11.09.03.12:30 2268
90579
image
리뉴얼 2차 이벤트 당첨안내 10
[충]물파스 11.09.03.12:13 2267
90578
image
강력 태풍 탈라스 일본 상륙 10
[서경]팬케이크™ 11.09.03.12:04 2619
90577
image
연예인 대표 효자
[서경]마초맨 11.09.03.00:57 2367
90576
image
부탁 드립니다. 3
엄지공주 11.09.02.22:58 2566
90575
image
대한민국 vs 레바논 골장면 3
[서경]마초맨 11.09.02.22:54 2471
90574
image
전세집때문에 머리가 너무 복잡하네요ㅡ,.ㅜ 9
[서경]풍 11.09.02.22:14 2450
90573
image
아 제네레이터 풀리 베어링 교환.... 4
[전]첫차[목포] 11.09.02.20:40 6481
90572
image
애새끼 남편 (판춘문예) 13
[서경]마초맨 11.09.02.20:02 3837
90571
image
타야 교체 할려고 하는데 국산꺼 추천 부탁드립니다 6
[전]실버엔젤[여수] 11.09.02.19:06 3054
90570
image
기아자동차 이벤트 13
[서경]마초맨 11.09.02.18:58 2401
90569
image
허리케인 오라그래 1
[서경]마초맨 11.09.02.18:56 2534
90568
image
리뉴얼 2차 이벤트 참여란~ 79
[충]물파스 11.09.02.18:02 2574
90567
image
[웹공지] 야매리플카운터 서비스 3
in╂∑rNⓔⓔDs 11.09.02.17:53 1826
90566
image
혹시 3D SOUND REMIX 파일 구할수 있나요? 1
[충]영웅 11.09.02.17:50 2375
90565
image
모바일용 개편중입니다. 7
nattylove 11.09.02.17:48 1996
90564
image
에로배우 최은 = 김태희?? 6
[서경]아무것도몰라요 11.09.02.17:32 2.2만
90563
image
이런게 블랙박스라고.... 10
[서경]창성한별 11.09.02.17:07 2984

검색