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
댓글목록
등록된 댓글이 없습니다.