tadaktadak.co.kr HTML5 소스분석 자유게시판

본문 바로가기
사이트 내 전체검색

tadaktadak.co.kr HTML5 소스분석 자유게시판

tadaktadak.co.kr HTML5 소스분석  

페이지 정보

작성자 AllWords (221.♡.111.165) 댓글 0건 조회 339회 작성일 22-01-21 19:27

본문

/*
Copyright (C) NAVER corp.  

This library is free software; you can redistribute it and/or  
modify it under the terms of the GNU Lesser General Public  
License as published by the Free Software Foundation; either  
version 2.1 of the License, or (at your option) any later version.  

This library is distributed in the hope that it will be useful,  
but WITHOUT ANY WARRANTY; without even the implied warranty of  
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU  
Lesser General Public License for more details.  

You should have received a copy of the GNU Lesser General Public  
License along with this library; if not, write to the Free Software  
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA  
*/

function createSEditor2(elIRField, htParams, elSeAppContainer){
if(!window.$Jindo){
parent.document.body.innerHTML="진도 프레임웍이 필요합니다.<br>\n<a href='http://dev.naver.com/projects/jindo/download'>http://dev.naver.com/projects/jindo/download</a>에서 Jindo 1.5.3 버전의 jindo.min.js를 다운로드 받아 /js 폴더에 복사 해 주세요.\n(아직 Jindo 2 는 지원하지 않습니다.)";
return;
}

var elAppContainer = (elSeAppContainer || jindo.$("smart_editor2"));
var elEditingArea = jindo.$$.getSingle("DIV.husky_seditor_editing_area_container", elAppContainer);
var oWYSIWYGIFrame = jindo.$$.getSingle("IFRAME.se2_input_wysiwyg", elEditingArea);
var oIRTextarea = elIRField?elIRField:jindo.$$.getSingle("TEXTAREA.blind", elEditingArea);
var oHTMLSrc = jindo.$$.getSingle("TEXTAREA.se2_input_htmlsrc", elEditingArea);
var oTextArea = jindo.$$.getSingle("TEXTAREA.se2_input_text", elEditingArea);
if(!htParams){ 
htParams = {}; 
htParams.fOnBeforeUnload = null;
}
htParams.elAppContainer = elAppContainer; // 에디터 UI 최상위 element 셋팅 
htParams.oNavigator = jindo.$Agent().navigator(); // navigator 객체 셋팅
htParams.I18N_LOCALE = htParams.I18N_LOCALE || "ko_KR";

var oEditor = new nhn.husky.HuskyCore(htParams);
oEditor.registerPlugin(new nhn.husky.CorePlugin(htParams?htParams.fOnAppLoad:null));
oEditor.registerPlugin(new nhn.husky.StringConverterManager());
if(htParams.bSkipXssFilter !== true){
// 보안 필터링 플러그인 (TODO:소스분리 및 블랙리스트 옵션 추가)
oEditor.registerPlugin({
_rxFilter:/<\/*(?:applet|b(?:ase|gsound|link)|embed|frame(?:set)?|i(?:frame|layer)|l(?:ayer|ink)|meta|object|s(?:cript|tyle)|title|xml)[^>]*?>/gi,
$ON_REGISTER_CONVERTERS : function() {
var fXssFilter = jindo.$Fn(function(sHtml){
return sHtml.replace(this._rxFilter, "");
}, this).bind();
this.oApp.exec("ADD_CONVERTER",["HTMLSrc_TO_IR", fXssFilter]);
this.oApp.exec("ADD_CONVERTER",["IR_TO_DB", fXssFilter]);
}
});
}

var htDimension = {
nMinHeight:205,
nMinWidth:parseInt(elIRField.style.minWidth, 10)||570,
nHeight:elIRField.style.height||elIRField.offsetHeight,
nWidth:elIRField.style.width||elIRField.offsetWidth
};
var htConversionMode = {
bUseVerticalResizer : htParams.bUseVerticalResizer,
bUseModeChanger : htParams.bUseModeChanger
};
var aAdditionalFontList = htParams.aAdditionalFontList;
oEditor.registerPlugin(new nhn.husky.SE_EditingAreaManager("WYSIWYG", oIRTextarea, htDimension,  htParams.fOnBeforeUnload, elAppContainer));
oEditor.registerPlugin(new nhn.husky.SE_EditingArea_WYSIWYG(oWYSIWYGIFrame)); // Tab Editor 모드
oEditor.registerPlugin(new nhn.husky.SE_EditingArea_HTMLSrc(oHTMLSrc)); // Tab HTML 모드
oEditor.registerPlugin(new nhn.husky.SE_EditingArea_TEXT(oTextArea)); // Tab Text 모드
oEditor.registerPlugin(new nhn.husky.SE2M_EditingModeChanger(elAppContainer, htConversionMode)); // 모드간 변경(Editor, HTML, Text)
oEditor.registerPlugin(new nhn.husky.SE_PasteHandler()); // WYSIWYG Paste Handler
oEditor.registerPlugin(new nhn.husky.HuskyRangeManager(oWYSIWYGIFrame));
oEditor.registerPlugin(new nhn.husky.Utils());
oEditor.registerPlugin(new nhn.husky.SE2M_UtilPlugin());
oEditor.registerPlugin(new nhn.husky.SE_WYSIWYGStyler());
oEditor.registerPlugin(new nhn.husky.SE2M_Toolbar(elAppContainer));
oEditor.registerPlugin(new nhn.husky.Hotkey()); // 단축키
oEditor.registerPlugin(new nhn.husky.SE_EditingAreaVerticalResizer(elAppContainer, htConversionMode)); // 편집영역 리사이즈
oEditor.registerPlugin(new nhn.husky.DialogLayerManager());
oEditor.registerPlugin(new nhn.husky.ActiveLayerManager());
oEditor.registerPlugin(new nhn.husky.SE_WYSIWYGStyleGetter()); // 커서 위치 스타일 정보 가져오기

oEditor.registerPlugin(new nhn.husky.SE_WYSIWYGEnterKey("P")); // 엔터 시 처리, 현재는 P로 처리
oEditor.registerPlugin(new nhn.husky.SE2M_ColorPalette(elAppContainer)); // 색상 팔레트
oEditor.registerPlugin(new nhn.husky.SE2M_FontColor(elAppContainer)); // 글자색
oEditor.registerPlugin(new nhn.husky.SE2M_BGColor(elAppContainer)); // 글자배경색
oEditor.registerPlugin(new nhn.husky.SE2M_FontNameWithLayerUI(elAppContainer, aAdditionalFontList)); // 글꼴종류
oEditor.registerPlugin(new nhn.husky.SE2M_FontSizeWithLayerUI(elAppContainer)); // 글꼴크기
oEditor.registerPlugin(new nhn.husky.SE2M_LineStyler());  
oEditor.registerPlugin(new nhn.husky.SE2M_ExecCommand(oWYSIWYGIFrame));
oEditor.registerPlugin(new nhn.husky.SE2M_LineHeightWithLayerUI(elAppContainer)); // 줄간격

oEditor.registerPlugin(new nhn.husky.SE2M_Quote(elAppContainer)); // 인용구
oEditor.registerPlugin(new nhn.husky.SE2M_Hyperlink(elAppContainer)); // 링크
oEditor.registerPlugin(new nhn.husky.SE2M_SCharacter(elAppContainer)); // 특수문자
oEditor.registerPlugin(new nhn.husky.SE2M_FindReplacePlugin(elAppContainer)); // 찾기/바꾸기
oEditor.registerPlugin(new nhn.husky.SE2M_TableCreator(elAppContainer)); // 테이블 생성
oEditor.registerPlugin(new nhn.husky.SE2M_TableEditor(elAppContainer)); // 테이블 편집
oEditor.registerPlugin(new nhn.husky.SE2M_TableBlockStyler(elAppContainer)); // 테이블 스타일
if(nhn.husky.SE2M_AttachQuickPhoto){
oEditor.registerPlugin(new nhn.husky.SE2M_AttachQuickPhoto(elAppContainer)); // 사진
}

oEditor.registerPlugin(new nhn.husky.MessageManager(oMessageMap, htParams.I18N_LOCALE));
oEditor.registerPlugin(new nhn.husky.SE2M_QuickEditor_Common(elAppContainer)); // 퀵에디터 공통(표, 이미지)
oEditor.registerPlugin(new nhn.husky.SE2B_CSSLoader()); // CSS lazy load
if(window.frameElement){
oEditor.registerPlugin(new nhn.husky.SE_OuterIFrameControl(elAppContainer, 100));
}
oEditor.registerPlugin(new nhn.husky.SE_ToolbarToggler(elAppContainer, htParams.bUseToolbar));
oEditor.registerPlugin(new nhn.husky.SE2M_Accessibility(elAppContainer, htParams.I18N_LOCALE)); // 에디터내의 웹접근성 관련 기능모음 플러그인 
    oEditor.registerPlugin(new nhn.husky.SE2B_Customize_ToolBar(elAppContainer));       // 2.3 버젼에 있는 툴바 이용

return oEditor;
}

/* Copyright (C) NAVER corp. This library is free software; you can redistribute it and/or modify it under the terms of the GNU Lesser General Public License as published by the Free Software Foundation; either version 2.1 of the License, or (at your option) any later version. This library is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more details. You should have received a copy of the GNU Lesser General Public License along with this library; if not, write to the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA */ /* * Smart Editor 2 Configuration : This setting must be changed by service */ window.nhn = window.nhn || {}; nhn.husky = nhn.husky || {}; nhn.husky.SE2M_Configuration = nhn.husky.SE2M_Configuration || {}; /** * CSS LazyLoad를 위한 경로 */ nhn.husky.SE2M_Configuration.SE2B_CSSLoader = { sCSSBaseURI : "css" }; /** * 편집영역 설정 */ nhn.husky.SE2M_Configuration.SE_EditingAreaManager = { sCSSBaseURI : "css", // smart_editor2_inputarea.html 파일의 상대경로 sBlankPageURL : "smart_editor2_inputarea.html", sBlankPageURL_EmulateIE7 : "smart_editor2_inputarea_ie8.html", aAddtionalEmulateIE7 : [] // IE8 default 사용, IE9 ~ 선택적 사용 }; /** * [웹접근성] * 단축키 ALT+, ALT+. 을 이용하여 스마트에디터 영역의 이전/이후 요소로 이동할 수 있다. * sBeforeElementId : 스마트에디터 영역 이전 요소의 id * sNextElementId : 스마트에디터 영역 이후 요소의 id * * 스마트에디터 영역 이외의 제목 영역 (예:스마트에디터가 적용된 블로그 쓰기 페이지에서의 제목 영역) 에 해당하는 엘리먼트에서 Tab키를 누르면 에디팅 영역으로 포커스를 이동시킬 수 있다. * sTitleElementId : 제목에 해당하는 input 요소의 id. */ nhn.husky.SE2M_Configuration.SE2M_Accessibility = { ed_nonce : (typeof parent.ed_nonce !='undefined') ? parent.ed_nonce : '', sBeforeElementId : '', sNextElementId : '', sTitleElementId : '' }; /** * 링크 기능 옵션 */ nhn.husky.SE2M_Configuration.SE2M_Hyperlink = { bAutolink : true // 자동링크기능 사용여부(기본값:true) }; nhn.husky.SE2M_Configuration.Quote = { sImageBaseURL : 'http://static.se2.naver.com/static/img' }; nhn.husky.SE2M_Configuration.SE2M_ColorPalette = { bUseRecentColor : false }; nhn.husky.SE2B_Customize_ToolBar = jindo.$Class(/** @lends nhn.husky.SE2B_Customize_ToolBar */{ name : "SE2B_Customize_ToolBar", /** * @constructs * @param {Object} oAppContainer 에디터를 구성하는 컨테이너 */ $init : function(oAppContainer) { this._assignHTMLElements(oAppContainer); }, $BEFORE_MSG_APP_READY : function(){ this._addEventMoreButton(); }, /** * @private * @description DOM엘리먼트를 수집하는 메소드 * @param {Object} oAppContainer 툴바 포함 에디터를 감싸고 있는 div 엘리먼트 */ _assignHTMLElements : function(oAppContainer) { this.oAppContainer = oAppContainer; this.elTextToolBarArea = jindo.$$.getSingle("div.se2_tool"); this.elTextMoreButton = jindo.$$.getSingle("button.se2_text_tool_more", this.elTextToolBarArea); this.elTextMoreButtonParent = this.elTextMoreButton.parentNode; this.welTextMoreButtonParent = jindo.$Element(this.elTextMoreButtonParent); this.elMoreLayer = jindo.$$.getSingle("div.se2_sub_text_tool"); }, _addEventMoreButton : function (){ this.oApp.registerBrowserEvent(this.elTextMoreButton, "click", "EVENT_CLICK_EXPAND_VIEW"); this.oApp.registerBrowserEvent(this.elMoreLayer, "click", "EVENT_CLICK_EXPAND_VIEW"); }, $ON_EVENT_CLICK_EXPAND_VIEW : function(weEvent){ this.oApp.exec("TOGGLE_EXPAND_VIEW", [this.elTextMoreButton]); weEvent.stop(); }, $ON_TOGGLE_EXPAND_VIEW : function(){ if(!this.welTextMoreButtonParent.hasClass("active")){ this.oApp.exec("SHOW_EXPAND_VIEW"); } else { this.oApp.exec("HIDE_EXPAND_VIEW"); } }, $ON_CHANGE_EDITING_MODE : function(sMode){ if(sMode != "WYSIWYG"){ this.elTextMoreButton.disabled =true; this.welTextMoreButtonParent.removeClass("active"); this.oApp.exec("HIDE_EXPAND_VIEW"); }else{ this.elTextMoreButton.disabled =false; } }, $AFTER_SHOW_ACTIVE_LAYER : function(){ this.oApp.exec("HIDE_EXPAND_VIEW"); }, $AFTER_SHOW_DIALOG_LAYER : function(){ this.oApp.exec("HIDE_EXPAND_VIEW"); }, $ON_SHOW_EXPAND_VIEW : function(){ this.welTextMoreButtonParent.addClass("active"); this.elMoreLayer.style.display = "block"; }, $ON_HIDE_EXPAND_VIEW : function(){ this.welTextMoreButtonParent.removeClass("active"); this.elMoreLayer.style.display = "none"; }, /** * CHANGE_EDITING_MODE모드 이후에 호출되어야 함. * WYSIWYG 모드가 활성화되기 전에 호출이 되면 APPLY_FONTCOLOR에서 에러 발생. */ $ON_RESET_TOOLBAR : function(){ if(this.oApp.getEditingMode() !== "WYSIWYG"){ return; } //스펠체크 닫기 this.oApp.exec("END_SPELLCHECK"); //열린 팝업을 닫기 위해서 this.oApp.exec("DISABLE_ALL_UI"); this.oApp.exec("ENABLE_ALL_UI"); //글자색과 글자 배경색을 제외한 세팅 this.oApp.exec("RESET_STYLE_STATUS"); this.oApp.exec("CHECK_STYLE_CHANGE"); //최근 사용한 글자색 셋팅. this.oApp.exec("APPLY_FONTCOLOR", ["#000000"]); //더보기 영역 닫기. this.oApp.exec("HIDE_EXPAND_VIEW"); } });

이를 통해 타닥타닥의 서비스 코드는 네이버의 오픈소스 라이브러리를 사용함을 알 수 있다.

궁금한거 있으면 댓글다세요

추천0
  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

회원로그인

친구들에게 타닥타닥을 알려주세요

타닥채팅 함께해요

  • 0

회원가입 하고 랭킹 도전!

  • 오늘 타닥타닥 이벤트 타수는 777
  • 오늘 총 26명이 기록을 달성중 입니다.
  • 랭킹에 도전하세요!

사이트 전체 효과음 설정

  • 효과음끔 이미지꺼짐 효과음 켜짐이미지켜짐